Scheme dropdown Since v4.2.0

Use a scheme dropdown to quickly switch between color schemes.

A scheme dropdown 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 dropdown in an element or pattern that scrolls with the user, so they always have access to it.

When users interact with either light or dark color schemes, the following should happen:

• Available color schemes are displayed
• The color scheme changes immediately (if the color scheme that is being toggled is different)
• Their selected color scheme is saved so it persists across browser sessions
• Their saved preference is restored on page load

When users select the System default color scheme, the following should happen:

• The browser or operating system determines the appropriate color scheme
• The color scheme updates automatically if system preferences change

Maintain the same icons that are included.

Do not change the icons, it will cause confusion about what will happen when each color scheme is selected.