Theme switcher

A radio-group control for the System, Light, Dark and High-contrast themes.

Theme switcher

The live switcher lives in the page header. This standalone example shows the same component out of context. It uses native radios so it works without JavaScript.

Theme (example)

Using the theme switcher accessibly

Use the theme switcher when you offer light, dark or high-contrast appearances and want people to choose and keep their preferred one across visits.

Do

  • Default to the operating system preference and keep a "System" option.
  • Persist the chosen theme so it survives reloads and return visits.
  • Meet contrast in every theme, including high contrast and forced-colors.

Don't

  • Don't lock users into one theme or drop the "System" choice.
  • Don't ignore the high-contrast and forced-colors case.
  • Don't rely on JavaScript for a control native radios handle on their own.

Build it right

  • Honour prefers-color-scheme by default and persist the user's explicit choice.
  • Set the CSS color-scheme and the color-scheme meta so native controls match the theme.
  • Verify text and UI contrast in light, dark and high-contrast modes.
  • Keep the control working without JavaScript by using native radios.
  • Support forced-colors so the OS high-contrast palette is respected.

The source CSS for this component lives in assets/css/components/theme-switcher.css.