ColorSchemeSwitch

Usage

<AppHeader>
    <AppBrand Label="Acme" Href="/" />
    <Box Grow />
    <ColorSchemeSwitch />
</AppHeader>

It lets people pick System, Light or Dark for the whole app. Put it in the header, once; the IzzyTheme in the head sets the scheme every page arrives in. Light and dark covers the default scheme and a scheme for part of a page.

Menu, toggle and segmented

Use Variant for the look: Menu (an icon button with System, Light and Dark, the default), Toggle (one button between light and dark) or Segmented (the three side by side, IconOnly for icons alone).

@* The three looks. They share the reader's choice (the ib-scheme cookie), so picking one here
   changes the scheme of this site too. *@
<Row Gap="6" Align="Align.Center" Wrap>
    <Stack Gap="2" Align="Align.Start">
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">Menu</TextBlock>
        <ColorSchemeSwitch />
    </Stack>
    <Stack Gap="2" Align="Align.Start">
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">Toggle</TextBlock>
        <ColorSchemeSwitch Variant="ColorSchemeSwitchVariant.Toggle" />
    </Stack>
    <Stack Gap="2" Align="Align.Start">
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">Segmented</TextBlock>
        <ColorSchemeSwitch Variant="ColorSchemeSwitchVariant.Segmented" />
    </Stack>
</Row>

These three share the reader's choice with the site's own switch, so picking one here changes this site's scheme too. Toggle has no way back to System; use it where following the device isn't needed.

Where the choice is kept

The choice goes in the ib-scheme cookie, which IzzyTheme reads on the server, so every later page arrives in that scheme with no flash. AddIzzyBlazor() lets the server read it, and MapIzzyBlazor() adds the endpoint the options link to with JavaScript off.

builder.Services.AddIzzyBlazor();
// …
app.MapIzzyBlazor();

Following it from C#

Use ValueChanged to learn the choice in C#, and set Value to apply a scheme to the page, the cookie and other open tabs, on an interactive page.

@* On an interactive page ValueChanged tells C# what was picked, and setting Value applies a scheme
   to the page, the cookie and other open tabs, as a click would. Value starts unset, so the
   switch shows the choice saved in the cookie. *@
<Stack Gap="3" Align="Align.Start">
    <Row Gap="3" Align="Align.Center" Wrap>
        <ColorSchemeSwitch Variant="ColorSchemeSwitchVariant.Segmented"
                           Value="_scheme" ValueChanged="(ColorScheme picked) => _scheme = picked" />
        <Button Size="ControlSize.Sm" Variant="ButtonVariant.Outline" Accent="Accent.Neutral"
                OnClick="() => _scheme = ColorScheme.Auto">Reset to system</Button>
    </Row>
    <TextBlock Size="TextSize.Sm" Color="Color.Muted">Picked here: @Picked</TextBlock>
</Stack>

@code {
    private ColorScheme? _scheme;

    private string Picked => _scheme switch
    {
        ColorScheme.Light => "Light",
        ColorScheme.Dark => "Dark",
        ColorScheme.Auto => "System",
        _ => "nothing yet",
    };
}

Leave Value unset to show the choice in the cookie; a bound value that starts null does the same until something is picked.

Its own words

Use Label for the menu button's or group's name ("Color scheme"); the options' words ("System", "Light", "Dark") and the toggle's ("Switch to dark mode") are set for the whole app as in Text and other languages.

Mode support

Accessibility

Parameters

See also

• IzzyTheme: the preset, brand color, fonts and scheme, set on the server.
• SegmentedControl: one choice from a few, as joined buttons.
• Menu: links, form posts and actions in a popover menu.