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
  c6c4e076_6849_cf7b_23a0_bbcaec0ca838["ModeToggle()"]
  542fbef8_4ac5_3155_5442_a4c949d645e8["mode-toggle.tsx"]
  c6c4e076_6849_cf7b_23a0_bbcaec0ca838 -->|defined in| 542fbef8_4ac5_3155_5442_a4c949d645e8
  style c6c4e076_6849_cf7b_23a0_bbcaec0ca838 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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

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}
    >
      <IconBrightness />
      <span className="sr-only">Toggle theme</span>
    </Button>
  )
}