Theme switches docs

In this article, we are going to cover how we could modify the styling and functionality of theme switches.

Styling options

As shown in the image image below, we have 6 options to style:

1. Size – controls size of the whole element
2. Moon icon color – color of the Moon icon, we use a CSS variable that could be a hex value also
3. Sun icon color – color of the Sun icon, we use a CSS variable that could be a hex value also
4. Background color – switch background color
5. Border color – switch border-color
6. Knob color – controls the color the switch knob

Functionality options

data-matchmedia

Value: true or false
Before the user interacts with the component we need to show a dark or light theme. The default theme is the theme from the app settings. If we set this to true, the theme setter will check the user preference in the browser and system to see if does user prefers a dark or light theme and set the theme according to this.

data-buttonstate

Value: current or next

As there isn’t a defacto standard related to toggles should they represent the current or next state? With this option, you could reverse the UX of a component and force the component to show a reversed state.