Dark Mode

Light values sit on :root. Dark values apply through [data-color-scheme="dark"] and, when the page is not pinned to light, prefers-color-scheme: dark.

Pin a page

Add one Nunjucks variable at the top of the page file:

    
{% set colorScheme = "dark" %}

or "light". The layout writes data-color-scheme on <html>. A pinned attribute always wins over the saved preference and the OS setting.

Runtime toggle

public/assets/js/vendors/color-modes.js looks for .dark-light-switcher and a checkbox inside it (#switch, [data-theme-toggle], or .menu-overlay-1__theme-input).

Persists the choice in localStorage under norio-color-scheme.
Sets data-color-scheme to light or dark on documentElement.
If the page is not pinned and nothing is saved, it follows prefers-color-scheme.

Write mode-safe CSS

Sections never reference a mode. Bind semantic tokens and they flip automatically:

    
.about-2 {
  background-color: var(--color-surface-subtle);
  color: var(--color-text-tertiary);
  border-color: var(--color-border-base);
}

Do not write a dark-only hex in SCSS. If a new color must differ by mode, add both light and dark values in tokens.json.