Zustand theme set

Here’s a simple and persistent Zustand hook for managing theme (e.g., "light" or "dark"). It uses zustand with the persist middleware to save the theme to localStorage.

✅ useTheme.ts — Zustand Hook

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

type Theme = 'light' | 'dark';

type ThemeStore = {
  theme: Theme;
  setTheme: (theme: Theme) => void;
  toggleTheme: () => void;
};

const useTheme = create<ThemeStore>()(
  persist(
    (set, get) => ({
      theme: 'light',

      setTheme: (theme: Theme) => set({ theme }),

      toggleTheme: () =>
        set({ theme: get().theme === 'light' ? 'dark' : 'light' }),
    }),
    {
      name: 'theme-store', // key in localStorage
    }
  )
);

export default useTheme;

✅ Example Usage

'use client';

import useTheme from '@/hooks/useTheme';

export default function ThemeToggle() {
  const { theme, toggleTheme } = useTheme();

  return (
    <button
      onClick={toggleTheme}
      className="p-2 rounded border"
    >
      Toggle Theme (Current: {theme})
    </button>
  );
}

✅ Optional Enhancements

• Sync with document.documentElement.classList for Tailwind CSS dark mode:

useEffect(() => {
  document.documentElement.classList.toggle('dark', theme === 'dark');
}, [theme]);

• Add system theme option (auto-detect from OS)

Let me know if you want that system detection or Tailwind CSS integration!