Handling Browser/OS Dark Mode With Darkmode.js

Category: Javascript , Recommended | May 7, 2020
Views Total:368 views
Official Page:Go to website
Last Update:May 7, 2020


Handling Browser/OS Dark Mode With Darkmode.js


Darkmode.js is a native JavaScript to check and set browser/OS dark mode in an easy way.

How to use it:

1. Install the package.

$ npm install @kazzkiq/darkmode --save

2. Import the following modules from the package.

import * as DarkMode from '@kazzkiq/darkmode';
// or
import { setDark, isDark, isDarkLocal, onUpdate } from '@kazzkiq/darkmode';

3. Or load the UMD version of the Darkmode.js in the document.

<script src="/path/to/dist/darkmode.umd.js"></script>

4. Check if the browser is in dark mode. Returns true or false.

// based on browser/OS settings
const isDarkMode = isDark();
// based on local storage
const isDarkMode = isDarkLocal();

5. Set/reset the dark mode.

// use dark mode
// reset

6. Fire an event when you toggle dark mode.

onUpdate((isDark) => {
  // do something

You Might Be Interested In:

Leave a Reply