Theme colors

Customizable theme color variables to use with StyleMods styles, components and utilities.

Overview (anchor)

Theme colors can be included for the following styles if they are enabled. They leverage the variable fallback methods used throughout the styles, so also rely on the method not being customized in the default styles.

The styles are written using fallbacks because it allows creating custom variable tokens for them without having to override default values. The theme colors and color utilities make use of that to create integrated color styles but everything that uses the fallback can be used the same way, e.g. fonts, padding, margins, etc.

Using the modules (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below. The theme colors use four of the surface color tokens that can be included with the theme variables or with the color variables if included.

All theme and surface colors tokens within a :where(html) pseudo-class style:

custom.scss

@use "stylemods/scss" as *;
@include all-theme-surface-variables-css;

Theme colors only with surface colors included with the color variables:

custom.scss

@use "stylemods/scss" as *;
@include surface-variables-css;
@include all-theme-variables-css;

You can customize the token style as detailed on the customizing page or include them in your own pseudo-class style:

custom.scss

@use "stylemods/scss" as *;
:root {
  @include all-theme-surface-variables;
}

Or with all the surface color variables:

custom.scss

@use "stylemods/scss" as *;
:root {
  @include surface-variables;
  @include all-theme-variables;
}

Individual theme colors (anchor)

Each can be included individually to enable compiling the variables selectively where required. The following example demonstrates including the required theme surface tokens and all the individual modules.

custom.scss

@use "stylemods/scss" as *;
@include theme-surface-css;
@include theme-typography-css;
@include theme-forms-buttons-css;
@include theme-tables-css;
@include theme-accordions-css;
@include theme-alert-css;
@include theme-badge-css;
@include theme-border-css;
@include theme-dialog-css;
@include theme-card-css;
@include theme-list-group-css;
@include theme-popover-css;

If including all the surface colors replace the theme-surface-css above with the surface variables:

custom.scss

@use "stylemods/scss" as *;
@include surface-variables-css;
@include theme-typography-css;
@include theme-forms-buttons-css;
@include theme-tables-css;
@include theme-accordions-css;
@include theme-alert-css;
@include theme-badge-css;
@include theme-border-css;
@include theme-dialog-css;
@include theme-card-css;
@include theme-list-group-css;
@include theme-popover-css;

If required the default :where(html) pseudo-class token style can customized as documented or the variables can be included within your preferred style:

custom.scss

@use "stylemods/scss" as *;
:root {
  @include theme-typography-variables;
  @include theme-forms-buttons-variables;
  @include theme-tables-variables;
}

See the using modules page for more information including how to compile the modules in cascade layers and include and reuse them in multiple source files.

Using the framework (anchor)

Using the recommended custom setup enable the styles in an overrides document:

overrides.scss

@use "stylemods/scss/configuration" as *;
$enable-theme-surface:          true;
$enable-theme-typography:       true;
$enable-theme-forms-buttons:    true;
$enable-theme-tables:           true;
$enable-theme-accordions:       true;
$enable-theme-alerts:           true;
$enable-theme-badges:           true;
$enable-theme-borders:          true;
$enable-theme-dialogs:          true;
$enable-theme-cards:            true;
$enable-theme-list-groups:      true;
$enable-theme-popovers:         true;

Include the overrides and the framework styles with your custom document for compiling the framework:

custom.scss

@use "overrides";
@use "stylemods/scss/stylemods";

See using the framework for more information including how the styles can also be compiled within cascade layers.

Source code (anchor)

The modules and the framework follow the same methods for customizing the default values and using the CSS variables to create custom theme documents. See the customizing page for more information.

theme.scss

// ---------------------------------------------------------- 
// Theme colors
// ----------------------------------------------------------
@use "surface" as *;

// Light typography
$theme-text-light:            #000 !default;
$theme-link-light:            #1c3db5 !default;
$theme-link-visited-light:    #4f6fe3 !default;
$theme-link-hover-light:      #385de0 !default;
$theme-background-light:      #eaecee !default;

// Dark typography
$theme-text-dark:             #fff !default;
$theme-link-dark:             #9fbfdf !default;
$theme-link-visited-dark:     #b3cce6 !default;
$theme-link-hover-dark:       #c6d8ec !default;
$theme-background-dark:       #1f2428 !default;

// Theme typography
$theme-text:                  light-dark($theme-text-light, $theme-text-dark) !default;
$theme-background:            light-dark($theme-background-light, $theme-background-dark) !default;
$theme-link:                  light-dark($theme-link-light, $theme-link-dark) !default;
$theme-link-visited:          light-dark($theme-link-visited-light, $theme-link-visited-dark) !default;
$theme-link-hover:            light-dark($theme-link-hover-light, $theme-link-hover-dark) !default;

// Theme surfaces
$theme-surface:               var(--background) !default;
$theme-surface-1:             var(--surf-1) !default;
$theme-surface-2:             var(--surf-2) !default;
$theme-surface-3:             var(--surf-3) !default;
$theme-surface-4:             var(--surf-4) !default;
$theme-table-stripes:         color-mix(in srgb, CanvasText 1%, var(--background)) !default;
$theme-table-hover:           color-mix(in srgb, CanvasText 2%, var(--background)) !default;

// Theme surfaces (if surface.scss not compiled)
$base-surface:                $theme-background !default;
$base-surface-1:              $surface-1 !default;
$base-surface-2:              $surface-2 !default;
$base-surface-3:              $surface-3 !default;
$base-surface-4:              $surface-4 !default;

// Tokens style
$theme-tokens:                ':where(html)' !default;

// Variables tokens maps
$theme-surfaces: (
  "surface": $base-surface,
  "surf-1": $base-surface-1,
  "surf-2": $base-surface-2,
  "surf-3": $base-surface-3,
  "surf-4": $base-surface-4,
) !default;

$theme-typography: (
  "text": $theme-text,
  "background": $theme-background,
  "link": $theme-link,
  "visited": $theme-link-visited,
  "hover": $theme-link-hover,
  "kbd-bg": $theme-surface-2,
  "pre-bd-color": $theme-surface-3,
  "pre-bg": $theme-surface-1,
  "blockquote-bd-color": $theme-surface-3,
) !default;

$theme-forms-buttons: (
  "btn-bd-color": $theme-surface-4,
  "btn-bg": $theme-surface-1,
  "btn-hover": $theme-surface-2,
  "form-bd-color": $theme-surface-4,
  "form-bg": $theme-surface,
  "form-accent": $theme-link,
  "focus-color": $theme-surface-4,
) !default;

$theme-tables: (
  "table-bg": $theme-surface,
  "thead-bg": $theme-surface-1,
  "table-bd-color": $theme-surface-3,
  "table-stripes": $theme-table-stripes,
  "table-hover": $theme-table-hover,
) !default;

$theme-accordion: (
  "summary-bg": $theme-surface-1,
  "summary-focus": $theme-surface-2,
  "accordion-bd-color": $theme-surface-3,
) !default;

$theme-alert: (
  "alert-bg": $theme-surface-1,
  "alert-bd-color": $theme-surface-3,
) !default;

$theme-badge: (
  "badge-bg": $theme-surface-1,
  "badge-bd-color": $theme-surface-3,
) !default;

$theme-border: (
  "bd-color": $theme-surface-3,
) !default;

$theme-button: (
  "btn-bd-color": $theme-surface-4,
  "btn-bg": $theme-surface-1,
  "btn-hover": $theme-surface-2,
) !default;

$theme-card: (
  "card-bd-color": $theme-surface-3,
  "card-bg": $theme-surface,
  "card-hover": $theme-surface-1,
  "card-focus-color": $theme-surface-4,
  "card-title-bg": $theme-surface-1,
) !default;

$theme-dialog: (
  "dialog-bg": $theme-surface-1,
  "dialog-bd-color": $theme-surface-3,
  "dialog-title-bg": $theme-surface-2,
) !default;

$theme-dropdown: (
  "dropdown-bg": $theme-surface,
  "dropdown-bd-color": $theme-surface-3,
  "dropdown-btn-bg": $theme-surface-1,
  "dropdown-btn-hover": $theme-surface-2,
  "dropdown-focus-color": $theme-surface-4,
  "dropdown-link-hover": $theme-surface-1,
) !default;

$theme-list-group: (
  "list-group-dt-bg": $theme-surface-2,
  "list-group-hover": $theme-surface-1,
  "list-group-bd-color": $theme-surface-3,
  "list-group-bg": $theme-surface,
) !default;

$theme-popover: (
  "popover-bg": $theme-surface-1,
  "popover-bd-color": $theme-surface-3,
) !default;

// Style and utility variable tokens
@mixin theme-surface-variables {
  @each $name, $value in $theme-surfaces {
    --#{$name}: #{$value};
  }
}

@mixin theme-surface-css {
  #{$theme-tokens} {
    @include theme-surface-variables;
  }
}

