ActiveThemeProvider() — ui Function Reference

Architecture documentation for the ActiveThemeProvider() function in active-theme.tsx from the ui codebase.

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ ActiveThemeProvider() — ui Function Reference

Dependency Diagram

graph TD
  31ed10bc_a7b6_c95c_b751_de7d59e43e31["ActiveThemeProvider()"]
  3ee3a001_834b_9fc3_9ee9_c178663ea003["active-theme.tsx"]
  31ed10bc_a7b6_c95c_b751_de7d59e43e31 -->|defined in| 3ee3a001_834b_9fc3_9ee9_c178663ea003
  style 31ed10bc_a7b6_c95c_b751_de7d59e43e31 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/active-theme.tsx lines 20–48

export function ActiveThemeProvider({
  children,
  initialTheme,
}: {
  children: ReactNode
  initialTheme?: string
}) {
  const [activeTheme, setActiveTheme] = useState<string>(
    () => initialTheme || DEFAULT_THEME
  )

  useEffect(() => {
    Array.from(document.body.classList)
      .filter((className) => className.startsWith("theme-"))
      .forEach((className) => {
        document.body.classList.remove(className)
      })
    document.body.classList.add(`theme-${activeTheme}`)
    if (activeTheme.endsWith("-scaled")) {
      document.body.classList.add("theme-scaled")
    }
  }, [activeTheme])

  return (
    <ThemeContext.Provider value={{ activeTheme, setActiveTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}