Config

root

When you set the root option to a selector, the toggler will be inserted into the HTML element matching that selector. If no such element is found, the toggler will automatically be placed inside the <body> element.

Type: string | HTMLElement
Default: document.body

Example:

JavaScript

BootstrapThemeToggler.run({
    root: '#example-container'
});

💡

You can also use data- selector and others.

prepend

Choosing the prepend option as prepend will place the switch at the start of the HTML element that corresponds to the selector.

Type: boolean
Default: false

Example:

JavaScript

BootstrapThemeToggler.run({
    prepend: true
});

💡

Without configuration, the theme toggler will be appended by default.

classes

You have the option to specify custom classes for various elements by configuring the classes option.

Type: object
Defaults: container: '' button: '' dropdown: ''

Example:

JavaScript

BootstrapThemeToggler.run({
    classes: { 
        container: 'custom-dropdown-container',
        button: 'custom-dropdown-button',
        dropdown: 'custom-dropdown-menu'
    } 
});

i18n

To provide custom labels for the theme modes, you can configure the i18n option.

Type: object
Defaults: default: 'en' autoDetect: false translations: en

Example:

JavaScript

BootstrapThemeToggler.run({
    i18n: { 
        default: 'en',
        autoDetect: 'browser', // 'browser', 'document', false
        translations: {
            en: {
                system: 'System mode',
                light: 'Light mode',
                dark: 'Dark mode'
            },
            cs: {
                system: 'Systém',
                light: 'Světlý',
                dark: 'Tmavý'
            },
            it: '/assets/translations/it.json',
            es: '/assets/translations/es.json'
        }
    }
});

storage

Configures the storage options, determining how and where the theme settings are saved.

Type: object
Defaults: type: 'local' expiration: null encryption.enabled: true encryption.method: 'xor'

Example:

JavaScript

BootstrapThemeToggler.run({
    storage: {
        type: 'session', // 'local' or 'session'
        expiration: 5000, // time in milliseconds as an integer or null for no expiration
        encryption: {
            enabled: true, 
            method: 'base64' // 'base64', 'hex', 'xor'
        }
    }    
});

API Playground