Best way to customize all the Headlines sizes and colors in Doks.

[cnichte]

Hi, whats the best way to customize all the Headlines sizes and colors in Doks - taking into account the dark and light mode.

best regards

[h-enk]

In /assets/scss/common/_variables-custom.scss override the relevant variables:

• /assets/scss/common/_variables-overrides.scss
• /node_modules/bootstrap/scss/_variables.scss
• /node_modules/bootstrap/scss/_variables-dark.scss

See also Styles

For example, update the heading sizes (make sure to omit !default):

// From — see https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss#L633-L638
/*
$h1-font-size:                $font-size-base * 2.5 !default;
$h2-font-size:                $font-size-base * 2 !default;
$h3-font-size:                $font-size-base * 1.75 !default;
$h4-font-size:                $font-size-base * 1.5 !default;
$h5-font-size:                $font-size-base * 1.25 !default;
$h6-font-size:                $font-size-base !default;
*/

To:
$font-size-base:              1rem; // Assumes the browser default, typically `16px`

$h1-font-size:                $font-size-base * 2.75;
$h2-font-size:                $font-size-base * 2.25;
$h3-font-size:                $font-size-base * 2;
$h4-font-size:                $font-size-base * 1.75;
$h5-font-size:                $font-size-base * 1.5;
$h6-font-size:                $font-size-base * 1.25;