Home

Site Layout ColorMode Component

Light/dark mode toggle

Toggles between light and dark color modes. The user's preference is saved to localStorage and persists across sessions. On first visit, respects the operating system's color scheme preference.

[site.layout.header]
end = "color-mode"  # Icon-only (default)

# With text label:
end = { type = "color-mode", style = "both" }

# Text only (no icon):
end = { type = "color-mode", style = "label" }

style

Type: ColorModeStyle (optional)

Display style

Default: icon

ValueDescription
iconSun/moon icon only (default)
label"Light"/"Dark" text label only
bothIcon and label

This documentation was generated from layout/components.rs by generate.rs.

© 2026 Stencila