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
$ 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
      
});