Primary colors

When $enable-primary-colors is set to true in the configuration.scss document a very basic primary color palette is included as CSS variables and class modifiers in enabled extensions with background and/or border color properties are activated for compiling.

--blue-light

--blue

--blue-dark

--blue-darker

--red-lighter

--red-light

--red

--red-dark

--red-darker

--green-lighter

--green-light

--green

--green-dark

--green-darker

--orange-lighter

--orange-light

--orange

--orange-dark

--orange-darker

--cyan-lighter

--cyan-light

--cyan

--cyan-dark

--cyan-darker

Customizing (anchor)

The property values can be customized with Sass variables in the properties.scss document if recompiling or via overrides in a custom setup, see setup and configuration for more information.

Properties

// Primary colors
$blue:            #264d73 !default;
$blue-light:      color-mix(in srgb, var(--blue) 93%, white) !default;
$blue-lighter:    color-mix(in srgb, var(--blue) 85%, white) !default;
$blue-dark:       color-mix(in srgb, var(--blue) 90%, black) !default;
$blue-darker:     color-mix(in srgb, var(--blue) 80%, black) !default;
$red:             #9a1d1d !default;
$red-light:       color-mix(in srgb, var(--red) 93%, white) !default;
$red-lighter:     color-mix(in srgb, var(--red) 85%, white) !default;
$red-dark:        color-mix(in srgb, var(--red) 90%, black) !default;
$red-darker:      color-mix(in srgb, var(--red) 80%, black) !default;
$green:           #2b6020 !default;
$green-light:     color-mix(in srgb, var(--green) 93%, white) !default;
$green-lighter:   color-mix(in srgb, var(--green) 85%, white) !default;
$green-dark:      color-mix(in srgb, var(--green) 90%, black) !default;
$green-darker:    color-mix(in srgb, var(--green) 80%, black) !default;
$orange:          #ffc14d !default;
$orange-light:    color-mix(in srgb, var(--orange) 85%, white) !default;
$orange-lighter:  color-mix(in srgb, var(--orange) 75%, white) !default;
$orange-dark:     color-mix(in srgb, var(--orange) 90%, black) !default;
$orange-darker:   color-mix(in srgb, var(--orange) 80%, black) !default;
$cyan:            #00e6e6 !default;
$cyan-light:      color-mix(in srgb, var(--cyan) 75%, white) !default;
$cyan-lighter:    color-mix(in srgb, var(--cyan) 60%, white) !default;
$cyan-dark:       color-mix(in srgb, var(--cyan) 90%, black) !default;
$cyan-darker:     color-mix(in srgb, var(--cyan) 80%, black) !default;

The property values are compiled as CSS variables which are then used to apply the styles, these can also be edited directly in the style sheet if required and/or used to customize styles inline.

CSS variables

:where(html) {
  --blue: #264d73;
  --blue-light: color-mix(in srgb, var(--blue) 93%, white);
  --blue-lighter: color-mix(in srgb, var(--blue) 85%, white);
  --blue-dark: color-mix(in srgb, var(--blue) 90%, black);
  --blue-darker: color-mix(in srgb, var(--blue) 80%, black);
  --red: #9a1d1d;
  --red-light: color-mix(in srgb, var(--red) 93%, white);
  --red-lighter: color-mix(in srgb, var(--red) 85%, white);
  --red-dark: color-mix(in srgb, var(--red) 90%, black);
  --red-darker: color-mix(in srgb, var(--red) 80%, black);
  --green: #2b6020;
  --green-light: color-mix(in srgb, var(--green) 93%, white);
  --green-lighter: color-mix(in srgb, var(--green) 85%, white);
  --green-dark: color-mix(in srgb, var(--green) 90%, black);
  --green-darker: color-mix(in srgb, var(--green) 80%, black);
  --orange: #ffc14d;
  --orange-light: color-mix(in srgb, var(--orange) 85%, white);
  --orange-lighter: color-mix(in srgb, var(--orange) 75%, white);
  --orange-dark: color-mix(in srgb, var(--orange) 90%, black);
  --orange-darker: color-mix(in srgb, var(--orange) 80%, black);
  --cyan: #00e6e6;
  --cyan-light: color-mix(in srgb, var(--cyan) 75%, white);
  --cyan-lighter: color-mix(in srgb, var(--cyan) 60%, white);
  --cyan-dark: color-mix(in srgb, var(--cyan) 90%, black);
  --cyan-darker: color-mix(in srgb, var(--cyan) 80%, black);
}

New values can be added to the Sass properties above if required but for compiling must also be included with the primary colors Sass map in the _maps.scss document.

Primary colors map

$primary-colors: (
  "blue": #{$blue},
  "blue-light": #{$blue-light},
  "blue-lighter": #{$blue-lighter},
  "blue-dark": #{$blue-dark},
  "blue-darker": #{$blue-darker},
  "red": #{$red},
  "red-light": #{$red-light},
  "red-lighter": #{$red-lighter},
  "red-dark": #{$red-dark},
  "red-darker": #{$red-darker},
  "green": #{$green},
  "green-light": #{$green-light},
  "green-lighter": #{$green-lighter},
  "green-dark": #{$green-dark},
  "green-darker": #{$green-darker},
  "orange": #{$orange},
  "orange-light": #{$orange-light},
  "orange-lighter": #{$orange-lighter},
  "orange-dark": #{$orange-dark},
  "orange-darker": #{$orange-darker},
  "cyan": #{$cyan},
  "cyan-light": #{$cyan-light},
  "cyan-lighter": #{$cyan-lighter},
  "cyan-dark": #{$cyan-dark},
  "cyan-darker": #{$cyan-darker},
) !default;