Styles

You can style your Doks site with custom CSS files or use the Hyas Bootstrap plugin.

Custom CSS#

Customize the styles applied to your Doks site by providing additional CSS files to modify or extend Doks’ default styles.

Custom variables#

Add custom CSS or SCSS variables to assets/scss/common/_variables-custom.scss. For example, you could set a text size variable:

:root {
  --doks-text-lg: 1.5rem;
}

Custom styles#

Add custom SCSS or CSS to assets/scss/common/_custom.scss. For example, you could add a larger text size for page titles:

h1 {
  font-size: calc(var(--doks-text-lg) + 1.5vw);
}

Bootstrap#

Color theme#

Doks’ color theme can be controlled by overriding its default custom properties. These variables are used throughout the UI with a range of gray shades used for text and background colors and an accent color used for links and to highlight current items in navigation.

In assets/scss/common/_variables-custom.scss — for example:

// Put your custom SCSS variables here

// Light mode
$primary: blue;

// Dark mode
$link-color-dark: aquamarine;
$button-color-dark: aquamarine;

:root,
::backdrop {
  --sl-color-accent-high: aquamarine;
}