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

Category: Javascript , Recommended | June 20, 2019
Views Total:3,565 views
Official Page:Go to website
Last Update:June 20, 2019


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


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 install darkmode-js --save

Import the Darkmode.js.

// ES module
<-- Or -->
<script src="lib/darkmode-js.js"></script>
<-- Or from a CDN -->
<script src="[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.


Toggle the dark mode programmatically.


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