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.1 (06/05/2026)

• Renamed to Umbra