VibeColors

Color themes

• 

  VibeColors Auto Dark

• 

  VibeColors Auto Light

• 

  VibeColors Corporate Light

• 

  VibeColors Dark

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.activeBackground#ecf0f1
• activityBar.activeBorder#3498db
• activityBar.background#f8f9fa
• activityBar.foreground#7f8c8d
• activityBarBadge.background#3498db
• activityBarBadge.foreground#ffffff
• badge.background#3498db
• badge.foreground#ffffff
• button.background#3498db
• button.foreground#ffffff
• button.hoverBackground#2980b9
• diffEditor.insertedTextBackground#27ae6020
• diffEditor.removedTextBackground#e74c3c20
• editor.background#ffffff
• editor.findMatchBackground#3498db40
• editor.findMatchHighlightBackground#3498db20
• editor.foreground#2c3e50
• editor.lineHighlightBackground#fafbfc
• editor.selectionBackground#ecf0f1
• editor.selectionHighlightBackground#ecf0f160
• editor.wordHighlightBackground#f8f9fa40
• editor.wordHighlightStrongBackground#f8f9fa60
• editorBracketMatch.background#ecf0f1
• editorBracketMatch.border#34495e
• editorCursor.foreground#2c3e50
• editorError.foreground#e74c3c
• editorHint.foreground#27ae60
• editorIndentGuide.activeBackground1#ecf0f1
• editorIndentGuide.background1#f1f2f6
• editorInfo.foreground#3498db
• editorLineNumber.activeForeground#34495e
• editorLineNumber.foreground#bdc3c7
• editorRuler.foreground#f1f2f6
• editorSuggestWidget.background#ffffff
• editorSuggestWidget.border#bdc3c7
• editorSuggestWidget.selectedBackground#ecf0f1
• editorWarning.foreground#f39c12
• editorWhitespace.foreground#f1f2f6
• editorWidget.background#ffffff
• editorWidget.border#bdc3c7
• extensionButton.prominentBackground#3498db
• extensionButton.prominentForeground#ffffff
• extensionButton.prominentHoverBackground#2980b9
• gitDecoration.conflictingResourceForeground#9b59b6
• gitDecoration.deletedResourceForeground#e74c3c
• gitDecoration.modifiedResourceForeground#f39c12
• gitDecoration.untrackedResourceForeground#27ae60
• input.background#ffffff
• input.border#bdc3c7
• input.foreground#2c3e50
• input.placeholderForeground#95a5a6
• list.activeSelectionBackground#ecf0f1
• list.activeSelectionForeground#2c3e50
• list.focusBackground#ecf0f1
• list.hoverBackground#fafbfc
• list.inactiveSelectionBackground#f8f9fa
• notificationLink.foreground#3498db
• notifications.background#ffffff
• notifications.border#bdc3c7
• notifications.foreground#2c3e50
• panel.background#ffffff
• panel.border#ecf0f1
• panelTitle.activeBorder#3498db
• panelTitle.activeForeground#2c3e50
• panelTitle.inactiveForeground#7f8c8d
• peekView.border#3498db
• peekViewEditor.background#fafbfc
• peekViewResult.background#ffffff
• peekViewTitle.background#f8f9fa
• progressBar.background#3498db
• scrollbarSlider.activeBackground#7f8c8dc0
• scrollbarSlider.background#bdc3c780
• scrollbarSlider.hoverBackground#95a5a6a0
• sideBar.background#f8f9fa
• sideBar.foreground#7f8c8d
• sideBarSectionHeader.background#ffffff
• sideBarSectionHeader.foreground#34495e
• sideBarTitle.foreground#2c3e50
• statusBar.background#f8f9fa
• statusBar.foreground#7f8c8d
• statusBarItem.activeBackground#ecf0f1
• statusBarItem.hoverBackground#e8eaed
• tab.activeBackground#ffffff
• tab.activeBorder#3498db
• tab.activeForeground#2c3e50
• tab.border#ecf0f1
• tab.inactiveBackground#f8f9fa
• tab.inactiveForeground#7f8c8d
• terminal.ansiBlack#7f8c8d
• terminal.ansiBlue#3498db
• terminal.ansiCyan#1abc9c
• terminal.ansiGreen#27ae60
• terminal.ansiMagenta#9b59b6
• terminal.ansiRed#e74c3c
• terminal.ansiWhite#2c3e50
• terminal.ansiYellow#f39c12
• terminal.background#ffffff
• terminal.foreground#2c3e50
• titleBar.activeBackground#ffffff
• titleBar.activeForeground#2c3e50
• titleBar.inactiveBackground#f8f9fa
• titleBar.inactiveForeground#95a5a6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).