webmail-client/frontend/src/components/ThemeToggle.tsx

import { useT } from "../i18n";
import { useTheme } from "../lib/theme";

// Quick light/dark flip (the full light/dark/system selector lives in Settings).
export function ThemeToggle() {
  const t = useT();
  const { resolved, setTheme } = useTheme();
  return (
    <button
      className="inline-flex h-7 w-7 items-center justify-center rounded text-app-muted hover:bg-app-hover hover:text-app-fg"
      title={t("theme.toggle")}
      aria-label={t("theme.toggle")}
      onClick={() => setTheme(resolved === "dark" ? "light" : "dark")}
    >
      {resolved === "dark" ? "☀" : "☾"}
    </button>
  );
}