Theme colors

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

Overview

By default the majority of SassMods styles are written using values inherited by fallbacks for empty CSS variables, and as shown below where colors are included system color values have been used.

$text-color:        var(--text, CanvasText) !default;
$background-color:  var(--background, Canvas) !default;

The theme colors provide values for the empty CSS variables to override the system fallback colors, the variables have been compiled with the docs styles and are on display throughout this website applied to the following modules:

The variables below include the values for all the modules above, each can also be included individually if required, the colors are all author's preference but can customized as required (see below).

Theme variables

:where(html) {
  --surface: light-dark(#eaecee, #1f2428);
  --text: light-dark(#000, #fff);
  --background: light-dark(#eaecee, #1f2428);
  --link: light-dark(#1c3db5, #9fbfdf);
  --visited: light-dark(#4f6fe3, #b3cce6);
  --hover: light-dark(#4f6fe3, #b3cce6);
  --kbd-bg: var(--surf-2);
  --pre-bd-color: var(--surf-3);
  --pre-bg: var(--surf-1);
  --blockquote-bd-color: var(--surf-3);
  --btn-bd-color: var(--surf-3);
  --btn-bg: var(--surf-1);
  --btn-hover: var(--surf-2);
  --form-bd-color: var(--surf-3);
  --form-bg: var(--background);
  --form-accent: light-dark(#1c3db5, #9fbfdf);
  --thead-bg: var(--surf-1);
  --table-bd-color: var(--surf-3);
  --table-stripes: color-mix(in srgb, var(--surf-1) 30%, var(--background));
  --table-hover: color-mix(in srgb, var(--surf-1) 50%, var(--background));
  --summary-bg: var(--surf-1);
  --summary-focus: var(--surf-2);
  --accordion-bd-color: var(--surf-3);
  --alert-bg: var(--surf-1);
  --alert-bd-color: var(--surf-2);
  --badge-bg: var(--surf-1);
  --badge-bd-color: var(--surf-3);
  --bd-color: var(--surf-3);
  --dialog-bg: var(--surf-1);
  --dialog-bd-color: var(--surf-3);
  --card-bd-color: var(--surf-3);
  --card-hover: var(--surf-1);
  --card-focus-color: var(--surf-4);
  --list-group-dt-bg: var(--surf-2);
  --list-group-hover: var(--surf-1);
  --list-group-bd-color: var(--surf-3);
  --popover-bg: var(--surf-1);
  --popover-bd-color: var(--surf-3);
}

The surface colors can be adapted using the --surface variable above or as described on the customizing page. This is optional but enables continuing to use the surface palette for theming as designed.

Using

Each set of variables can be included individually in custom SCSS using a Sass @mixin as demonstrated below:

@use "sassmods/scss/sassmods" as *;
:where(html) {
  @include theme-surface-variables;
  @include theme-typography-variables;
  @include theme-forms-buttons-variables;
  @include theme-tables-variables;
  @include theme-accordion-variables;
  @include theme-alert-variables;
  @include theme-badge-variables;
  @include theme-border-variables;
  @include theme-dialog-variables;
  @include theme-card-variables;
  @include theme-list-group-variables;
  @include theme-popover-variables;
}

All variables can be included in a single mixin:

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

Alternatively if customizing the default surface color with overrides all the variables can be included without the theme-surface-variables mixin:

@use "sassmods/scss/sassmods" as *;
@include theme-variables-css;

You could also include the variables directly with the module utility:

@use "sassmods/scss/sassmods" as *;
.accordion {
  @include theme-accordion-variables;
}

Customizing

The variables can be customized with overrides as described on the customizing page.

$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(#4f6fe3, #b3cce6) !default;
$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-surface-tint-1:  color-mix(in srgb, var(--surf-1) 30%, var(--background)) !default;
$theme-surface-tint-2:  color-mix(in srgb, var(--surf-1) 50%, var(--background)) !default;

Source

_theme-colors.scss

// ---------------------------------------------------------- 
// 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(#4f6fe3, #b3cce6) !default;

$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-surface-tint-1:  color-mix(in srgb, var(--surf-1) 30%, var(--background)) !default;
$theme-surface-tint-2:  color-mix(in srgb, var(--surf-1) 50%, var(--background)) !default;

$theme-surface-colors: (
  "surface": $theme-surface,
) !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-3,
  "btn-bg": $theme-surface-1,
  "btn-hover": $theme-surface-2,
  "form-bd-color": $theme-surface-3,
  "form-bg": $theme-surface,
  "form-accent": $theme-link,
) !default;

$theme-tables: (
  "thead-bg": $theme-surface-1,
  "table-bd-color": $theme-surface-3,
  "table-stripes": $theme-surface-tint-1,
  "table-hover": $theme-surface-tint-2,
) !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-2,
) !default;

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

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

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

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

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

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

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

@mixin theme-surface-css {
  :where(html) {
    @include theme-surface-variables;
  }
}

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

@mixin theme-typography-css {
  :where(html) {
    @include theme-typography-variables;
  }
}

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

@mixin theme-forms-buttons-css {
  :where(html) {
    @include theme-forms-buttons-variables;
  }
}

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

@mixin theme-tables-css {
  :where(html) {
    @include theme-tables-variables;
  }
}

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

@mixin theme-accordions-css {
  :where(html) {
    @include theme-accordions-variables;
  }
}

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

@mixin theme-alert-css {
  :where(html) {
    @include theme-alert-variables;
  }
}

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

@mixin theme-badge-css {
  :where(html) {
    @include theme-badge-variables;
  }
}

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

@mixin theme-border-css {
  :where(html) {
    @include theme-border-variables;
  }
}

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

@mixin theme-card-css {
  :where(html) {
    @include theme-card-variables;
  }
}

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

@mixin theme-dialog-css {
  :where(html) {
    @include theme-dialog-variables;
  }
}

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

@mixin theme-list-group-css {
  :where(html) {
    @include theme-dialog-list-group;
  }
}

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

@mixin theme-popover-css {
  :where(html) {
    @include theme-popover-variables;
  }
}

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

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

@mixin theme-variables-surface-css {
  :where(html) {
    @include theme-surface-variables;
    @include theme-variables;
  }
}