Home

🌚 Welcome to Umbra wiki!

Umbra is a lightweight library designed to implement dark mode on any website with minimal configuration.

📦 Installation

To install umbra in your project, you can use npm or any other package manager:

npm install @emrocode/umbra

⚙️ Setup

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);
}

Options

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

Examples

• Vite (Vanilla)
• Vite (React)

Community articles

• cssscript.com/minimal-automatic-dark-mode
• breakdance4fun.supadezign.com/how-to-create-a-dark-mode-toggle-in-breakdance/