Skip to content
STYLESCAPE

Theme Toggle

Examples for the ss-c-theme-toggle module.

A button that switches the page theme (data-theme on <html>), driven by ThemeToggler, which remembers the choice in localStorage. A two-state button is pressed (aria-pressed="true") while the page is dark, including "auto" on a dark system. With data-theme-cycle it steps light → dark → auto and shows the choice in data-theme-state. Before the script runs, the icon follows the page's data-theme. Icons are inline SVG or a CSS-drawn __glyph; no icon font.

Icon button

HTML 
<button type="button" class="ss-c-theme-toggle" aria-pressed="false" aria-label="Dark mode">
            <svg class="ss-c-theme-toggle__icon ss-c-theme-toggle__icon--sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg><svg class="ss-c-theme-toggle__icon ss-c-theme-toggle__icon--moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/></svg>
        </button>
        <button type="button" class="ss-c-theme-toggle" aria-pressed="true" aria-label="Dark mode">
            <svg class="ss-c-theme-toggle__icon ss-c-theme-toggle__icon--sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg><svg class="ss-c-theme-toggle__icon ss-c-theme-toggle__icon--moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/></svg>
        </button>

With label

HTML 
<button type="button" class="ss-c-theme-toggle" aria-pressed="false">
            <svg class="ss-c-theme-toggle__icon ss-c-theme-toggle__icon--sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg><svg class="ss-c-theme-toggle__icon ss-c-theme-toggle__icon--moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/></svg> Dark mode
        </button>

CSS glyph

An empty __glyph span draws a sun, moon or half disc in CSS.

HTML 
<button type="button" class="ss-c-theme-toggle" aria-pressed="false" aria-label="Dark mode">
            <span class="ss-c-theme-toggle__glyph"></span>
        </button>
        <button type="button" class="ss-c-theme-toggle" aria-pressed="true" aria-label="Dark mode">
            <span class="ss-c-theme-toggle__glyph"></span>
        </button>
        <button type="button" class="ss-c-theme-toggle" data-theme-cycle data-theme-state="auto"
                aria-label="Theme: system">
            <span class="ss-c-theme-toggle__glyph"></span>
        </button>

Light / dark / auto

data-theme-label-light|dark|auto give the button a name per state; ThemeToggler copies the current one to aria-label.

HTML 
<button type="button" class="ss-c-theme-toggle ss-c-theme-toggle--ghost" data-theme-cycle
                data-theme-state="light" aria-label="Theme: light"
                data-theme-label-light="Theme: light"
                data-theme-label-dark="Theme: dark"
                data-theme-label-auto="Theme: system">
            <svg class="ss-c-theme-toggle__icon ss-c-theme-toggle__icon--sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg><svg class="ss-c-theme-toggle__icon ss-c-theme-toggle__icon--moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/></svg><svg class="ss-c-theme-toggle__icon ss-c-theme-toggle__icon--auto" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4v16a8 8 0 0 0 0-16z" fill="currentColor"/></svg>
        </button>