https://github.com/codeabinash/theme-changer.js
A JavaScript library to apply light-dark theme in web pages with the help of css variables
https://github.com/codeabinash/theme-changer.js
Last synced: 10 months ago
JSON representation
A JavaScript library to apply light-dark theme in web pages with the help of css variables
- Host: GitHub
- URL: https://github.com/codeabinash/theme-changer.js
- Owner: codeAbinash
- License: mit
- Created: 2022-07-09T08:29:00.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-10T20:07:24.000Z (about 3 years ago)
- Last Synced: 2025-04-17T16:03:09.578Z (10 months ago)
- Language: JavaScript
- Size: 16.6 KB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Theme Changer
The simplest JavaScript library to apply light - dark theme in your website.
## First Check Out One [Example](https://codeabinash.github.io/theme-changer.js/test/eg1/)
## How to use
Files
- index.html
- style.css
- test.js
### index.html
```html
Hello World
Toggle Button 1
Toggle Button 2
Auto -- Light -- Dark
```
### style.css
```css
body {
background-color: var(--bg);
color: var(--text);
}
```
### test.js
```js
import themeChanger from "https://codeabinash.github.io/theme-changer.js/index.js";
let theme = new themeChanger({
selector : '.btn',
theme: {
light:
`--bg : #ddd;
--text: #555;`,
dark:
`--text: #eee;
--bg: #222;`
}
})
```
Check The example from here : https://codeabinash.github.io/theme-changer.js/test/
### `constructor()`
```js
let theme = new themeChanger({
selector : '.btn', // css selector (internally querySelectorAll)
theme: {
light: // css code
`--bg : #ddd;
--text: #555;`,
dark: // css code
`--text: #eee;
--bg: #222;`
}
})
```
### It is ok to skip the `selector` property, but if you skip the `theme` property, it will throw an error.
```js
let theme = new themeChanger({
theme: {
light: 'CSS code for light theme',
dark: 'CSS code for dark theme';
}
})
```
### `getCurrentTheme()`
```js
theme.getCurrentTheme()
// returns 'light' or 'dark'
```
### `getTheme()`
```js
theme.getTheme()
// returns 'Light' or 'Dark' or 'Auto'
```
### `toggle()`
```js
theme.toggle()
// toggles theme as auto - light - dark
```
### `applyAutoMode()`
```js
theme.applyAutoMode()
// applies auto mode
```
### `applyLightMode()`
```js
theme.applyLightMode()
// applies light mode
```
### `applyDarkMode()`
```js
theme.applyDarkMode()
// applies dark mode
```
## npm
```
npm i theme-changer-light-dark
```