Usage

React + Zustand

import { create } from "zustand";
import Darkify from "darkify-js";
let d: Darkify | undefined;
const useThemeStore = create((set) => {
 if (!d) {
 d = new Darkify("", {
 autoMatchTheme: true,
 // useLocalStorage: default is true
 // useSessionStorage: default is false
 // useColorScheme: default is ['#ffffff', '#000000']
 });
 }
 return {
 theme: d.getCurrentTheme(),
 toggleTheme: () => {
 if (d) {
 d.toggleTheme();
 set({ theme: d.getCurrentTheme() });
 }
 },
 };
});
export default useThemeStore;

TailwindCSS

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

@import "tailwindcss";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@theme {
 --color-background: #fff;
 --color-foreground: #000;
}
@variant dark {
 --color-background: #000;
 --color-foreground: #fff;
}
@layer base {
 html,
 body {
 @apply bg-background text-foreground;
 }
}