theme-changer-light-dark
v1.0.4
Published
A JavaScript Library to change themes (Light - Dark - Auto)
Downloads
8
Maintainers
Readme
Theme Changer
The simplest JavaScript library to apply light - dark theme in your website.
First Check Out One Example
How to use
style.css
body {
background-color: var(--bg);
color: var(--text);
}
test.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()
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.
let theme = new themeChanger({
theme: {
light: 'CSS code for light theme',
dark: 'CSS code for dark theme';
}
})
getCurrentTheme()
theme.getCurrentTheme()
// returns 'light' or 'dark'
getTheme()
theme.getTheme()
// returns 'Light' or 'Dark' or 'Auto'
toggle()
theme.toggle()
// toggles theme as auto - light - dark
applyAutoMode()
theme.applyAutoMode()
// applies auto mode
applyLightMode()
theme.applyLightMode()
// applies light mode
applyDarkMode()
theme.applyDarkMode()
// applies dark mode