Scheme toggle
Importing
Add rh-scheme-toggle to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-scheme-toggle/rh-scheme-toggle.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Usage
<rh-scheme-toggle></rh-scheme-toggle>
<script type="module">
import '@rhds/elements/rh-scheme-toggle/rh-scheme-toggle.js';
</script>
<style>
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));
}
</style>rh-scheme-toggle
A switch toggles the state of the color scheme (between light, dark and system default).
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
scheme |
scheme |
Current color scheme setting |
|
|
legend-text |
legendText |
Legend text for the color scheme toggle group |
|
|
light-text |
lightText |
Label text for the light mode option |
|
|
dark-text |
darkText |
Label text for the dark mode option |
|
|
system-text |
systemText |
Label text for the system default option |
|
|
| Token | Copy |
|---|---|
--rh-space-lg
|
|
--rh-size-icon-01
|
|
--rh-color-border-subtle
|
|
--rh-space-2xl
|
|
--rh-space-3xl
|
|
--rh-border-radius-default
|
|
--rh-color-interactive-secondary-focus
|
|
--rh-color-interactive-primary-active
|
|
--rh-color-border-interactive
|
|
--rh-color-text-primary-on-dark
|
|
--rh-color-text-primary-on-light
|
|
--rh-border-width-sm
|
|
--rh-color-interactive-primary-focus
|
|
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.
