theme-changer-light-dark

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