cronmaster/app/_components/FeatureComponents/Theme/ThemeToggle.tsx

'use client'

import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';

export const ThemeToggle = () => {
  const [mounted, setMounted] = useState(false);
  const { theme, setTheme } = useTheme();

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  const isDark = theme === 'dark';

  return (
    <button
      onClick={() => setTheme(isDark ? 'light' : 'dark')}
      className="px-3 py-2 ascii-border terminal-font text-sm bg-background0"
    >
      {isDark ? 'LIGHT' : 'DARK'}
    </button>
  );
};