Scheme toggle
On this page
Usage
Use a scheme toggle to quickly switch between color schemes.
Writing content
The text label should be as short as possible, remove any extra words if necessary.
| Element | Character Count |
|---|---|
| Text label | 20 |
Layout
Placement
A scheme toggle can change the look of a page or interface in one click, so it should be placed somewhere highly-visible. It is also recommended to place a scheme toggle in an element or pattern that scrolls with the user, so they always have access to it.
Behavior
User experience
When users interact with a scheme toggle, the following happens:
- The color scheme changes immediately (if the color schemes that are being toggled are different)
- Their selected color scheme is saved so it persists across browser sessions
- Their saved preference is restored on page load
System default scheme
When users select the System default color scheme, the following happens:
- The browser or operating system determines the appropriate scheme
- The color scheme updates automatically if system preferences change
Best practices
Long text label
Write label text using as few words as possible.
Do not use unnecessary words that make the text label longer.
No text label
Always use a text label next to or above the button group.
Do not remove the text label.
Other icons
Maintain the same icons that are included.
Do not change the icons, it causes confusion about what will happen when each button is selected.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
