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

:root[data-theme="dark"] {
  --background: #000;
  --text: #fff;
}

html,
body {
  background-color: var(--background);
  color: var(--text);
}

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

Use with Tailwind CSS

v3.x

// tailwind.config.js
darkMode: ['selector', '[data-theme="dark"]']

v4.x

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

@theme {
  --color-background: #fff;
  --color-body: #000;
}

@layer theme {
  :root {
    @variant dark {
      --color-background: #000;
      --color-body: #fff;
    }
  }
}

@layer base {
  html,
  body {
    @apply bg-background text-body;
  }
}

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/