ModeToggle() — ui Function Reference

Architecture documentation for the ModeToggle() function in mode-toggle.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ModeToggle() — ui Function Reference

Dependency Diagram

graph TD
  8ef164f6_3f52_aed4_02a4_4d5b9e1dfa7f["ModeToggle()"]
  8495ef2a_9820_0503_96f0_857e0951f357["mode-toggle.tsx"]
  8ef164f6_3f52_aed4_02a4_4d5b9e1dfa7f -->|defined in| 8495ef2a_9820_0503_96f0_857e0951f357
  style 8ef164f6_3f52_aed4_02a4_4d5b9e1dfa7f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(examples)/dashboard-03/components/mode-toggle.tsx lines 9–28

export function ModeToggle() {
  const { setTheme, resolvedTheme } = useTheme()

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

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