ThemeSwitcher() — ui Function Reference

Architecture documentation for the ThemeSwitcher() function in theme-switcher.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ThemeSwitcher() — ui Function Reference

Dependency Diagram

graph TD
  1d1c2256_0cbb_1d98_0c0c_e12b088f8ad5["ThemeSwitcher()"]
  75013c00_bd3d_e479_0a0e_fbe3db8f3726["theme-switcher.tsx"]
  1d1c2256_0cbb_1d98_0c0c_e12b088f8ad5 -->|defined in| 75013c00_bd3d_e479_0a0e_fbe3db8f3726
  style 1d1c2256_0cbb_1d98_0c0c_e12b088f8ad5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/theme-switcher.tsx lines 8–26

export function ThemeSwitcher() {
  const [config] = useConfig()
  const segment = useSelectedLayoutSegment()

  React.useEffect(() => {
    document.body.classList.forEach((className) => {
      if (className.match(/^theme.*/)) {
        document.body.classList.remove(className)
      }
    })

    const theme = segment === "themes" ? config.theme : null
    if (theme) {
      return document.body.classList.add(`theme-${theme}`)
    }
  }, [segment, config])

  return null
}