Scheme toggle
On this page
On this page
Overview
A switch toggles the state of the color scheme (between light, dark and system default).
Edit element properties
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>Current color scheme setting
Legend text for the color scheme toggle group
Label text for the light mode option
Label text for the dark mode option
Label text for the system default option
Status
What do these mean?
- Figma library:
-
Planned - RH Elements:
-
Ready - RH Shared Libs:
-
Planned
When to use
- When you need to allow users to switch between light and dark color schemes
- When you want to provide system-responsive theme options that respect user preferences
- When building applications that support multiple color schemes and need a consistent toggle control
Example of scheme toggle with light, dark, and system options.
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component should be added to the Figma library at a later date |
| RH Elements |
|
Component is available in the RH Elements repo |
| RH Shared Libs |
|
Component should be added to the RH Shared Libs repo at a later date |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit the getting started page.
