Package Exports

theme-change

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (theme-change) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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.0/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 */

theme-change