Light Dark Switch
A color theme switcher based on the user system preferences.
All components are based on CodyFrame.
If you're using this component, you should also include the SCSS/JS of the following components:
The light/dark component controls the color theme of your website. It supports 3 appearances: light, dark, and 'system' (i.e., it depends on the user system preferences).
Behind the scene, this component is a
<select> element. Make sure the
data-option-theme values are equal to your light/dark color theme names.
<div class="adv-select js-adv-select js-ld-switch">
<option value="0" data-option-theme="default">Light</option>
<option value="1" data-option-theme="dark">Dark</option>
<!-- ... -->
To customize the appearance of the
<option> elements, we're using the Advanced Custom Select component.
If you need to customize the
.ld-switch-btn__icon elements, make sure to preserve their order (light, dark, system light and system dark).
Appy theme selection #
When a color theme is selected, the component adds to the
HTML element a
data-theme attribute equal to the color theme name (e.g.,
If you need to apply that attribute to a different DOM element (e.g., the
<body>), you can modify the
updateThemeValue function in the light-dark-switch.js file.
Save theme selection #
The Local Storage API is used to store the theme selection. The
ldSwitch data item is added to the localStorage property when a theme selection is made (possible values are light/dark color theme names and 'system').
On page reload, you can check if the
ldSwitch item is set and apply a color theme accordingly:
var themeSelection = localStorage.getItem('ldSwitch');