README

🎨 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

See example code on codepen
See Sample site on Netlify

💿 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)
  // 👆 false parameter is required for react project
}, []);

CSS

Set your themeable style as custom properties in CSS like this:

:root {
  --my-color: #fff;
  /* or any other variables/style */
}
[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>` menu

<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

/*! purgecss start ignore */

[data-theme='dark'] {
  --my-color: #252b30;
}

/*! purgecss end ignore */

Usage no npm install needed!