Theme colors

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

Overview (anchor)

The theme colors module provides custom values for the CSS variables used in the following styles to enable customizing the default colors of the modules included in a global document.

Custom colors are provided for text, links and backgrounds, the rest of the colors use the surface color variables if included or theme surface variables otherwise. Both the theme and surface colors have been compiled with this documentation so the website and the pages demonstrate all the colors as applied.

Using (anchor)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin(s) as demonstrated below.

All theme colors (anchor)

The following compiles all the theme color tokens for the styles, components and utility listed above using the custom surface variable tokens provided with the theme styles.

custom.scss

@use "stylemods/scss" as *;
:where(html) {
  @include all-theme-surface-variables;
}

The following does the same but instead uses the surface color variables included with the color variables.

custom.scss

@use "stylemods/scss" as *;
:where(html) {
  @include surface-variables;
  @include all-theme-variables;
}

By adding the -css postfix to the mixin names both options can also be included already contained within a :where(html) pseudo-class wrapper style as demonstrated above, which if preferred can also be customized to use :root or another wrapper style if preferred (see below).

custom.scss

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

The surface color variables can also be included the same way.

custom.scss

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

Individual theme colors (anchor)

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

custom.scss

@use "stylemods/scss" 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;
}

If including the surface color variables replace the theme-surface tokens with the surface variables

custom.scss

@use "stylemods/scss" as *;
:where(html) {
  @include surface-variables;
  @include theme-typography-variables;
  etc...
}

The different modules can also be included already contained in individual :where(html) pseudo-class wrapper styles that can customized to use :root or another selector (see below).

custom.scss

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

Customizing (anchor)

The following Sass variables are the core values for the theme colors, the source code below demonstrates how these are applied and includes all the variables that can also be customized with overrides.

color/theme.scss

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

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

Overrides need to be loaded prior to StyleMods and can be included with the styles or in a seperate document.

custom.scss

@use 'stylemods/scss' with (
  $background-light: #eee,
  $background-dark: #333,
);
@use "stylemods/scss" as *;
@include all-theme-surface-variables-css;

If required or preferred the default :where(html) pseudo-class style used for pre-wrapped variables can also be customized with overrides to use :root or another selector.

custom.scss

@use 'stylemods/scss' with (
  $theme-tokens: root,
);
@use "stylemods/scss" as *;
@include all-theme-surface-variables-css;

Source code (anchor)

theme.scss

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

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

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

// Theme variables
$theme-surface:         var(--background) !default;

// Theme surfaces
$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;

// Use if surface.scss module not included.
$base-surface-1:        color-mix(in srgb, CanvasText 4%, $theme-surface) !default;
$base-surface-2:        color-mix(in srgb, CanvasText 8%, $theme-surface) !default;
$base-surface-3:        color-mix(in srgb, CanvasText 15%, $theme-surface) !default;
$base-surface-4:        color-mix(in srgb, CanvasText 22%, $theme-surface) !default;

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

// Variables tokens maps
$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-typography-surface: (
  "text": $theme-text,
  "background": $theme-background,
  "link": $theme-link,
  "visited": $theme-link-visited,
  "hover": $theme-link-hover,
  "surf-1": $base-surface-1,
  "surf-2": $base-surface-2,
  "surf-3": $base-surface-3,
  "surf-4": $base-surface-4,
  "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,
  "focus-color": $theme-surface-3,
) !default;

$theme-tables: (
  "table-bg": $theme-surface,
  "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-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-card: (
  "card-bd-color": $theme-surface-3,
  "card-bg": $theme-surface,
  "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,
  "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-typography-variables {
  @each $name, $value in $theme-typography {
    --#{$name}: #{$value};
  }
}

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

// Use if surface.scss module not included.
@mixin theme-typography-surface-variables {
  @each $name, $value in $theme-typography-surface {
    --#{$name}: #{$value};
  }
}

@mixin theme-typography-surface-css {
  :#{$theme-tokens} {
    @include theme-typography-surface-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-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-list-group-variables {
  @each $name, $value in $theme-list-group {
    --#{$name}: #{$value};
  }
}

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

@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-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-typography-surface-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-card-variables;
  @include theme-list-group-variables;
  @include theme-popover-variables;
}

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