Fankhauser-Dominik / theme-change

Change CSS theme with toggle, buttons or select using CSS custom properties and localStorage

🎨 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
• See Vue Example on Vercel

💿 Use

JS

Use CDN:

<script src="https://cdn.jsdelivr.net/npm/theme-change@2.0.2/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
}, [])

or if it's a Vue 3 project:

Install: npm i theme-change --save and use it in your js file:

import { onMounted, onUpdated, onUnmounted } from 'vue'
import { themeChange } from 'theme-change'

export default {
  setup() {
    onMounted(() => {
      themeChange(false)
    })
  },
}

or if it's a Vue 2 project:

Install: npm i theme-change --save and use it in your js file:

import { themeChange } from 'theme-change'

export default {
  mounted: function () {
    themeChange(false)
  },
}

or if it's a Svelte project:

Install: npm i theme-change --save and use it in your svelte component that uses one theme-change attributes:

import { onMount } from 'svelte'
import { themeChange } from 'theme-change'

// NOTE: the element that is using one of the theme attributes must be in the DOM on mount
onMount(() => {
  themeChange(false)
  // 👆 false parameter is required for svelte
})

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

---