Home
Create an easy dark mode
for your site
Darkify is a lightweight library that allows you to easily implement a dark mode on your website with minimal configuration.
To install darkify-js in your project, you can use npm or any other package manager:
npm install darkify-jsCreate 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. See tailwindcss implementation
:root {
--background: #fff;
--foreground: #000;
}
:root:is([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 |
| 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 |