ModeSwitcher() — ui Function Reference

Architecture documentation for the ModeSwitcher() function in mode-switcher.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ModeSwitcher() — ui Function Reference

Dependency Diagram

graph TD
  5b3ae669_3071_cf2e_ad36_00078a967a3e["ModeSwitcher()"]
  aadbd60f_8438_6522_8e1e_62875148352e["mode-switcher.tsx"]
  5b3ae669_3071_cf2e_ad36_00078a967a3e -->|defined in| aadbd60f_8438_6522_8e1e_62875148352e
  style 5b3ae669_3071_cf2e_ad36_00078a967a3e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/mode-switcher.tsx lines 11–35

export function ModeSwitcher() {
  const { setTheme, resolvedTheme } = useTheme()
  const { setMetaColor } = useMetaColor()

  const toggleTheme = React.useCallback(() => {
    setTheme(resolvedTheme === "dark" ? "light" : "dark")
    setMetaColor(
      resolvedTheme === "dark"
        ? META_THEME_COLORS.light
        : META_THEME_COLORS.dark
    )
  }, [resolvedTheme, setTheme, setMetaColor])

  return (
    <Button
      variant="ghost"
      className="group/toggle h-8 w-8 px-0"
      onClick={toggleTheme}
    >
      <SunIcon className="hidden [html.dark_&]:block" />
      <MoonIcon className="hidden [html.light_&]:block" />
      <span className="sr-only">Toggle theme</span>
    </Button>
  )
}