Home / Function/ ThemeProvider() — supabase Function Reference

ThemeProvider() — supabase Function Reference

Architecture documentation for the ThemeProvider() function in index.tsx from the supabase codebase.

Function tsx ContentManagement Migrations calls 2

Entity Profile

Dependency Diagram

graph TD
  e2d3eba8_76c5_f344_265b_478004793260["ThemeProvider()"]
  04e23bd9_35be_f55e_3b0c_6d65f736ceb6["getImplicitPreference()"]
  e2d3eba8_76c5_f344_265b_478004793260 -->|calls| 04e23bd9_35be_f55e_3b0c_6d65f736ceb6
  29fe6874_9fd6_0383_b38f_8a2ce5779097["themeIsValid()"]
  e2d3eba8_76c5_f344_265b_478004793260 -->|calls| 29fe6874_9fd6_0383_b38f_8a2ce5779097
  style e2d3eba8_76c5_f344_265b_478004793260 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/cms/src/providers/Theme/index.tsx lines 17–54

export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
  const [theme, setThemeState] = useState<Theme | undefined>(
    canUseDOM ? (document.documentElement.getAttribute('data-theme') as Theme) : undefined
  )

  const setTheme = useCallback((themeToSet: Theme | null) => {
    if (themeToSet === null) {
      window.localStorage.removeItem(themeLocalStorageKey)
      const implicitPreference = getImplicitPreference()
      document.documentElement.setAttribute('data-theme', implicitPreference || '')
      if (implicitPreference) setThemeState(implicitPreference)
    } else {
      setThemeState(themeToSet)
      window.localStorage.setItem(themeLocalStorageKey, themeToSet)
      document.documentElement.setAttribute('data-theme', themeToSet)
    }
  }, [])

  useEffect(() => {
    let themeToSet: Theme = defaultTheme
    const preference = window.localStorage.getItem(themeLocalStorageKey)

    if (themeIsValid(preference)) {
      themeToSet = preference
    } else {
      const implicitPreference = getImplicitPreference()

      if (implicitPreference) {
        themeToSet = implicitPreference
      }
    }

    document.documentElement.setAttribute('data-theme', themeToSet)
    setThemeState(themeToSet)
  }, [])

  return <ThemeContext.Provider value={{ setTheme, theme }}>{children}</ThemeContext.Provider>
}

Domain

Subdomains

Calls

Source

Frequently Asked Questions

What does ThemeProvider() do?
ThemeProvider() is a function in the supabase codebase.
What does ThemeProvider() call?
ThemeProvider() calls 2 function(s): getImplicitPreference, themeIsValid.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free