Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Scheme toggle

OverviewStyleGuidelinesCodeAccessibilityDemos
OverviewStatusWhen to useStatus checklistOverviewStatusWhen to useStatus checklist

Overview

A scheme toggle provides users with the ability to switch between light, dark, and system default color schemes. It should be placed in a visible location for easy access. For WCAG compliance, screen reader users must be able to identify each option; the component uses a native fieldset with ARIA-compatible radio buttons. Tab focuses the group; arrow keys allow selection between schemes.

import '@rhds/elements/rh-scheme-toggle/rh-scheme-toggle.js';
 
body {
  color-scheme: light dark;
  background-color: light-dark(var(--rh-color-surface-lightest, #ffffff),
      var(--rh-color-surface-darkest, #151515));
  color: light-dark(var(--rh-color-text-primary-default-on-light, #151515),
      var(--rh-color-text-primary-default-on-dark, #ffffff));
}
 
<rh-scheme-toggle></rh-scheme-toggle>
 
import { SchemeToggle } from "@rhds/elements/react/rh-scheme-toggle/rh-scheme-toggle.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <SchemeToggle />
);

Current color scheme setting. Reflects to the scheme attribute and initializes from localStorage.rhdsColorScheme when available. When set, applies the value to document.body.style.colorScheme and persists it to localStorage.

Legend text displayed next to the toggle button group. Authors should keep this text short (under 20 characters).

Accessible label for the light mode radio button. Rendered as a visually-hidden span and a title tooltip.

Accessible label for the dark mode radio button. Rendered as a visually-hidden span and a title tooltip.

Accessible label for the system default radio button. Rendered as a visually-hidden span and a title tooltip.

 View source on GitHub

Status

When to use

  • Provide system-responsive theme options that respect user preferences
  • Build applications that support multiple color schemes
  • Allow users to switch between light and dark color schemes

Status checklist

Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify