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);


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;

::backdrop {
  --sl-color-accent-high: aquamarine;