VibeColors

Color themes

• 

  VibeColors Minimal Light

• 

  VibeColors Neon Dark

• 

  VibeColors Ocean Dark

• 

  VibeColors Pastel 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.activeBackground#e8e8e8
• activityBar.activeBorder#333333
• activityBar.background#f0f0f0
• activityBar.foreground#666666
• activityBarBadge.background#333333
• activityBarBadge.foreground#ffffff
• badge.background#333333
• badge.foreground#ffffff
• button.background#333333
• button.foreground#ffffff
• button.hoverBackground#555555
• diffEditor.insertedTextBackground#00990020
• diffEditor.removedTextBackground#cc000020
• editor.background#fafafa
• editor.findMatchBackground#dddddd
• editor.findMatchHighlightBackground#dddddd60
• editor.foreground#333333
• editor.lineHighlightBackground#f5f5f5
• editor.selectionBackground#e8e8e8
• editor.selectionHighlightBackground#e8e8e860
• editor.wordHighlightBackground#e8e8e840
• editor.wordHighlightStrongBackground#e8e8e860
• editorBracketMatch.background#e8e8e8
• editorBracketMatch.border#666666
• editorCursor.foreground#333333
• editorError.foreground#cc0000
• editorHint.foreground#009900
• editorIndentGuide.activeBackground1#cccccc
• editorIndentGuide.background1#eeeeee
• editorInfo.foreground#0066cc
• editorLineNumber.activeForeground#666666
• editorLineNumber.foreground#cccccc
• editorRuler.foreground#eeeeee
• editorSuggestWidget.background#ffffff
• editorSuggestWidget.border#cccccc
• editorSuggestWidget.selectedBackground#e8e8e8
• editorWarning.foreground#ff9900
• editorWhitespace.foreground#eeeeee
• editorWidget.background#ffffff
• editorWidget.border#cccccc
• extensionButton.prominentBackground#333333
• extensionButton.prominentForeground#ffffff
• extensionButton.prominentHoverBackground#555555
• gitDecoration.conflictingResourceForeground#9900cc
• gitDecoration.deletedResourceForeground#cc0000
• gitDecoration.modifiedResourceForeground#ff9900
• gitDecoration.untrackedResourceForeground#009900
• input.background#ffffff
• input.border#cccccc
• input.foreground#333333
• input.placeholderForeground#999999
• list.activeSelectionBackground#e8e8e8
• list.activeSelectionForeground#333333
• list.focusBackground#e8e8e8
• list.hoverBackground#f0f0f0
• list.inactiveSelectionBackground#f5f5f5
• notificationLink.foreground#0066cc
• notifications.background#ffffff
• notifications.border#cccccc
• notifications.foreground#333333
• panel.background#fafafa
• panel.border#e8e8e8
• panelTitle.activeBorder#333333
• panelTitle.activeForeground#333333
• panelTitle.inactiveForeground#666666
• peekView.border#333333
• peekViewEditor.background#f5f5f5
• peekViewResult.background#fafafa
• peekViewTitle.background#e8e8e8
• progressBar.background#333333
• scrollbarSlider.activeBackground#666666c0
• scrollbarSlider.background#cccccc80
• scrollbarSlider.hoverBackground#999999a0
• sideBar.background#f0f0f0
• sideBar.foreground#666666
• sideBarSectionHeader.background#fafafa
• sideBarSectionHeader.foreground#333333
• sideBarTitle.foreground#333333
• statusBar.background#f0f0f0
• statusBar.foreground#666666
• statusBarItem.activeBackground#e8e8e8
• statusBarItem.hoverBackground#dddddd
• tab.activeBackground#fafafa
• tab.activeBorder#333333
• tab.activeForeground#333333
• tab.border#e8e8e8
• tab.inactiveBackground#f0f0f0
• tab.inactiveForeground#666666
• terminal.ansiBlack#666666
• terminal.ansiBlue#0066cc
• terminal.ansiCyan#0099cc
• terminal.ansiGreen#009900
• terminal.ansiMagenta#9900cc
• terminal.ansiRed#cc0000
• terminal.ansiWhite#333333
• terminal.ansiYellow#ff9900
• terminal.background#fafafa
• terminal.foreground#333333
• titleBar.activeBackground#fafafa
• titleBar.activeForeground#333333
• titleBar.inactiveBackground#f0f0f0
• titleBar.inactiveForeground#999999

tokenColors

TextMate scopes and font styles (syntax highlighting rules).