Awesome Open Source
Awesome Open Source

🎨 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

image

💿 Use

JS

Use CDN:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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

    btn

    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

    toggle

    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

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,513,654) 
Theme (6,119) 
Localstorage (975) 
Theming (151) 
Related Projects
Advertising 📦 9
All Projects
Application Programming Interfaces 📦 120
Applications 📦 181
Artificial Intelligence 📦 72
Blockchain 📦 70
Build Tools 📦 111
Cloud Computing 📦 79
Code Quality 📦 28
Collaboration 📦 30
Command Line Interface 📦 48
Community 📦 81
Companies 📦 60
Compilers 📦 60
Computer Science 📦 74
Configuration Management 📦 39
Content Management 📦 167
Control Flow 📦 197
Data Formats 📦 77
Data Processing 📦 266
Data Storage 📦 132
Economics 📦 60
Frameworks 📦 198
Games 📦 122
Graphics 📦 103
Hardware 📦 148
Integrated Development Environments 📦 47
Learning Resources 📦 147
Legal 📦 28
Libraries 📦 119
Lists Of Projects 📦 21
Machine Learning 📦 336
Mapping 📦 61
Marketing 📦 15
Mathematics 📦 55
Media 📦 228
Messaging 📦 97
Networking 📦 304
Operating Systems 📦 84
Operations 📦 120
Package Managers 📦 52
Programming Languages 📦 229
Runtime Environments 📦 96
Science 📦 42
Security 📦 375
Social Media 📦 26
Software Architecture 📦 70
Software Development 📦 68
Software Performance 📦 57
Software Quality 📦 127
Text Editors 📦 45
Text Processing 📦 131
User Interface 📦 310
User Interface Components 📦 465
Version Control 📦 29
Virtualization 📦 68
Web Browsers 📦 38
Web Servers 📦 25
Web User Interface 📦 194