Theming

kewt has a few colour palettes built-in. Set the style option in site.conf to a theme name to apply it.

Built-in Themes

Theme	`style` value	Dark/Light
Kewt (default)	`kewt`	Light
Kewt Light	`kewt-light`	Light
Nord	`nord`	Dark
Nord Light	`nord-light`	Light
Monokai	`mono`	Dark
Monokai Light	`mono-light`	Light
One Dark	`onedark`	Dark
One Light	`onelight`	Light
Rose Pine	`rosepine`	Dark
Rose Pine Light	`rosepine-light`	Light
Solarized	`solarized`	Light
Solarized Dark	`solarized-dark`	Dark

style = "kewt-light"

How It Works

Each theme is a .root.css file containing a :root block with CSS custom properties. At build time, kewt merges the theme's variables with the base kewt.css stylesheet. The base :root block is stripped out and replaced with the theme's variables.

Style Resolution

kewt resolves styles in this priority order (highest wins):

site/styles.css - a full custom stylesheet in your site directory. Overrides everything.
site/styles.root.css - custom :root variables merged with the built-in kewt.css base.
built-in <style>.css - a full stylesheet matching the style config value.
built-in <style>.root.css - :root variables merged with kewt.css.

If none of these exist, the unmodified kewt.css is used

Custom Themes

To create a custom colour theme, place a styles.root.css file in your site directory. The file should contain only a :root block with the CSS variables you want to override:

:root {
    --bg: #1a1b26;
    --fg: #c0caf5;
    --fg-link: #7aa2f7;
    --fg-heading: #c0caf5;
    --code-bg: #24283b;
}

Any variables not overridden will fall back to the defaults in kewt.css. The :root block in the base stylesheet is automatically removed to prevent conflicts.

Per-Directory Styles

Subdirectories can have their own styles.css or styles.root.css that apply only to pages in that directory. Per-directory styles follow the same priority.

2.1 KiB Raw Permalink Blame History