theme-switcher-compostrap
v1.0.3
Published
Bootstrap 5 theme switcher with optional icon and label support.
Downloads
677
Maintainers
zdenek.papucikReadme
Theme Switcher
Bootstrap 5.3 theme switcher with optional icon and label support.
Installation
npm install theme-switcher-compostrapUsage
import 'theme-switcher-compostrap/theme-switcher.css';
import { ThemeSwitcher } from 'theme-switcher-compostrap';
new ThemeSwitcher().initialize();Use a simple text switch:
<button type="button" class="btn btn-link theme-switcher" data-theme-switcher>
<span data-theme-switcher-label>Dark mode</span>
</button>Or add an icon from any icon library used by your project:
<button
type="button"
class="btn btn-link theme-switcher"
data-theme-switcher
data-theme-light-icon="fa-solid fa-sun"
data-theme-dark-icon="fa-solid fa-moon"
>
<i data-theme-switcher-icon></i>
<span data-theme-switcher-label>Dark mode</span>
</button>The package does not install an icon library. Use Font Awesome, Bootstrap Icons, or any other icon set.
Labels and icon classes can be configured directly in HTML with data-* attributes or globally in
JavaScript options.
Built on
Introduction
The switcher updates Bootstrap's global theme by changing data-bs-theme on the <html> element.
The selected theme is stored in localStorage, so it is remembered on subsequent visits.
<html lang="en" data-bs-theme="light">Styles
Import the bundled CSS:
import 'theme-switcher-compostrap/theme-switcher.css';Or import the SCSS source in your Sass entry point:
@import "theme-switcher-compostrap/src/scss/theme-switcher";The bundled CSS only aligns the optional icon and label. Colors should come from your layout, for example
Bootstrap nav-link classes or your own navbar styles.
Custom labels
Use data attributes when the text should be translated by your application or template system:
<button
type="button"
data-theme-switcher
data-theme-light-label="Light mode"
data-theme-dark-label="Dark mode"
>
<span data-theme-switcher-label></span>
</button>data-theme-light-label is shown when the current theme is dark and the button switches to light mode.
data-theme-dark-label is shown when the current theme is light and the button switches to dark mode.
The shorter data-light-label and data-dark-label attributes are also supported.
You can also configure labels from JavaScript:
<button type="button" data-theme-switcher>
<span data-theme-switcher-label></span>
</button>new ThemeSwitcher({
lightLabel: 'Light mode',
darkLabel: 'Dark mode',
}).initialize();Custom icons
Icons are optional. Add an element with data-theme-switcher-icon only when your project loads an icon
library.
Set icon classes in HTML:
<button
type="button"
data-theme-switcher
data-theme-light-icon="fa-solid fa-sun"
data-theme-dark-icon="fa-solid fa-moon"
>
<i data-theme-switcher-icon></i>
<span data-theme-switcher-label></span>
</button>Or configure icon classes from JavaScript:
<button type="button" data-theme-switcher>
<i data-theme-switcher-icon></i>
<span data-theme-switcher-label></span>
</button>new ThemeSwitcher({
lightIcon: 'fa-solid fa-sun',
darkIcon: 'fa-solid fa-moon',
}).initialize();Bootstrap Icons work the same way:
<button
type="button"
data-theme-switcher
data-theme-light-icon="bi bi-sun-fill"
data-theme-dark-icon="bi bi-moon-fill"
>
<i data-theme-switcher-icon></i>
<span data-theme-switcher-label></span>
</button>The shorter data-light-icon and data-dark-icon attributes are also supported.
Options
new ThemeSwitcher({
selector: '[data-theme-switcher]',
storageKey: 'bootstrap-theme',
defaultTheme: 'light',
lightIcon: '',
darkIcon: '',
lightLabel: 'Light mode',
darkLabel: 'Dark mode',
}).initialize();Events
The switcher dispatches a theme-switcher:change event on window after each theme update:
window.addEventListener('theme-switcher:change', (event) => {
console.log(event.detail.theme);
});