🎨 CSS Theme Change
- A tiny JS script to handle CSS themes
- Change CSS theme using
button
, toggle
or a <select>
- It saves chosen theme in browser and uses it again when page reloads
🖥 Demo
💿 Use
JS
Use CDN:
<script src="https://cdn.jsdelivr.net/npm/theme-change@2.0.1/index.js"></script>
Or use NPM:
Install: npm i theme-change --save
and use it in your js file:
import {themeChange} from "theme-change"
themeChange()
or if it's a React project:
Install: npm i theme-change --save
and use it in your js file:
import { useEffect } from 'react';
import {themeChange} from "theme-change"
useEffect(() => {
themeChange(false)
}, []);
CSS
Set your themeable style as custom properties in CSS like this:
:root {
--my-color: #fff;
}
[data-theme='dark'] {
--my-color: #000;
}
[data-theme='pink'] {
--my-color: #ffabc8;
}
then use your variables on any element
body {
background-color: var(--my-color);
}
HTML
There are 3 options:
-
Using buttons to set a theme
Clicking on these buttons, sets the chosen theme and also adds the ACTIVECLASS
to the chosen button
<button data-set-theme="" data-act-class="ACTIVECLASS"></button>
<button data-set-theme="dark" data-act-class="ACTIVECLASS"></button>
<button data-set-theme="pink" data-act-class="ACTIVECLASS"></button>
-
Toggle between two themes
Clicking on this element, toggles between dark
and light
theme and also adds the ACTIVECLASS
to the element
<button data-toggle-theme="dark,light" data-act-class="ACTIVECLASS"></button>
-
<select data-choose-theme>
<option value="">Default</option>
<option value="dark">Dark</option>
<option value="pink">Pink</option>
</select>
Advance use
Set theme based on OS color-scheme
@media (prefers-color-scheme: dark){
:root{
--my-color: #252b30;
}
}
Use with PurgeCSS
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
-
Safelist [data-theme]
on postcss config
module.exports = {
purge: {
options: {
safelist: [
/data-theme$/,
],
},
},
}
-
Safelist inside CSS file
[data-theme='dark'] {
--my-color: #252b30;
}