Socket
Socket
Sign inDemoInstall

theme-change

Package Overview
Dependencies
0
Maintainers
1
Versions
41
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    theme-change

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


Version published
Weekly downloads
6.2K
decreased by-23.85%
Maintainers
1
Install size
13.5 kB
Created
Weekly downloads
 

Readme

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

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

Keywords

FAQs

Last updated on 14 Apr 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc