DrylColorModeToggle
DRYL renders in two color modes — dark and light — driven entirely by the token system. Out of the box it follows the operating-system preference; users and apps can force a mode, and an explicit choice is remembered. Try the toggle in the top bar right now.
How it works
Components never branch on the mode — they consume tokens, and the mode swaps the token
values underneath them. With no setup at all, prefers-color-scheme decides;
forcing a mode sets data-dryl-mode on the document root. Because the neutral
tokens are registered properties, a mode switch glides exactly like an accent
theme change.
The toggle cycles System → Light → Dark. An explicit choice is persisted and restored before first paint on the next visit; System clears it and follows the OS.
1 · Default — follow the system
Nothing to configure: without a provider (or with DrylColorMode.System),
the mode tracks the OS preference live — pure CSS, no flash of the wrong mode. To start
an app in a fixed mode, pass Mode to the provider you already mount for
theming:
@* MainLayout.razor — same provider that applies your theme *@
<DrylThemeProvider Theme="DrylThemes.Nebula" Mode="DrylColorMode.System" />
@* Pin an app to one mode regardless of the OS: *@
<DrylThemeProvider Mode="DrylColorMode.Dark" />2 · Switch at runtime
Inject IDrylThemeService and call SetModeAsync — or just drop
DrylColorModeToggle into your app bar, which does exactly that. Explicit
choices are stored in localStorage (dryl-color-mode) and
restored before first paint.
@inject IDrylThemeService Theme
@* Ready-made: cycles System → Light → Dark, persists the choice *@
<DrylColorModeToggle />
@* Or wire your own UI *@
<DrylButton OnClick="@(() => Theme.SetModeAsync(DrylColorMode.Light))">Light</DrylButton>
<DrylButton OnClick="@(() => Theme.SetModeAsync(DrylColorMode.System))">Follow system</DrylButton>Modes ↔ themes
Color mode and accent theming are orthogonal: a DrylTheme carries hue seeds
that read correctly in both modes, while the mode swaps the neutral scale — ground, glass,
text, lines, shadows — plus mode-tuned semantic and chart palettes. Pick any preset on the
Theming page and flip the mode: the accents stay yours,
the surfaces adapt.