đ¨ CSS Theme Change
A very very small script to handle CSS theming
Change CSS theme with toggle, buttons or select using CSS Variables (CSS custom properties) and localStorage.
It saves the chosen theme in brower localStorage and loads it again when page loads.
You only need to define your theme in CSS
Demo
đ¨âđť Use
1ď¸âŁ Change theme with buttons
Using data-set-theme
Clicking on these buttons, sets the chosen theme and also adds the ACTIVECLASS
to the chosen button
HTML
<button data-act-class="ACTIVECLASS" data-set-theme=""></button>
<button data-act-class="ACTIVECLASS" data-set-theme="dark"></button>
<button data-act-class="ACTIVECLASS" data-set-theme="pink"></button>
JS
Use CDN
<script src="https://unpkg.com/theme-change@latest/dist/btn.js"></script>
Or use NPM:
Install: npm i theme-change --save
and use it in your js file:
import {themeBtn} from "theme-change"
themeBtn()
2ď¸âŁ Toggle between 2 themes
Using data-toggle-theme
Clicking on this element, toggles between the 2 values and applies the ACTIVECLASS when dark theme is active
HTML
<button data-act-class="ACTIVECLASS" data-toggle-theme="dark,light"></button>
JS
Use CDN
<script src="https://unpkg.com/theme-change@latest/dist/toggle.js"></script>
Or use NPM:
Install: npm i theme-change --save
and use it in your js file:
import {themeToggle} from "theme-change"
themeToggle()
3ď¸âŁ Using a <select>
to choose theme
Using data-choose-theme
set theme when <select>
changes
HTML
<select data-choose-theme>
<option value="">Default</option>
<option value="dark">Dark</option>
<option value="pink">Pink</option>
</select>
JS
Use CDN
<script src="https://unpkg.com/theme-change@latest/dist/select.js"></script>
Or use NPM:
Install: npm i theme-change --save
and use it in your js file:
import {themeSelect} from "theme-change"
themeSelect()
Set up your CSS
Set your themeable style as custom properties in CSS like this:
:root {
--color-default: #fff;
/* or any other variables */
}
[data-theme='dark'] {
--color-default: #252b30;
}
[data-theme='pink'] {
--color-default: #ffabc8;
}
then use your variables on any element
body {
background-color: var(--color-default);
}
Set default theme for dark mode users
You can also define a default theme when user is using a dark theme on their OS
@media (prefers-color-scheme: dark){
--color-default: #252b30;
}
Fixing PurgeCSS issue
â ď¸ If you're using Purge CSS, you might need to safe list your CSS using the comments below because your secondary themes will be purged
/*! purgecss start ignore */
[data-theme='dark'] {
--color-default: #252b30;
}
/*! purgecss end ignore */