@arizeai/phoenix-mcp

import { Moon, Sun } from "lucide-react"; import { useTheme } from "../contexts/ThemeContext.js"; export function ThemeToggle() { const { theme, toggleTheme } = useTheme(); return ( <button onClick={toggleTheme} className="flex items-center justify-center w-9 h-9 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" title={`Switch to ${theme === "light" ? "dark" : "light"} mode`} > {theme === "light" ? ( <Moon className="w-4 h-4 text-gray-600 dark:text-gray-300" /> ) : ( <Sun className="w-4 h-4 text-gray-600 dark:text-gray-300" /> )} </button> ); }