Color schemes

The default color-scheme variables provide the text, links and background colors on this site with the surface colors below being used in buttons, forms and tables with background and/or border color attributes.

Surface colors (anchor)

The surface color variables are also used for any enabled component or utility styles that include background and border color properties included with the attributes.

--surf-1

--surf-2

--surf-3

--surf-4

The color-schemes use the CSS color-mix() function to create the theme colors based on a single color value, so when the base --theme is changed all the other colors change with it to keep the styles that use them consistently themed.

: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);
  }
}

The --theme-brand color is used on the Themalize logo and can be used for any other branded styles such as form accent colors. For more information about the color-mix() function see customizing further below.

Theme color variables (anchor)

By default the property values for the theme colors are compiled directly into the color-schemes as demonstrated above. With $enable-theme-color: true; in the configuration.scss document the property values are instead compiled as an extra palette of color variables that each color-scheme uses to apply the themes.

Theme color variables and color-schemes

When enabled the variables are also then made available for any of the utilities and components with extra theme color options.

: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.

By default Themalize uses simple named colors for the base theme and brand but other color values (e.g. HEX, HSL, etc.) can be used with the CSS color-mix() function and the in srgb interpolation method can also be changed to a different technique. See the MDN docs color-mix page for more information.

Theme color 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 colors (anchor)

New colors can be included with the properties above but need to added to the color-scheme Sass maps in the _maps.scss document for compiling. To accomodate the options for theme color variables described 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.

Theme color 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;