The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×


    🌓 Add a dark-mode / night-mode to your website in a few seconds
    Filed under 

    • 🔾61%Overall
    • 2,703
    • 18 days
    • 🕩175
    • 👥16


    npm version npm downloads License Medium Badge Twitter: sandochee

    🌓 Add a Dark Mode / Night Mode to your website in a few seconds

    This library uses the CSS mix-blend-mode to bring Dark Mode to any of your websites. Just copy-paste the snippet and you will get a widget to turn on and off the Dark Mode. You can also use it without the widget programmatically. The plugin is lightweight, built-in Vanilla. It also uses local storage by default, so your last setting will be remembered!

    I have been inspired by this article:


    • Widget appears automatically
    • Saving users choice
    • Automatically shows Darkmode if the OS preferred theme is dark (if the browsers support prefers-color-scheme)
    • Can be used programmatically without widget

    ✨ Demo

    Check out the demo in these websites:

    Wordpress plugins

    If you are using Wordpress you may want to have a look at these plugins based on Darkmode.js:

    Drupal plugin

    If you are using Drupal you may want to have a look at this plugin based on Darkmode.js:

    Nuxt.js module

    If you are using Nuxt.js there is a module for Darkmode.js:

    📖 How to use

    Darkmode.js is very easy to use, just copy-paste the following code or use the npm package.

    🚀 Easy way (using the JSDelivr CDN)

    Just add this code to your HTML page:

    <script src=""></script>
      function addDarkmodeWidget() {
        new Darkmode().showWidget();
      window.addEventListener('load', addDarkmodeWidget);

    📦 Using NPM

    npm install darkmode-js

    Then add the following JavaScript code:

    import Darkmode from 'darkmode-js';
    new Darkmode().showWidget();

    ⚙️ Options

    Here are the option availables:

    const options = {
      bottom: '64px', // default: '32px'
      right: 'unset', // default: '32px'
      left: '32px', // default: 'unset'
      time: '0.5s', // default: '0.3s'
      mixColor: '#fff', // default: '#fff'
      backgroundColor: '#fff',  // default: '#fff'
      buttonColorDark: '#100f2c',  // default: '#100f2c'
      buttonColorLight: '#fff', // default: '#fff'
      saveInCookies: false, // default: true,
      label: '🌓', // default: ''
      autoMatchOsTheme: true // default: true
    const darkmode = new Darkmode(options);

    ▶️ Methods

    If you don't want to show the widget and enable/disable Darkmode programatically you can use the method toggle(). You can also check if the Dark Mode is activated with the method isActivated(). See them in action in the following example:

    const darkmode =  new Darkmode();
    console.log(darkmode.isActivated()) // will return true

    Override style

    • A CSS class darkmode--activated is added to the body tag when the darkmode is activated. You can take advantage of it to override the style and have a custom style
    • Use the class darkmode-ignore where you don't want to apply darkmode
    • You can also add this style: isolation: isolate; in your CSS, this will also ignore the darkmode.
    • It is also possible to revert the Dark Mode with this style mix-blend-mode: difference;


    .darkmode--activated p, .darkmode--activated li {
      color: #000;
    .button {
      isolation: isolate;
    .darkmode--activated .logo {
      mix-blend-mode: difference;
    <span class="darkmode-ignore">😬<span>


    If it does not work you may have to add the following code, but this will invalidate the classes to override.

    .darkmode-layer, .darkmode-toggle {
      z-index: 500;

    Browser compatibility

    This library uses the CSS mix-blend-mode: difference; to provide the Dark Mode. It may not be compatible with all the browsers. Therefore the widget has been hidden in Internet Explorer and Edge. This library also uses prefers-color-scheme: dark to automatically enable the Dark Mode if the OS prefered theme is dark.

    Check the compatibility here:


    • yarn build or npm run build - produces a production version of your library under the lib folder
    • yarn dev or npm run dev - produces development version of your library and runs a watcher
    • yarn test or npm run test - it runs the tests :)
    • yarn test:watch or npm run test:watch - same as above but in a watch mode

    ⭐️ Show your support

    Please ⭐️ this repository if this project helped you!


    🍺 Buy me a beer

    If you like this project, feel free to donate:

    • PayPal:
    • Bitcoin: 19JiNZ1LkMaz57tewqJaTg2hQWH4RgW4Yp
    • Ethereum: 0xded81fa4624e05339924355fe3504ba9587d5419
    • Monero: 43jqzMquW2q989UKSrB2YbeffhmJhbYb2Yxu289bv7pLRh4xVgMKj5yTd52iL6x1dvCYs9ERg5biHYxMjGkpSTs6S2jMyJn
    • Motive: MOTIV-25T5-SD65-V7LJ-BBWRD (Get Motive Now:

    📄 License

    MIT License

    Copyright (c) Sandoche Adittane

    Show All