Theme.js (SASS/CSS, JS)

All you need to make a theme function in your webapp.

DEMO: Theme.js demo

Features

• Automatically detects system theme
• Manual theme toggler
• Color variables using SASS
• It can be controlled from css/sass as well as js
• It exposes Theme API

Usage

• Copy the src/scss and js directory in your project

  • Be sure to edit your colors in scss/_vars.scss

/*
    Describe your light-mode colors here
*/
$light-background: #e2e2e2;
$light-color: #303030;
/** your colors **/

/*
    Describe your dark-mode colors here
*/
$dark-background: #0f0f0f;
$dark-color: #ffffff;
/** your colors **/

• Link these in your index file

• Now, initialize theme like below

  • NOTE: It stores theme setting in window['theme']

Initialize theme.js with default parameters

Running following code will make a window['them'] variable that contains this initialized Theme controller instance.

let initTheme = new Theme();

Parameters

/** default parameters */
let gTheme = new Theme({
                        init: true,
                        defaultTheme: 'system',
                        initGlobal: true
                    });

• init = true ensure that it will auto initialize. if it is false, you need to manually initialize it with following code:

window['theme'].init()
/** or **/
gTheme.init()

• defaultTheme = 'system' as you understand, putting system in it will detect theme from system and set that. Possible values: system, light or dark.
• initGlobal assign the initialized instance to window['theme'] in the case of true.

API

window['theme'].getSystemTheme() to get the default system theme.

window['theme'].getDocumentTheme() to get the current selected theme or if not present it will send system theme.

window['theme'].setTheme(theme) will set the given theme, default value is light.

window['theme'].init() will initialize the Theme instance.

window['theme'].getTheme() returns current selected theme.

window['theme'].toggleTheme() toggle the theme b/w light and dark.

LICENCE

MIT