Overview

qwik-docs includes a complete theming system with dark, light, and auto modes. The system is built on CSS custom properties (design tokens) and managed by the ThemeProvider and ThemeSelect components.

Theme Modes

Mode	Behavior
Light	Forces light color scheme
Dark	Forces dark color scheme
Auto	Follows the OS/browser `prefers-color-scheme` setting

Try switching — use the theme toggle in the top-right corner.

Design Tokens

All visual properties are defined as CSS custom properties in design-tokens/props.css. Key categories:

Colors

Token	Purpose
`--sl-color-bg`	Page background
`--sl-color-bg-nav`	Header background
`--sl-color-bg-sidebar`	Sidebar background
`--sl-color-text`	Primary text color
`--sl-color-text-accent`	Accent/link color
`--sl-color-hairline`	Border/divider color
`--sl-color-gray-*`	Gray scale (1-7)
`--sl-color-accent-*`	Accent color scale

Typography

Token	Purpose
`--sl-font`	Body font family
`--sl-font-mono`	Monospace font family
`--sl-text-*`	Font size scale
`--sl-line-height`	Default line height

Spacing

Token	Purpose
`--sl-content-width`	Max content width
`--sl-sidebar-width`	Sidebar width
`--sl-content-pad-x`	Horizontal content padding

CSS Layers

Styles are organized into CSS @layer declarations for specificity management:

@layer reset, tokens, base, components, utilities;

This ensures design tokens can be overridden predictably.

Theme-Aware Classes

Components use special classes to show/hide elements per theme:

Class	Behavior
`.light:sl-hidden`	Hidden in light mode
`.dark:sl-hidden`	Hidden in dark mode

This is used by SiteTitle for theme-specific logos.

Customization

Override any design token in your global.css:

:root {
  --sl-color-accent-high: #e040fb;
  --sl-font: 'Inter', system-ui, sans-serif;
  --sl-content-width: 75ch;
}

Component Architecture

ThemeProvider (renders icon templates)
    ↓
ThemeSelect (dropdown UI)
    ↓ onChange
Updates <html data-theme="...">
    ↓
CSS responds via [data-theme] selectors