Minimal Automatic Dark Mode Library – Umbra

Umbra (formerly 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 umbra library.

# NPM
$ npm i @emrocode/umbra

import Umbra from '@emrocode/umbra';

2. Create a new umbra 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 Umbra('#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 Umbra('#toggle', {
    autoMatchTheme: true,
    useLocalStorage: true,
    useSessionStorage: false,
    useColorScheme: ['#ffffff', '#000000'],
})

Changelog:

v1.0.21 (07/13/2026)

• Respect useStorage before enabling theme sync between tabs
• Only auto-match system theme when autoMatchTheme is enabled
• Avoid redundant theme re-application when theme is unchanged

v1.0.1 (06/05/2026)

• Renamed to Umbra