Dark mode

New

Overview

Theme controls for light, dark, and system preferences.

HEEx

<DarkMode.dark_mode_toggle id="example-dark-mode-toggle" />

Select

HEEx

<DarkMode.dark_mode_select id="example-dark-mode-select" label="Example color theme" />

Add this module

terminal

mix dizzy.add dark_mode

Component API

DarkMode.dark_mode_toggle

Attributes

Attributes for DarkMode.dark_mode_toggle
Name	Type	Default	Values
`class`	`:any`	nil	—
`id`	`:string`	Required	—
`label`	`:string`	"Dark mode"	—

DarkMode.dark_mode_select

Attributes

Attributes for DarkMode.dark_mode_select
Name	Type	Default	Values
`class`	`:any`	nil	—
`id`	`:string`	Required	—
`label`	`:string`	"Color theme"	—

JavaScript hook

DizzyDarkMode

Shared by dark_mode_toggle and dark_mode_select. Reads the OS color preference, remembers explicit choices, follows OS changes, and synchronizes controls and browser tabs. Theme changes happen entirely in the browser.

mix dizzy.add includes the hook and performs any required asset setup automatically.