Color mode | Brio

Examples

Basic usage

<brio-color-mode></brio-color-mode>

Shape: default group

<brio-color-mode></brio-color-mode>

Shape: cycle button

<brio-color-mode class="is-cycle"></brio-color-mode>

Shape: responsive (pill above 48rem, cycle below)

<brio-color-mode class="is-cycle-below-md"></brio-color-mode>

Authored chrome

You can create your own styled color mode toggle by adding your own buttons to the brio-color-mode element. For example:

<brio-color-mode>
                <span class="button-group">
                    <button
                        class="button is-neutral is-outlined is-sm is-icon"
                        type="button"
                        data-theme-value="light"
                        aria-label="Light mode"
                        aria-pressed="false"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="16"
                            height="16"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            aria-hidden="true"
                        >
                            <circle cx="12" cy="12" r="5" />
                            <line x1="12" y1="1" x2="12" y2="3" />
                            <line x1="12" y1="21" x2="12" y2="23" />
                            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
                            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
                            <line x1="1" y1="12" x2="3" y2="12" />
                            <line x1="21" y1="12" x2="23" y2="12" />
                            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
                            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
                        </svg>
                    </button>
                    <button
                        class="button is-neutral is-outlined is-sm is-icon"
                        type="button"
                        data-theme-value="system"
                        aria-label="System mode"
                        aria-pressed="false"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="16"
                            height="16"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            aria-hidden="true"
                        >
                            <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
                            <line x1="8" y1="21" x2="16" y2="21" />
                            <line x1="12" y1="17" x2="12" y2="21" />
                        </svg>
                    </button>
                    <button
                        class="button is-neutral is-outlined is-sm is-icon"
                        type="button"
                        data-theme-value="dark"
                        aria-label="Dark mode"
                        aria-pressed="false"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="16"
                            height="16"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            aria-hidden="true"
                        >
                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
                        </svg>
                    </button>
                </span>
            </brio-color-mode>

Source comments

Color mode -- three-state light / system / dark switcher (extra).

Inner buttons render as .button.is-outlined.is-sm.is-icon, the
same chrome as <docs-themepicker>, so sizing and hover line up
across the header. The pill set is wrapped in a
<span class="button-group"> sibling of the cycle button; the
wrapper scopes button-group's segmented recipe to the three pills
without picking up the cycle button (which would otherwise be
:last-child and take the right-end radii from the dark pill).

Selection state binds to [aria-pressed="true"] (P5) and picks up
--color-state-fill via .button-group, which is the same selection
fill that dropdown, sidebar-nav, and tabs already use. That
means the pressed visual tracks docs-mood automatically
(chromatic / neutral / minimal) -- closing the open ROADMAP
question about brio-color-mode not conforming to the state-bg
system.

Shape modes (per P7):
  default            three-button group; cycle button not rendered
  .is-cycle          single cycle button at all sizes
  .is-cycle-below-md group above 48rem, cycle button below

The cycle button wraps three <span data-icon-for> children; the
rules below reveal the one matching the host's data-current-mode
attribute (set by the JS module in applyTheme()).

Reference

Source: src/css/extras/brio-color-mode.css

Applies to

brio-color-mode

Classes

Class	Kind	Description
`.is-cycle`	variant	Single cycle button at all sizes
`.is-cycle-below-md`	variant	Button group above the md breakpoint, cycle button below

Related: Button Group

Segmented group of related buttons

Source: src/css/button.css

Applies to

.button-group