export function ThemeToggle()

in 3-ai-native-e2e-sample/frontend/src/components/theme-toggle.tsx [7:32]

24 lines of code
4 McCabe index (conditional complexity)


export function ThemeToggle() {
  const { theme, setTheme } = useTheme()
  
  const toggleTheme = () => {
    const newTheme = theme === "dark" ? "light" : "dark"
    setTheme(newTheme)
  }
  
  return (
    <Button
      variant="outline"
      size="icon"
      onClick={toggleTheme}
      className="transition-colors duration-200 hover:bg-accent hover:text-accent-foreground"
      title={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
      data-appid="theme-toggle"
    >
      <span className="sr-only">Toggle theme</span>
      {theme === "dark" ? (
        <SunIcon className="h-5 w-5 text-yellow-500 hover:text-yellow-400 transition-all duration-200" />
      ) : (
        <MoonIcon className="h-5 w-5 text-slate-700 hover:text-slate-900 transition-all duration-200" />
      )}
    </Button>
  )
}