🎨 CSS Theme Change

- A tiny JS script to handle CSS themes
- Change CSS theme using button, toggle or a
- It saves chosen theme in browser and uses it again when page reloads

[![][build]][build-url] [![][install-size]][install-size-url] [![][js]][js-url]
[![][npm]][npm-url] [![][dl]][npm-url] [![][commit]][gh-url]

🖥 Demo

- See example code on codepen
- See Sample site on Netlify
- See Vue Example on Vercel


💿 Use

JS

Use CDN:

``html

`

Or use NPM:

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

`js
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:

`js
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:

`js
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:

`js
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:

`js
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:

`js
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

`js
---
---










Welcome to my credit page!




`

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












`

src/pages/index.astro

`js
---
import MyCrazyLayout from '../layouts/MyCrazyLayout.astro';
---



My page content, wrapped in a layout!



`

CSS

Set your themeable style as custom properties in CSS like this:

`css
: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

`css
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

`



`

- ### Toggle between two themes

![toggle](#)

Clicking on this element, toggles between dark and light theme and also adds the ACTIVECLASS to the element

`

`

- ###

menu

![select](#)

`

Default
Dark
Pink

`

Advance use