-
Notifications
You must be signed in to change notification settings - Fork 0
Home
Emilio Romero edited this page Jun 6, 2026
·
41 revisions
Umbra is a lightweight library designed to implement dark mode on any website with minimal configuration.
<script src="https://unpkg.com/@emrocode/umbra/dist/umbra.umd.js"></script> <script type="text/javascript"> var umbra = new Umbra('button'); console.info(umbra); </script>
To install umbra in your project, you can use npm or any other package manager:
npm install @emrocode/umbra
Create a button with any ID
<button id="element" type="button">Toggle theme</button>
In your main.js file set some options
// main.js import Umbra from '@emrocode/umbra' const options = { autoMatchTheme: true, // useColorScheme: ['#ffffff', '#000000'], // useStorage: 'local', // usePlugins: [] }; var umbra = new Umbra('#element', options)
You have full control over css
:root { --background: #fff; --foreground: #000; } :root:where([data-theme='dark']) { --background: #000; --foreground: #fff; } html, body { background-color: var(--background); color: var(--foreground); }
| Option | Type | Description |
|---|---|---|
| autoMatchTheme | Boolean | Automatically select the default system theme |
| useColorScheme | [string, string?] | Defines the color of the browser navigation bar on mobile devices to match the theme of your website |
| useStorage | 'local' | Use local storage (Stores data that persists beyond the current browser session) |
| useStorage | 'session' | Use session storage (Stores data that is only needed during the current browser session) |
| usePlugins | - | See plugins docs |