This package allows you to easily add a theme switcher in your application. Depending on your needs, this can be done with just one line of code!
There are two ways to install this package:
- using it directly in the browser or
- installing it via npm
You decide! ;)
Add the following script before body's closing tag :
<script src="https://cdn.jsdelivr.net/gh/luizfilipezs/dark-theme-switcher@latest/js/dark-theme-switcher.js"></script>Inside your project, run:
npm i dark-theme-switcher
Import
CommonJS
const { ThemeSwitcher, ThemeSwitcherGenerator } = require('dark-theme-switcher');ES6
import { ThemeSwitcher, ThemeSwitcherGenerator } from 'dark-theme-switcher';If you want to enable any element to be the toggler, use ThemeSwitcher.
Its constructor has three parameters:
toggler: HTMLElement- Element that alternates the theme every time the user clicks on it
callbackFunction?: (isDark: boolean) => void- Optional function that runs every time the theme is changed. The parameter
isDarkis abooleanthat indicates if the current theme is dark
- Optional function that runs every time the theme is changed. The parameter
options?: SwitcherOptions- Optional object with parameters for styling the animation
Simple usage
// Target element
const toggler = document.getElementById('button');
// Switcher
new ThemeSwitcher(toggler).init();Advanced usage
const toggler = document.getElementById('toggler');
const options = { transition: 200 }; // default is 150
const themeSwitcher = new ThemeSwitcher(toggler, isDark => {
isDark ?
toggler.setAttribute('src', '/path/to/sun-icon.png') :
toggler.setAttribute('src', '/path/to/moon-icon.png');
}, options);
themeSwitcher.init();It automatically creates a draggable button to switch the theme.
Its constructor has an unique parameter:
options?: GeneratorInitOptions- Object with options to customize the button
Basic usage
new ThemeSwitcherGenerator().init();Advanced usage
new ThemeSwitcherGenerator({
transition: 100,
glow: true,
glowColor: '#fa4d5f',
backgroundColor: '#fafafa',
boxShadow: 'none',
sunIconUrl: 'https://link.to.icon/sun.png',
moonIconUrl: 'https://link.to.icon/moon.png',
size: 40,
contextMenuOptions: {
width: '100px',
height: '30px',
padding: '15px',
textColor: '#121212',
background: '#ccc',
boxShadow: '0px 5px 10px 0px rgba(77,77,77,0.16)',
borderRadius: '15px'
},
//useDefaultContextMenu: true // Disable context menu provided by dark-theme-switcher
}).init();