Minimal Automatic Dark Mode Library – Darkify

Preview:

Description:

Darkify is a simple, lightweight JavaScript/TypeScript library for enabling automatic dark mode on your websites and web applications.

It uses the CSS prefers-color-scheme media query to check the user’s color scheme preference and automatically toggle between light and dark modes. You can also remember user preferences through local storage or session storage to make sure your returning visitors always be greeted with their preferred viewing experience.

How to use it:

1. Install and import the Darkify.

# NPM
$ npm i darkify-js

import Darkify from 'darkify-js'

2. Create a new Darkify instance and specify the element used to switch between dark and light modes.

<button type="button" id="toggle">
  Toggle Dark Mode
</button>

var darkMode = new Darkify('#toggle')

3. Write CSS styles for dark and light modes.

:root {
  --pmcolor: #f1f0f9;
  --sdcolor: #fefefe;
  --ttcolor: #2e2e2e;
  --qncolor: #f5f5f5;
}
:root:is([data-theme='dark']) {
  --pmcolor: #2e2e2e;
  --sdcolor: #3b3b3b;
  --ttcolor: #e2e2e2;
  --qncolor: #484848;
}
html,
body {
  font-size: 100%;
  color: var(--ttcolor);
  background-color: var(--pmcolor);
}
...

4. Possible options:

var darkMode = new Darkify('#toggle', {
    autoMatchTheme: true,
    useLocalStorage: true,
    useSessionStorage: false,
})

Changelog:

v1.200 (10/30/2023)

• Minor changes
• Bug fixes

v1.100 (10/30/2023)

• Code optimization
• Bug fixes