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