Scheme toggle
On this page
On this page
Overview
A scheme toggle switches between light, dark, and system default color schemes.
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:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Planned
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
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in RH Elements |
| RH Shared Libs |
|
Component will be added to RH Shared Libs |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
