Minimal Automatic Dark Mode Library – Darkify

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,
    useColorScheme: ['#ffffff', '#000000'],
})

Changelog:

v1.1.12 (09/07/2025)

• Code optimization
• Set all Options properties as optional
• Prevent duplication of <meta> and <style> tags
• Exported Options types

v1.1.11 (09/07/2025)

• Code optimization

v1.1.5 (03/29/2025)

• Converted several functions to private class fields for encapsulation.
• Added new methods to handle theme synchronization and retrieve current theme.
• Renamed onClick() to toggleTheme() for better clarity.

v1.1.4 (09/30/2024)

• Code optimization
• The storage key darkify-theme is now theme

v1.1.3 (05/25/2024)

• Add additional outputs for improved compatibility

v1.1.2 (01/25/2024)

• Code optimization
• Bug fixes

v1.1.1 (12/18/2023)

• Code optimization
• Added use color scheme option
• Bug fixes

v1.1.0 (12/17/2023)

• Minor changes
• Bug fixes

v1.200 (10/30/2023)

• Minor changes
• Bug fixes

v1.100 (10/30/2023)

• Code optimization
• Bug fixes