MonacoThemeProvider() — supabase Function Reference

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

Function tsx ContentManagement AccessControl calls 1

Entity Profile

ContentManagement→ AccessControl→ MonacoThemeProvider() — supabase Function Reference

Dependency Diagram

graph TD
  6975edb4_4082_8be0_b33c_da17e9b58a74["MonacoThemeProvider()"]
  ed056265_d7d2_e15f_b7c1_2197c6a789a5["getTheme()"]
  6975edb4_4082_8be0_b33c_da17e9b58a74 -->|calls| ed056265_d7d2_e15f_b7c1_2197c6a789a5
  style 6975edb4_4082_8be0_b33c_da17e9b58a74 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/App/MonacoThemeProvider.tsx lines 30–44

export const MonacoThemeProvider = () => {
  const monaco = useMonaco()
  const { resolvedTheme } = useTheme()

  // Define the supabase theme for Monaco before anything is rendered. Using useEffect would sometime load the theme
  // after the editor was loaded, so it looked off. useMemo will always be run before rendering
  useMemo(() => {
    if (monaco && resolvedTheme) {
      const mode = getTheme(resolvedTheme)
      monaco.editor.defineTheme('supabase', mode)
    }
  }, [resolvedTheme, monaco])

  return null
}