The **Theme** toggle provides users with the ability to toggle through a predefined set of high-contrast themes, light or dark. Themes are based on the {{ this.package.nice }} [color system](color).

---

**Theme** toggling is a new inclusive design pattern for many users. It is recommended to display the interface in the light theme first and allow them to select the dark theme based on their preference.

---

The theme toggling element should be placed consistently with other global site features such as [languages](languages) or [search](search), however, it is a lower priority to the [languages select element](languages#languages-select-element).

---

Theme colors should be consistent between elements in the interface, using the theme [scale defined by the color system](color#base-scale). Toggling alternatively colored modals or brightly colored elements can be visually jarring for users with certain color sensitivities.