echoes/frontend/hooks/themeMode.tsx

import React, { useState, useEffect } from "react";
import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
import { Button } from "@radix-ui/themes";

const THEME_KEY = "theme-preference";

// 修改主题脚本，确保在服务端和客户端都能正确初始化
const themeScript = `
  (function() {
    try {
      const savedTheme = localStorage.getItem("${THEME_KEY}");
      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
      const theme = savedTheme || (prefersDark ? "dark" : "light");
      document.documentElement.dataset.theme = theme;
      document.documentElement.classList.remove('light', 'dark');
      document.documentElement.classList.add(theme);
    } catch (e) {
      console.error('[ThemeScript] Error:', e);
      document.documentElement.dataset.theme = 'light';
      document.documentElement.classList.remove('light', 'dark');
      document.documentElement.classList.add('light');
    }
  })()
`;

// ThemeScript 组件需要尽早执行
export const ThemeScript = () => {
  return (
    <script
      dangerouslySetInnerHTML={{
        __html: themeScript,
      }}
    />
  );
};

// 客户端专用的 hook
const useClientOnly = (callback: () => void, deps: any[] = []) => {
  useEffect(() => {
    if (typeof window !== "undefined") {
      callback();
    }
  }, deps);
};

export const ThemeModeToggle: React.FC = () => {
  const [mounted, setMounted] = useState(false);
  const [theme, setTheme] = useState<string>(() => {
    if (typeof document !== "undefined") {
      return document.documentElement.dataset.theme || "light";
    }
    return "light";
  });

  useClientOnly(() => {
    const currentTheme = document.documentElement.dataset.theme || "light";
    document.documentElement.classList.remove("light", "dark");
    document.documentElement.classList.add(currentTheme);
    setTheme(currentTheme);
    setMounted(true);
  }, []);

  useEffect(() => {
    if (!mounted) return;

    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");

    const handleSystemThemeChange = (e: MediaQueryListEvent) => {
      if (!localStorage.getItem(THEME_KEY)) {
        const newTheme = e.matches ? "dark" : "light";
        updateTheme(newTheme);
      }
    };

    mediaQuery.addEventListener("change", handleSystemThemeChange);
    return () =>
      mediaQuery.removeEventListener("change", handleSystemThemeChange);
  }, [mounted]);

  const updateTheme = (newTheme: string) => {
    document.documentElement.dataset.theme = newTheme;
    document.documentElement.classList.remove("light", "dark");
    document.documentElement.classList.add(newTheme);
    setTheme(newTheme);
  };

  const toggleTheme = () => {
    const newTheme = theme === "dark" ? "light" : "dark";
    updateTheme(newTheme);
    localStorage.setItem(THEME_KEY, newTheme);
  };

  if (!mounted) {
    return (
      <Button
        variant="ghost"
        className="w-full h-full p-0 rounded-lg transition-all duration-300 transform"
        aria-label="Theme toggle"
      >
        <MoonIcon className="w-full h-full" />
      </Button>
    );
  }

  return (
    <Button
      variant="ghost"
      onClick={toggleTheme}
      className="w-full h-full p-0 rounded-lg transition-all duration-300 transform"
      aria-label="Toggle theme"
    >
      {theme === "dark" ? (
        <SunIcon className="w-full h-full" />
      ) : (
        <MoonIcon className="w-full h-full" />
      )}
    </Button>
  );
};

export const useThemeMode = () => {
  const [mounted, setMounted] = useState(false);
  const [mode, setMode] = useState<"light" | "dark">("light");

  useClientOnly(() => {
    const handleThemeChange = () => {
      const currentTheme = document.documentElement.dataset.theme as
        | "light"
        | "dark";
      setMode(currentTheme || "light");
    };

    handleThemeChange();
    setMounted(true);

    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.attributeName === "data-theme") {
          handleThemeChange();
        }
      });
    });

    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["data-theme"],
    });

    return () => observer.disconnect();
  }, []);

  return { mode: mounted ? mode : "light" };
};