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 group 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 Readtime Scheme dropdown Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed How to useProject FeltColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile AI design principlesLegal requirementsTransparency noticesIconographyColorChatbot avatarsAnimation All Personalization PatternsAnnouncement FundamentalsColorAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Scheme dropdown Since v4.2.0

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-scheme-dropdownImportingUsagerh-scheme-dropdown

Importing

Add rh-scheme-dropdown to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-scheme-dropdown/rh-scheme-dropdown.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Usage 

<rh-scheme-dropdown></rh-scheme-dropdown>

<script type="module">
  import '@rhds/elements/rh-scheme-dropdown/rh-scheme-dropdown.js';
</script>

<style>
  body {
    color-scheme: light dark;
    background-color: var(--rh-color-surface);
    color: var(--rh-color-text-primary);
  }

  rh-scheme-dropdown {
    padding: var(--rh-space-md, 8px);
  }
</style>
Copy to Clipboard Wrap lines

rh-scheme-dropdown

Provides a color scheme picker for switching between light, dark, and system defaults. Accessible by default with a screen-reader label (WCAG 4.1.2), keyboard navigation, and focus management. Authors should set accessible-label for localization.

Slots 0

None

Attributes 5

Attribute DOM Property Description Type Default
scheme scheme

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.

 
'light' | 'dark' | 'light dark'
 
globalThis.localStorage\n ?.rhdsColorScheme as Scheme
accessible-label accessibleLabel

Visually hidden accessible label for the scheme dropdown. Authors should keep this text short (under 20 characters).

 
string
 
'Color scheme'
accessible-label-light accessibleLabelLight

Accessible label for the light mode option.

 
string
 
'Light'
accessible-label-dark accessibleLabelDark

Accessible label for the dark mode option.

 
string
 
'Dark'
accessible-label-system accessibleLabelSystem

Accessible label for the system default option.

 
string
 
'System'

Methods 0

None

Events 1

Event Name Description
scheme-changed

Fired when the color scheme changes

CSS Shadow Parts 0

None

CSS Custom Properties 2

CSS Property Description Default
--rh-scheme-dropdown-select-inline-size

Select fallback browser max-inline-size. Change when customizing option text

 102px
--rh-scheme-dropdown-picker-inline-size

Picker max-inline-size. Change when customizing scheme dropdown option text

 145px

Design Tokens 23

Token Description Copy
--rh-color-surface

Select surface color; theme-adaptive
--rh-color-text-primary

Select text color; theme-adaptive for accessible contrast
--rh-font-family-body-text

Select typeface

Body text font family
--rh-font-size-body-text-md

Select text size

16px font size
--rh-font-weight-body-text-regular

Select font weight

Regular font weight
--rh-line-height-body-text

Select line height

Line height for body text
--rh-space-2xl

Select inline-end padding; extra room for the caret indicator

32px spacer
--rh-length-2xs

Focus outline offset

3px length token
--rh-border-width-sm

Select border width

Picker border width

Applies a 1px border width to at least 1 side of a container. This shall be the default width for all borders and lines. It should be used to establish baseline thickness or visual separation with a container or thin line. It must not be used for strong directional emphasis like indicating a selected state. Recommended for elements like Button, Card, or Field. Applying to all 4 sides at once is optional.
--rh-color-border-subtle

Select border color; theme-adaptive

Picker border color; theme-adaptive
--rh-box-shadow-sm

Picker elevation shadow; depth cue for the overlay

Small box shadow
--rh-space-sm

Picker top margin

6px spacer
--rh-border-width-md

Open state outline width

Applies a 2px border width to at least 1 side of a container. It should be used to add emphasis or visual separation beyond a 1px border. Recommended for elements needing extra thickness like Alert or Progress stepper. It must be used to ensure hover, focus, and active states are discernible by more than color alone per WCAG. Applying to all 4 sides at once is optional.
--rh-animation-speed
--rh-space-3xl

Option inline-end padding

48px spacer
--rh-space-md

Select block padding

Select block padding

Select content gap

Picker vertical padding

Option block padding

Option block padding

8px spacer
--rh-color-surface-lighter

Option hover surface in light color scheme

Tertiary surface (light theme)
--rh-color-surface-darker

Option hover surface in dark color scheme

Secondary surface (dark theme)
--rh-border-radius-default

Select corner radius

Picker corner radius

Option focus corner radius

Applies a 3px border radius to at least 1 corner of a container. This shall be the default for all containers needing rounded corners. It should be used to soften a container's visual footprint. Recommended for elements with subtle rounded corners like Button, Card, or Dialog. It must be applied to all 4 corners of a container at once.
--rh-border-width-lg

Focus outline width

Option focus outline width

Applies a 3px border width to 1 side of a container. It should be used for strong directional emphasis like indicating a current page, expanded, or selected state. Recommended for elements needing heavy visual weight like Accordion, Navigation, or Tabs. It must also be used for the focus indicator border per WCAG. Except for the focus indicator, it should not be applied to all 4 sides at once.
--rh-color-border-interactive

Hover border color; interactive theme color

Focus border color; interactive theme color

Focus outline color; interactive theme color

Open state outline color; interactive theme color

Option focus outline color; interactive theme color
--rh-color-interactive-primary-default

Checkmark icon color; interactive theme color for selected scheme
--rh-space-lg

Select inline-start padding

Select inline-end padding

Option inline-start padding

Checkmark inline-end offset

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