🎨 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

• See example code on codepen
• See Sample site on Netlify

👨‍💻 Use

• You can use 3 methods:
  1. Change theme with buttons
  2. or toggle between 2 themes
  3. or using a select element to choose theme
• Then you need to define your theme in CSS

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-toggle-theme=""></button>
<button data-act-class="ACTIVECLASS" data-toggle-theme="dark"></button>
<button data-act-class="ACTIVECLASS" data-toggle-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 default theme and dark theme and applies the ACTIVECLASS when dark theme is active

HTML

<button data-act-class="ACTIVECLASS" data-toggle-theme="dark"></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 */