Home

Welcome to the darkify-js wiki!

Darkify is a lightweight library that allows you to easily implement a dark mode on your website with minimal configuration.

📦 Installation

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

npm install darkify-js

⚙️ Setup

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;
  --foreground: #000;
}

:root:is([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
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

Example usage

• Vite (Vanilla)
• Vite (React)

Community articles

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