@mixin theme-typography-variables {
  @each $name, $value in $theme-typography {
    --#{$name}: #{$value};
  }
}

@mixin theme-typography-css {
  #{$theme-tokens} {
    @include theme-typography-variables;
  }
}

@mixin theme-forms-buttons-variables {
  @each $name, $value in $theme-forms-buttons {
    --#{$name}: #{$value};
  }
}

@mixin theme-forms-buttons-css {
  #{$theme-tokens} {
    @include theme-forms-buttons-variables;
  }
}

@mixin theme-tables-variables {
  @each $name, $value in $theme-tables {
    --#{$name}: #{$value};
  }
}

@mixin theme-tables-css {
  #{$theme-tokens} {
    @include theme-tables-variables;
  }
}

@mixin theme-accordions-variables {
  @each $name, $value in $theme-accordion {
    --#{$name}: #{$value};
  }
}

@mixin theme-accordions-css {
  #{$theme-tokens} {
    @include theme-accordions-variables;
  }
}

@mixin theme-alert-variables {
  @each $name, $value in $theme-alert {
    --#{$name}: #{$value};
  }
}

@mixin theme-alert-css {
  #{$theme-tokens} {
    @include theme-alert-variables;
  }
}

@mixin theme-badge-variables {
  @each $name, $value in $theme-badge {
    --#{$name}: #{$value};
  }
}

