Theme colors

Overview (anchor)

The default colors in all the following styles apply common color values designed to ensure that when used together all colored components appear consistently themed across light and dark mode color-schemes.

• Surface colors
• Typography
• Forms & buttons
• Tables
• Accordions
• Alerts
• Badges
• Borders
• Buttons
• Dialogs
• Cards
• List groups
• Popovers

The colors can be customized to suit project parameters either globally using a single value (new) or using individual values for fine-tuning specific color properties.

How it works (anchor)

The styles are all designed for light-dark() color values and as demonstrated below with the alerts colors are written using fallback values that provide two variable tokens for customizing the default color values.

/* Alert background and border colors */
var(--alert-bg, color-mix(in srgb, CanvasText 4%, var(--background, Canvas)))
var(--alert-bd-color, color-mix(in srgb, CanvasText 13%, var(--background, Canvas)))

This enables customizing the default colors globally using a single variable value (new in v1.4.0), and/or fine-tuning individual color values using the unique tokens with higher specificity:

:where(html) {
  --background: light-dark(#eaecee, #1f2428);
  --alert-bd-color: color-mix(in srgb, CanvasText 20%, var(--background));
}

If included the surface colors* will also be adapted to use the --background variable value which then enables using the surface variables palette to customize the unique tokens:

:where(html) {
  --background: light-dark(#eaecee, #1f2428);
  --alert-bg: var(--surf-1);
  --alert-bd-color: var(--surf-3);
}

*The surface colors will default to the --background value if present but can still be customized separately if preferred.

Color-scheme integration (anchor)

Included with the typography styles the following demonstrates how the color-schemes are applied and how the default colors in all the styles are designed to integrate with the page background colors.

:where(html) {
  color-scheme: light dark;
  color: var(--text, CanvasText);
  background-color: var(--background, Canvas);
}

If you're not using the typography styles this is also now provided as an option to include with the theme colors below, but the theme colors will still work without this so can also be designed in contrast to the page backgrounds.

Variables (anchor)

The theme colors have two basic options that both adapt the default colors of all styles included globally as described above. The colors can be customized when compiling and included using :root or another selector if preferred.

Option 1. Background variable only (as used on this website).

:where(html) {
  --background: light-dark(#eaecee, #1f2428);
}

Option 2. Resets text, background and link color values from the typography styles (required).

:where(html) {
  --text: light-dark(#000, #fff);
  --background: light-dark(#eaecee, #1f2428);
  --link: light-dark(#1c3db5, #9fbfdf);
  --visited: light-dark(#4f6fe3, #b3cce6);
  --hover: light-dark(#385de0, #c6d8ec);
}

The Sass map for the second option can also be used to include custom variables, but as both options demonstrate including variables manually is straight forward and for customizing provides more finite control than compiling them via the system.

Using the module (anchor)

See the links above to view how to enable the individual style modules.

Option 1 as described above.

@use "stylemods/scss" as *;
:where(html) {
  @include theme-background-color;
}
/* modules */

Option 2 as described above (requires typography).

@use "stylemods/scss" as *;
:where(html) {
  @include theme-reset-colors;
}
@include typography-css;
/* other modules */

Color-scheme integration as described above.

@use "stylemods/scss" as *;
:where(html) {
  @include theme-background-color;
  @include theme-color-scheme;
}
/* modules */

Using the framework (anchor)

Using the recommended custom framework setup enable the styles in an overrides document. See the links above to view how to enable the individual style modules.

Option 1 as described above.

@use "stylemods/scss/configuration" as *;
$enable-theme-background-color:   true;

Option 2 as described above (requires typography).

@use "stylemods/scss/configuration" as *;
$enable-theme-reset-colors:   true;
$enable-typography:           true;

Color-scheme integration as described above (not required if typography enabled).

@use "stylemods/scss/configuration" as *;
$enable-theme-background-color:   true;
$enable-theme-color-scheme:       true;

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

@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 colors
// ----------------------------------------------------------
$theme-text:                  light-dark(#000, #fff) !default;
$theme-background:            light-dark(#eaecee, #1f2428) !default;
$theme-link:                  light-dark(#1c3db5, #9fbfdf) !default;
$theme-link-visited:          light-dark(#4f6fe3, #b3cce6) !default;
$theme-link-hover:            light-dark(#385de0, #c6d8ec) !default;

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

$theme-colors: (
  "text": $theme-text,
  "background": $theme-background,
  "link": $theme-link,
  "visited": $theme-link-visited,
  "hover": $theme-link-hover,
) !default;

@mixin theme-background-color {
  --background: #{$theme-background};
}

@mixin theme-reset-colors {
  @each $name, $value in $theme-colors {
    --#{$name}: #{$value};
  }
}

@mixin theme-reset-colors-css {
  #{$theme-tokens} {
    @include theme-color-variables;
  }
}

@mixin theme-color-scheme {
  color-scheme: light dark;
  color: var(--text, CanvasText);
  background-color: var(--background, Canvas);
}

@mixin theme-color-scheme-css {
  :where(html) {
    @include theme-color-scheme;
  }
}