Package Exports

dark-theme-switcher

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (dark-theme-switcher) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

dark-theme-switcher

The idea

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!

Installation

There are two ways to install this package:

using it directly in the browser or
installing it via npm

You decide! ;)

1. HTML

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>

2. npm

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';

Usage

`ThemeSwitcher`

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 isDark is a boolean that indicates if the current theme is dark
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();

`ThemeSwitcherGenerator`

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();