theme-change

Dependencies

Maintainers

Versions

Alerts

File Explorer

Advanced tools

npm Scripts

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

2.5.0

latest

source

npm

Version published: last year

Weekly downloads: 8.6K; decreased by-6.61%

Maintainers: 1

Install size: 20.4 kB

Created: 4 years ago

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

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 (using composition API):

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

import { onMounted } from 'vue'
import { themeChange } from 'theme-change'

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

or if it's a Vue 2 project (using options API):

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
})

or if it's a SolidJS project:

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

import { onMount } from 'solid-js'
import { themeChange } from 'theme-change'
onMount(async () => {
  themeChange();
})

or if it's a Astro project:

Install: npm i theme-change --save and use it in your .astro file(s):

Astro is a bit tricky because of how is rendering html page as a MPA (Multiple Pages Application) Astro projects are therefore subject to FART problem. To prevent this we will use the is:inline astro directive.

If you want to apply themes on a single astro page (remember Astro is an MPA framework) :

src/pages/mypage.astro

---
---

<html lang="en">
  <head>
  <script is:inline>
      // ☝️ This script prevent the FART effect.
      if (localStorage.getItem("theme") === null) {
        document.documentElement.setAttribute("data-theme", "light");
      } else
      document.documentElement.setAttribute("data-theme",localStorage.getItem("theme"));
      // "theme" LocalStorage value is set by the package to remember user preference.
      // The value is checked and applyed before rendering anything.
  </script>
  <script>
      import { themeChange } from "theme-change";
      themeChange();
       // 👆 you could import the CDN directly instead of these two lines
    </script>
    <title>My crazy credit page</title>
  </head>
  <body>
    <h1>Welcome to my credit page!</h1>
  </body>
</html>

If you want to apply themes to all your astro pages, you need to execute both scripts in a Astro layout, it would need to wrap all your astro pages like so:

src/layouts/MyCrazyLayout.astro

---
---

<html lang="en">
  <head>
    <script is:inline>
      // ☝️ This script prevent the FART effect.
      if (localStorage.getItem("theme") === null) {
        document.documentElement.setAttribute("data-theme", "light");
      } else
        document.documentElement.setAttribute(
          "data-theme",
          localStorage.getItem("theme")
        );
      // "theme" LocalStorage value is set by the package to remember user preference.
      // The value is checked and applyed before rendering anything.
    </script>
    <script>
      import { themeChange } from 'theme-change';
      themeChange();
      // 👆 you could import the CDN directly instead of these two lines
    </script>
    <meta charset="utf-8" />
    <title>My Cool Astro Layout Wraping All My Pages</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <nav>
      <a href="#">Home</a>
      <a href="#">Posts</a>
      <a href="#">Contact</a>
    </nav>
    <article>
      <slot />
      <!-- your content from src/pages/index.astro is injected here -->
    </article>
  </body>
</html>

src/pages/index.astro

---
import MyCrazyLayout from '../layouts/MyCrazyLayout.astro';
---
<MySiteLayout>
  <p>My page content, wrapped in a layout!</p>
</MySiteLayout>

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

Using custom localStorage key

If you want to use a custom localStorage key, you can add it to the data-key attribute like this:

<select data-choose-theme data-key="admin-panel">

<button data-key="front-page" data-set-theme="">

<span data-key="premium-user-theme" data-toggle-theme="dark">

Keywords

FAQs

What is theme-change?

Is theme-change popular?

Is theme-change well maintained?

Last updated on 03 Mar 2023

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