Color schemes

The color-scheme variables provide the text, links and background colors on this site with the surface colors being used in styles, components and utilities with background and/or border color attributes.

Default colors (anchor)

The text, background and surface colors are created using a base theme color variable with color-mix() values to create consistently themed color-schemes that can be customized with a single value. Most CSS color values can be used with color-mix(), see the MDN docs color-mix page for more information.

The --theme-brand color is used on the Themalize logo and can be used for elements such as form accent colors or any other custom CSS requiring brand styling.

--surf-1
--surf-2
--surf-3
--surf-4
:where(html) {
  --theme: slategray;
  --theme-brand: cadetblue;
}

:where(html) {
  color-scheme: light;
  --text: color-mix(in srgb, var(--theme) 10%, black);
  --link: #1c3db5;
  --link-hover: color-mix(in srgb, var(--link) 60%, white);
  --link-visited: color-mix(in srgb, var(--link) 70%, white);
  --body-bg: color-mix(in srgb, var(--theme) 8%, white);
  --surf-1: color-mix(in srgb, var(--theme) 21%, white);
  --surf-2: color-mix(in srgb, var(--theme) 29%, white);
  --surf-3: color-mix(in srgb, var(--theme) 43%, white);
  --surf-4: color-mix(in srgb, var(--theme) 60%, white);
  --brand: color-mix(in srgb, var(--theme-brand) 90%, black);
}

@media (prefers-color-scheme: dark) {
  :where(html) {
    color-scheme: dark;
    --text: color-mix(in srgb, var(--theme) 10%, white);
    --link: #9fbfdf;
    --link-hover: color-mix(in srgb, var(--link) 75%, white);
    --link-visited: color-mix(in srgb, var(--link) 65%, white);
    --body-bg: color-mix(in srgb, var(--theme) 25%, black);
    --surf-1: color-mix(in srgb, var(--theme) 33%, black);
    --surf-2: color-mix(in srgb, var(--theme) 40%, black);
    --surf-3: color-mix(in srgb, var(--theme) 50%, black);
    --surf-4: color-mix(in srgb, var(--theme) 65%, black);
    --brand: color-mix(in srgb, var(--theme-brand) 90%, white);
  }
}

Theme color variables (anchor)

With $enable-theme-color: true; in the configuration.scss document the property values are compiled as an extra palette of color variables that each color-scheme uses to apply the themes. These are then also made available for any enabled extensions with extra theme color options.

Theme color variables and color-schemes
:where(html) {
  --theme: slategray;
  --theme-brand: cadetblue;
  --text-light: color-mix(in srgb, var(--theme) 10%, black);
  --link-light: #1c3db5;
  --link-hover-light: color-mix(in srgb, var(--link) 60%, white);
  --link-visited-light: color-mix(in srgb, var(--link) 70%, white);
  --body-bg-light: color-mix(in srgb, var(--theme) 8%, white);
  --surf-1-light: color-mix(in srgb, var(--theme) 21%, white);
  --surf-2-light: color-mix(in srgb, var(--theme) 29%, white);
  --surf-3-light: color-mix(in srgb, var(--theme) 43%, white);
  --surf-4-light: color-mix(in srgb, var(--theme) 60%, white);
  --brand-light: color-mix(in srgb, var(--theme-brand) 90%, black);
  --text-dark: color-mix(in srgb, var(--theme) 10%, white);
  --link-dark: #9fbfdf;
  --link-hover-dark: color-mix(in srgb, var(--link) 75%, white);
  --link-visited-dark: color-mix(in srgb, var(--link) 65%, white);
  --body-bg-dark: color-mix(in srgb, var(--theme) 25%, black);
  --surf-1-dark: color-mix(in srgb, var(--theme) 33%, black);
  --surf-2-dark: color-mix(in srgb, var(--theme) 40%, black);
  --surf-3-dark: color-mix(in srgb, var(--theme) 50%, black);
  --surf-4-dark: color-mix(in srgb, var(--theme) 65%, black);
  --brand-dark: color-mix(in srgb, var(--theme-brand) 90%, white);
}

:where(html) {
  color-scheme: light;
  --text: var(--text-light);
  --link: var(--link-light);
  --link-hover: var(--link-hover-light);
  --link-visited: var(--link-visited-light);
  --body-bg: var(--body-bg-light);
  --surf-1: var(--surf-1-light);
  --surf-2: var(--surf-2-light);
  --surf-3: var(--surf-3-light);
  --surf-4: var(--surf-4-light);
  --brand: var(--brand-light);
}

@media (prefers-color-scheme: dark) {
  :where(html) {
    color-scheme: dark;
    --text: var(--text-dark);
    --link: var(--link-dark);
    --link-hover: var(--link-hover-dark);
    --link-visited: var(--link-visited-dark);
    --body-bg: var(--body-bg-dark);
    --surf-1: var(--surf-1-dark);
    --surf-2: var(--surf-2-dark);
    --surf-3: var(--surf-3-dark);
    --surf-4: var(--surf-4-dark);
    --brand: var(--brand-dark);
  }
}
--surf-1-light
--surf-2-light
--surf-3-light
--surf-4-light
--surf-1-dark
--surf-2-dark
--surf-3-dark
--surf-4-dark

Customizing (anchor)

The color-schemes property values can be customized in the properties.scss document or via overrides in a custom setup as demonstrated on the setup and configuration page.

Properties
// Theme and brand base colors
$theme:               slategray !default;
$theme-brand:         cadetblue !default;

// Light color-scheme
$text-light:          color-mix(in srgb, var(--theme) 10%, black) !default;  
$link-light:          #1c3db5 !default;
$link-hover-light:    color-mix(in srgb, var(--link) 60%, white) !default;
$link-visited-light:  color-mix(in srgb, var(--link) 70%, white) !default;
$brand-light:         color-mix(in srgb, var(--theme-brand) 90%, black) !default; 
$body-bg-light:       color-mix(in srgb, var(--theme) 8%, white) !default;
$surf-1-light:        color-mix(in srgb, var(--theme) 21%, white) !default;
$surf-2-light:        color-mix(in srgb, var(--theme) 29%, white) !default;
$surf-3-light:        color-mix(in srgb, var(--theme) 43%, white) !default;
$surf-4-light:        color-mix(in srgb, var(--theme) 60%, white) !default;

// Dark color-scheme
$text-dark:           color-mix(in srgb, var(--theme) 10%, white) !default;
$link-dark:           #9fbfdf !default;
$link-hover-dark:     color-mix(in srgb, var(--link) 75%, white) !default;
$link-visited-dark:   color-mix(in srgb, var(--link) 65%, white) !default;
$body-bg-dark:        color-mix(in srgb, var(--theme) 25%, black) !default;
$brand-dark:          color-mix(in srgb, var(--theme-brand) 90%, white) !default; 
$surf-1-dark:         color-mix(in srgb, var(--theme) 33%, black) !default;
$surf-2-dark:         color-mix(in srgb, var(--theme) 40%, black) !default;
$surf-3-dark:         color-mix(in srgb, var(--theme) 50%, black) !default;
$surf-4-dark:         color-mix(in srgb, var(--theme) 65%, black) !default;

Adding new theme variables (anchor)

New variables included with the properties also need to added to the color-scheme Sass maps in the _maps.scss document for compiling. To accomodate the options above and optional manual theme switch method, three Sass maps are provided for each color-scheme but only one is used when compiling depending on the configuration.

Sass maps
$theme-colors: (
  "theme": #{$theme},
  "theme-brand": #{$theme-brand},
) !default;

$light-scheme-colors: (
  "text-light": #{$text-light},
  "link-light": #{$link-light},
  "link-hover-light": #{$link-hover-light},
  "link-visited-light": #{$link-visited-light},
  "body-bg-light": #{$body-bg-light},
  "surf-1-light": #{$surf-1-light},
  "surf-2-light": #{$surf-2-light},
  "surf-3-light": #{$surf-3-light},
  "surf-4-light": #{$surf-4-light},
  "brand-light": #{$brand-light},
) !default;

$light-scheme: (
  "text": var(--text-light),
  "link": var(--link-light),
  "link-hover": var(--link-hover-light),
  "link-visited": var(--link-visited-light),
  "body-bg": var(--body-bg-light),
  "surf-1": var(--surf-1-light),
  "surf-2": var(--surf-2-light),
  "surf-3": var(--surf-3-light),
  "surf-4": var(--surf-4-light),
  "brand": var(--brand-light),
) !default;

$light-scheme-only: (
  "text": #{$text-light},
  "link": #{$link-light},
  "link-hover": #{$link-hover-light},
  "link-visited": #{$link-visited-light},
  "body-bg": #{$body-bg-light},
  "surf-1": #{$surf-1-light},
  "surf-2": #{$surf-2-light},
  "surf-3": #{$surf-3-light},
  "surf-4": #{$surf-4-light},
  "brand": #{$brand-light},
) !default;

$dark-scheme-colors: (
  "text-dark": #{$text-dark},
  "link-dark": #{$link-dark},
  "link-hover-dark": #{$link-hover-dark},
  "link-visited-dark": #{$link-visited-dark},
  "body-bg-dark": #{$body-bg-dark},
  "surf-1-dark": #{$surf-1-dark},
  "surf-2-dark": #{$surf-2-dark},
  "surf-3-dark": #{$surf-3-dark},
  "surf-4-dark": #{$surf-4-dark},
  "brand-dark": #{$brand-dark},
) !default;

$dark-scheme: (
  "text": var(--text-dark),
  "link": var(--link-dark),
  "link-hover": var(--link-hover-dark),
  "link-visited": var(--link-visited-dark),
  "body-bg": var(--body-bg-dark),
  "surf-1": var(--surf-1-dark),
  "surf-2": var(--surf-2-dark),
  "surf-3": var(--surf-3-dark),
  "surf-4": var(--surf-4-dark),
  "brand": var(--brand-dark),
) !default;

$dark-scheme-only: (
  "text": #{$text-dark},
  "link": #{$link-dark},
  "link-hover": #{$link-hover-dark},
  "link-visited": #{$link-visited-dark},
  "body-bg": #{$body-bg-dark},
  "surf-1": #{$surf-1-dark},
  "surf-2": #{$surf-2-dark},
  "surf-3": #{$surf-3-dark},
  "surf-4": #{$surf-4-dark},
  "brand": #{$brand-dark},
) !default;