Usage

React

import { createContext, useContext, useState, type ReactNode } from 'react';
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 ThemeContext = createContext<{
 theme: string;
 toggleTheme: () => void;
} | null>(null);
export const ThemeProvider = ({ children }: { children: ReactNode }) => {
 const [theme, setTheme] = useState<string>(() => d.getCurrentTheme());
 const toggleTheme = () => {
 d.toggleTheme();
 setTheme(d.getCurrentTheme());
 };
 return (
 <ThemeContext.Provider value={{ theme, toggleTheme }}>
 {children}
 </ThemeContext.Provider>
 );
};
export const useTheme = () => {
 const context = useContext(ThemeContext);
 if (!context) {
 throw new Error('useTheme must be used within a ThemeProvider');
 }
 return context;
};

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;
 }
}