Usage

React + Zustand

import { create } from 'zustand';
import Darkify from 'darkify-js';
let d = new Darkify('', {
 autoMatchTheme: true,
 // useLocalStorage: default is true
 // useSessionStorage: default is false
 // useColorScheme: default is ['#ffffff', '#000000']
});
const useThemeStore = create<{
 theme: string;
 toggleTheme: () => void;
}>((set) => ({
 theme: d.getCurrentTheme(),
 toggleTheme: () => {
 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;
 }
}