Ispired by Supabase

Color themes

• 

  Supabase Dark

• 

  Supabase Light

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

• activityBar.background#121212
• activityBar.foreground#898989
• activityBarBadge.background#006239
• activityBarBadge.foreground#dde8e3
• badge.background#006239
• badge.foreground#dde8e3
• button.background#006239
• button.foreground#dde8e3
• button.hoverBackground#004d2d
• dropdown.background#242424
• dropdown.border#292929
• dropdown.foreground#fafafa
• editor.background#121212
• editor.foreground#e2e8f0
• editor.inactiveSelectionBackground#1f1f1f
• editor.lineHighlightBackground#1f1f1f
• editor.selectionBackground#313131
• editorCursor.foreground#4ade80
• editorGroup.border#292929
• editorIndentGuide.activeBackground#4ade80
• editorIndentGuide.background#292929
• editorLineNumber.activeForeground#fafafa
• editorLineNumber.foreground#898989
• editorWhitespace.foreground#292929
• errorForeground#541c15
• focusBorder#4ade80
• input.background#242424
• input.border#292929
• input.foreground#fafafa
• list.activeSelectionBackground#313131
• list.activeSelectionForeground#fafafa
• list.hoverBackground#1f1f1f
• list.hoverForeground#fafafa
• panel.background#121212
• panel.border#292929
• peekViewEditor.matchHighlightBackground#4ade8033
• peekViewResult.matchHighlightBackground#4ade8033
• scrollbar.shadow#00000066
• sideBar.background#121212
• sideBar.border#292929
• sideBar.foreground#898989
• sideBarTitle.foreground#fafafa
• statusBar.background#171717
• statusBar.border#292929
• statusBar.foreground#898989
• tab.activeBackground#171717
• tab.activeForeground#fafafa
• tab.border#292929
• tab.inactiveBackground#121212
• tab.inactiveForeground#898989
• titleBar.activeBackground#171717
• titleBar.activeForeground#fafafa
• titleBar.inactiveBackground#121212
• titleBar.inactiveForeground#898989

tokenColors

TextMate scopes and font styles (syntax highlighting rules).