Skip to content
Site volume
Colourway

Components

ThemeToggle

Bone and Night: an icon key in the nav and a segmented pair in the footer, remembered for the next visit.

Import from@maxgrits/overprint-react/theme-toggle
On this page

Example#

Look of this example
Live render of examples/theme-toggle/basic.tsx

Usage#

Use the theme toggle to let visitors switch the paper between Bone and Night. Bone is the default for a first visit (D-C7); the choice is remembered and applied before the first paint, so pages never flash.

  • icon (default) is a single key in the navbar, pressed on Night, with a circle on Bone and a crescent on Night.
  • segmented is a two-segment "Bone" and "Night" control, for the footer and the visitor controls.
  • The switch crossfades in 240 ms where view transitions exist and motion is not reduced; otherwise it is instant.

Anatomy#

The parts of examples/theme-toggle/basic.tsx, numbered:
  1. Icon keyPressed on Night..mk-theme-toggle
  2. SegmentedBone and Night, for the footer..mk-segmented-control

Volume#

Reading layer: identical at every volume.

  • Quiet

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    The site default. Art on its own plates, one display moment per view.

  • Press

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • The papers are named Bone and Night everywhere, never Light and Dark.

Do and don't#

Do

The papers' own names.

Don't

A theme toggle labelled "Dark mode".

Generic names for branded papers.

Bone and Night are paper stocks, not light and dark modes. Using their names keeps the print metaphor and matches the rest of the site.

Accessibility#

  • The icon key is named "Night stock" and pressed on Night; the segmented pair is a radio group named "Paper".
  • The switch crossfades where the browser can and is instant under reduced motion.
KeysWhat happens
EnterorSpace on the keySwitches between Bone and Night (aria-pressed = Night)
Arrow keys in the segmented controlPick Bone or Night

The colour pairs it prints, with their contrast on both papers:

TextSurfaceRoleBoneNight
--mk-text--mk-surfaceuinot in this looknot in this look
--mk-on-selected--mk-selecteduinot in this looknot in this look
--mk-on-control--mk-controluinot in this looknot in this look

Process at Studio, normal contrast. Every look: the press check.

Props#

PropTypeDefaultDescription
appearance"icon" | "segmented"none
copyPartial<ThemeToggleCopy>none
classNamestringnone

Generated from ThemeToggleProps in packages/overprint-react/src/reading/theme-toggle/theme-toggle.tsx.

Tokens#

System tokens (2)

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactThe reading layer's controls, overlays, forms and visitor prefs (P2-T1 to P2-T5): every Button is the comic hit key, with IconButton, Link and Tooltip; Input, Textarea, Select, Checkbox and CheckboxGroup, Radio and RadioGroup, Switch, Slider with the ruler, RulerReadout and SegmentedControl; Dialog, Drawer, NavSheet, Tabs, Disclosure, Faq and faqJsonLd on Base UI 1.9 where the platform falls short; Field, Fieldset, Form with the site's inline validation, ErrorSummary, Callout, Honeypot, FormTimestamp and QuoteForm; PrefsScript under 1 KB, usePref and setPref with cross-tab sync, ThemeToggle and the visitor VolumeDial; VisuallyHidden.
  • PatchreactA ruler range keeps its two values apart, a slider's end figures stay inside it, ComparisonTable and the segmented ThemeToggle name their radios per instance (two on a page no longer uncheck each other), and a Stamp's second line wraps, with the big stamp at 0.6× below 30rem. Read the whole entry