Usage

React + Zustand

import { create } from 'zustand';
import Darkify from 'darkify-js';

let d: Darkify | undefined;

const useThemeStore = create<{
  theme: string;
  toggleTheme: () => void;
}>((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

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