-
Notifications
You must be signed in to change notification settings - Fork 0
Home
Emilio Romero edited this page Sep 5, 2025
·
41 revisions
Darkify is a lightweight library that allows you to easily implement a dark mode on your website with minimal configuration.
To install Darkify in your project, you can use npm or any other package manager:
npm install darkify-js
Create a button with any ID
<button type="button" id="element">Toggle theme</button>
In your main.js file set some options
// main.js import Darkify from "darkify-js" const options = { autoMatchTheme: true, }; // autoMatchTheme: default is true // useLocalStorage: default is true // useSessionStorage: default is false // useColorScheme: default is ['#ffffff', '#000000'] var darkMode = new Darkify("#element", options)
You have full control over css
:root { --background: #fff; --text: #000; } :root[data-theme="dark"] { --background: #000; --text: #fff; } html, body { background-color: var(--background); color: var(--text); }
Use with Tailwind CSS
v3.x
// tailwind.config.js darkMode: ['selector', '[data-theme="dark"]']
v4.x
@import "tailwindcss"; @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); @theme { --color-background: #fff; --color-body: #000; } @variant dark { --color-background: #000; --color-body: #fff; } @layer base { html, body { @apply bg-background text-body; } }
| Option | Type | Description |
|---|---|---|
| autoMatchTheme | Boolean | Automatically select the default system theme |
| useLocalStorage | Boolean | Use local storage (Stores data that persists beyond the current browser session) |
| useSessionStorage | Boolean | Use session storage (Stores data that is only needed during the current browser session) |
| useColorScheme | String[] | Defines the color of the browser navigation bar on mobile devices to match the theme of your website |