getTheme() — supabase Function Reference

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

Function tsx ContentManagement MediaManagement called by 1

Entity Profile

ContentManagement→ MediaManagement→ getTheme() — supabase Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/studio/components/interfaces/App/MonacoThemeProvider.tsx lines 5–24

const getTheme = (theme: string) => {
  const isDarkMode = theme.includes('dark')
  // [TODO] Probably need better theming for light mode
  return {
    base: isDarkMode ? ('vs-dark' as const) : ('vs' as const), // can also be vs-dark or hc-black
    inherit: true, // can also be false to completely replace the builtin rules
    rules: [
      { token: '', background: isDarkMode ? '1f1f1f' : 'f0f0f0' },
      {
        token: '',
        background: isDarkMode ? '1f1f1f' : 'f0f0f0',
        foreground: isDarkMode ? 'd4d4d4' : '444444',
      },
      { token: 'string.sql', foreground: '24b47e' },
      { token: 'comment', foreground: '666666' },
      { token: 'predefined.sql', foreground: isDarkMode ? 'D4D4D4' : '444444' },
    ],
    colors: { 'editor.background': isDarkMode ? '#1f1f1f' : '#f0f0f0' },
  }
}