@mixin theme-badge-css {
  #{$theme-tokens} {
    @include theme-badge-variables;
  }
}

@mixin theme-border-variables {
  @each $name, $value in $theme-border {
    --#{$name}: #{$value};
  }
}

@mixin theme-border-css {
  #{$theme-tokens} {
    @include theme-border-variables;
  }
}

@mixin theme-button-variables {
  @each $name, $value in $theme-button {
    --#{$name}: #{$value};
  }
}

@mixin theme-button-css {
  #{$theme-tokens} {
    @include theme-button-variables;
  }
}

@mixin theme-card-variables {
  @each $name, $value in $theme-card {
    --#{$name}: #{$value};
  }
}

@mixin theme-card-css {
  #{$theme-tokens} {
    @include theme-card-variables;
  }
}

@mixin theme-dialog-variables {
  @each $name, $value in $theme-dialog {
    --#{$name}: #{$value};
  }
}

@mixin theme-dialog-css {
  #{$theme-tokens} {
    @include theme-dialog-variables;
  }
}

@mixin theme-dropdown-variables {
  @each $name, $value in $theme-dropdown {
    --#{$name}: #{$value};
  }
}

@mixin theme-dropdown-css {
  #{$theme-tokens} {
    @include theme-dropdown-variables;
  }
}

@mixin theme-list-group-variables {
  @each $name, $value in $theme-list-group {
    --#{$name}: #{$value};
  }
}

@mixin theme-list-group-css {
  #{$theme-tokens} {
    @include theme-list-group-variables;
  }
}

@mixin theme-popover-variables {
  @each $name, $value in $theme-popover {
    --#{$name}: #{$value};
  }
}

@mixin theme-popover-css {
  #{$theme-tokens} {
    @include theme-popover-variables;
  }
}

@mixin all-theme-variables {
  @include theme-typography-variables;
  @include theme-forms-buttons-variables;
  @include theme-tables-variables;
  @include theme-accordions-variables;
  @include theme-alert-variables;
  @include theme-badge-variables;
  @include theme-border-variables;
  @include theme-dialog-variables;
  @include theme-dropdown-variables;
  @include theme-card-variables;
  @include theme-list-group-variables;
  @include theme-popover-variables;
}


@mixin all-theme-variables-css {
  #{$theme-tokens} {
    @include all-theme-variables;
  }
}

// Use if surface.scss module not included.
@mixin all-theme-surface-variables {
  @include theme-surface-variables;
  @include all-theme-variables;
}

@mixin all-theme-surface-variables-css {
  #{$theme-tokens} {
    @include all-theme-surface-variables;
  }
}