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

v3.x

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

v4.x

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