Dark Mode

Dark mode element detects user’s browser preference (light or dark mode) and toggles automatically the correspondent mode. It also stores the user’s past toggles for future visits at your site.
In order, a theme switch on load will take this preference:
1. When the user toggles the icon, when the user has previously selected Light or Dark mode at your site.
2. when the user has Light or Dark mode at the browser.

Type: there are 9 icon types for the toggle: around, inner moon, expand, within, around, simple, horizon, eclipse and lightbulb.
Reverse icon: some of the icons have a reverse type and it can be enabled here.
Size: determines the dimensions of the icon, in px.
Light icon color: the color of the icon when being light.
Dark icon color: the color of the icon when being dark.
Dimensions: determines the size of the grains. The higher this value is the smaller the grains. The demo uses 1000.

Toggle switch duration: the duration of the icon change mode.
Color changes duration: the transition duration of the “From colors” to the “To colors” at all elements.

It is quite easy to set color changes at Dark mode element.
There are 5 color changes availables: color (typography), background, border-color and fill and strokes for SVGs.
By using their repeaters, just set a “From color” and a “To color”. It couldn´t be easier!
In order to establish if your site is using a light or dark theme by default: “From colors” are those from your default theme, you just have to enable “Set dark mode as default” in case your site and “From colors” are from a dark theme by default.