Theme Changer
The simplest JavaScript library to apply light - dark theme in your website.
First Check Out One Example
How to use
Files
- index.html
- style.css
- test.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./test.js" type="module" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World</h1>
<button class="btn">Toggle Button 1</button>
<button class="btn">Toggle Button 2</button>
<p>Auto -- Light -- Dark</p>
</body>
</html>
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
npm
npm i theme-changer-light-dark
1 Feb 3, 2022
33 Dec 25, 2022
201 Dec 31, 2022
2 Mar 18, 2022
17 Dec 2, 2022
5 Nov 18, 2022
17 Jan 2, 2023
340 Dec 17, 2022
42 Sep 30, 2022
59 Dec 23, 2022