Add Dark Mode To Webpage Using CSS mix-blend-mode – Darkmode.js

Category: Javascript , Recommended | June 20, 2019
Author: sandoche
Views Total: 254
Official Page: Go to website
Last Update: June 20, 2019
License: MIT

Preview:

Add Dark Mode To Webpage Using CSS mix-blend-mode – Darkmode.js

Description:

Darkmode.Js is an easy-to-use JavaScript Dark Mode library which turns your webpage to dark (night) mode. Highly customizable and cookies enabled.

The library makes use of CSS mix-blend-mode to automatically reverse the text color when the dark mode is activated.

How to use it:

Install the Darkmode.js.

# NPM
$ npm install darkmode-js --save

Import the Darkmode.js.

// ES module
<-- Or -->
<script src="lib/darkmode-js.js"></script>
<-- Or from a CDN -->
<script src="https://unpkg.com/[email protected]/lib/darkmode-js.js"></script>

Initialize the Darkmode.js.

const darkmode = new Darkmode();

Generate a floating toggle button on the screen to toggle the dark mode.

darkmode.showWidget();

Toggle the dark mode programmatically.

darkmode.toggle();

Ignore specific element by adding the CSS class darkmode-ignore class.

<div class="darkmode-ignore">Element To Ignore</div>

Available options to customize the dark mode.

const darkmode = new Darkmode({

      // the position of the toggle button
      bottom: '32px',
      right: '32px',
      left: '32px',

      // the icon displayed in the toggle button
      label: ''

      // transition speed in seconds
      time: '0.5s', 

      // colors
      mixColor: '#fff', 
      backgroundColor: '#fff', 
      buttonColorDark: '#100f2c', 
      buttonColorLight: '#fff',

      // save the dark mode in cookies
      saveInCookies: true
      
});

You Might Be Interested In:


Leave a Reply