Color schemes

Light and dark mode color-scheme variables provide the default text, links and background colors, a palette of themed surface colors, and a theme brand color as used on the Themalize icon logo.

Theme color variables (anchor)

The color-schemes use light-dark() color values with the color-scheme: light dark; property included with the typography styles, and the script if using the optional theme-switch. The background and surface colors use color-mix() values with a base theme color to create consistent themes that can be customized using a single variable.

--surf-1

--surf-2

--surf-3

--surf-4

The default color-schemes are compiled as follows:

:where(html) {
  --theme: slategray;
  --brand: light-dark(#558e90, #6fa8aa);
  --text: light-dark(#000, #fff);
  --link: light-dark(#1c3db5, #9fbfdf);
  --link-hover: color-mix(in srgb, var(--link) 75%, white);
  --link-visited: color-mix(in srgb, var(--link) 65%, white);
  --body-bg: light-dark(color-mix(in srgb, var(--theme) 6%, white), color-mix(in srgb, var(--theme) 27%, black));
  --surf-1: light-dark(color-mix(in srgb, var(--theme) 21%, white), color-mix(in srgb, var(--theme) 33%, black));
  --surf-2: light-dark(color-mix(in srgb, var(--theme) 29%, white), color-mix(in srgb, var(--theme) 40%, black));
  --surf-3: light-dark(color-mix(in srgb, var(--theme) 43%, white), color-mix(in srgb, var(--theme) 50%, black));
  --surf-4: light-dark(color-mix(in srgb, var(--theme) 60%, white), color-mix(in srgb, var(--theme) 65%, black));
}

Light and dark color variables (anchor)

With $enable-theme-color: true; in the configuration.scss document the light and dark 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 light and dark options and as a defacto grayscale for custom CSS.

--surf-1-light

--surf-2-light

--surf-3-light

--surf-4-light

--surf-1-dark

--surf-2-dark

--surf-3-dark

--surf-4-dark

The color-schemes with $enable-theme-color: true; are compiled as follows:

:where(html) {
  --theme: slategray;
  --brand: light-dark(#558e90, #6fa8aa);
  --text: light-dark(#000, #fff);
  --link: light-dark(#1c3db5, #9fbfdf);
  --link-hover: color-mix(in srgb, var(--link) 75%, white);
  --link-visited: color-mix(in srgb, var(--link) 65%, white);
  --body-bg: light-dark(var(--body-bg-light), var(--body-bg-dark));
  --surf-1: light-dark(var(--surf-1-light), var(--surf-1-dark));
  --surf-2: light-dark(var(--surf-2-light), var(--surf-2-dark));
  --surf-3: light-dark(var(--surf-3-light), var(--surf-3-dark));
  --surf-4: light-dark(var(--surf-4-light), var(--surf-4-dark));
  --body-bg-light: color-mix(in srgb, var(--theme) 6%, white);
  --body-bg-dark: color-mix(in srgb, var(--theme) 27%, black);
  --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);
  --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);
}

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 base
$theme:               slategray !default;

// Text, links and brand
$text-light:          #000 !default;
$text-dark:           #fff !default;
$link-light:          #1c3db5 !default;
$link-dark:           #9fbfdf !default;
$brand-light:         #558e90 !default;
$brand-dark:          #6fa8aa !default;

// Light surfaces
$body-bg-light:       color-mix(in srgb, var(--theme) 6%, 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 surfaces
$body-bg-dark:        color-mix(in srgb, var(--theme) 27%, black) !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.

Sass maps

With $enable-theme-color: false; the $color-schemes map is compiled, but with $enable-theme-color: true; the other two maps will be used instead.

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

$color-schemes-variables: (
  "theme": #{$theme},
  "brand": #{$brand},
  "text": #{$text},
  "link": #{$link},
  "link-hover": #{$link-hover},
  "link-visited": #{$link-visited},
  "body-bg": #{$body-bg},
  "surf-1": #{$surf-1},
  "surf-2": #{$surf-2},
  "surf-3": #{$surf-3},
  "surf-4": #{$surf-4},
) !default;

$theme-colors: (
  "body-bg-light": #{$body-bg-light},
  "body-bg-dark": #{$body-bg-dark},
  "surf-1-light": #{$surf-1-light},
  "surf-2-light": #{$surf-2-light},
  "surf-3-light": #{$surf-3-light},
  "surf-4-light": #{$surf-4-light},
  "surf-1-dark": #{$surf-1-dark},
  "surf-2-dark": #{$surf-2-dark},
  "surf-3-dark": #{$surf-3-dark},
  "surf-4-dark": #{$surf-4-dark},
) !default;