Colin's VS Code Themes

Color themes

• 

  Matcha Grove

• 

  Neon Arcade

• 

  New Year Neon

• 

  Ocean Byte

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.activeBorder#a8d45b
• activityBar.background#0c1d13
• activityBar.foreground#d9f5c9
• activityBar.inactiveForeground#7ea774
• activityBarBadge.background#a8d45b
• activityBarBadge.foreground#07130d
• badge.background#a8d45b
• badge.foreground#07130d
• breadcrumb.activeSelectionForeground#a8d45b
• breadcrumb.background#07130d
• breadcrumb.focusForeground#d9f5c9
• breadcrumb.foreground#7ea774
• button.background#a8d45b
• button.foreground#07130d
• button.hoverBackground#f4d35e
• button.secondaryBackground#14321f
• button.secondaryForeground#d9f5c9
• button.secondaryHoverBackground#28583a
• checkbox.background#07130d
• checkbox.border#28583a
• checkbox.foreground#d9f5c9
• descriptionForeground#7ea774
• diffEditor.border#28583a
• diffEditor.insertedTextBackground#5ee39a22
• diffEditor.removedTextBackground#ff806622
• disabledForeground#7ea774
• dropdown.background#07130d
• dropdown.border#28583a
• dropdown.foreground#d9f5c9
• editor.background#07130d
• editor.findMatchBackground#f4d35e66
• editor.findMatchHighlightBackground#a8d45b33
• editor.findRangeHighlightBackground#5ee39a22
• editor.foreground#d9f5c9
• editor.hoverHighlightBackground#a8d45b18
• editor.inactiveSelectionBackground#a8d45b22
• editor.lineHighlightBackground#0c1d13
• editor.lineHighlightBorder#28583a
• editor.selectionBackground#a8d45b44
• editor.selectionHighlightBackground#5ee39a33
• editor.wordHighlightBackground#a8d45b22
• editor.wordHighlightStrongBackground#5ee39a22
• editorBracketMatch.background#a8d45b22
• editorBracketMatch.border#a8d45b
• editorCursor.foreground#a8d45b
• editorGroup.border#28583a
• editorGroupHeader.tabsBackground#0c1d13
• editorGroupHeader.tabsBorder#28583a
• editorGutter.addedBackground#5ee39a
• editorGutter.background#07130d
• editorGutter.deletedBackground#ff8066
• editorGutter.modifiedBackground#f4d35e
• editorHoverWidget.background#0a1a11
• editorHoverWidget.border#28583a
• editorHoverWidget.foreground#d9f5c9
• editorIndentGuide.activeBackground1#a8d45b
• editorIndentGuide.background1#28583a
• editorLineNumber.activeForeground#a8d45b
• editorLineNumber.foreground#7ea774
• editorOverviewRuler.addedForeground#5ee39a
• editorOverviewRuler.border#07130d
• editorOverviewRuler.deletedForeground#ff8066
• editorOverviewRuler.errorForeground#ff8066
• editorOverviewRuler.infoForeground#a8d45b
• editorOverviewRuler.modifiedForeground#f4d35e
• editorOverviewRuler.warningForeground#f4d35e
• editorRuler.foreground#28583a
• editorSuggestWidget.background#0a1a11
• editorSuggestWidget.border#28583a
• editorSuggestWidget.foreground#d9f5c9
• editorSuggestWidget.highlightForeground#a8d45b
• editorSuggestWidget.selectedBackground#14321f
• editorWhitespace.foreground#28583a
• errorForeground#ff8066
• focusBorder#a8d45b
• foreground#d9f5c9
• gitDecoration.addedResourceForeground#5ee39a
• gitDecoration.conflictingResourceForeground#5ee39a
• gitDecoration.deletedResourceForeground#ff8066
• gitDecoration.ignoredResourceForeground#7ea774
• gitDecoration.modifiedResourceForeground#f4d35e
• gitDecoration.untrackedResourceForeground#5ee39a
• icon.foreground#d9f5c9
• input.background#07130d
• input.border#28583a
• input.foreground#d9f5c9
• input.placeholderForeground#7ea774
• inputOption.activeBackground#a8d45b22
• inputOption.activeBorder#a8d45b
• inputValidation.errorBackground#0c1d13
• inputValidation.errorBorder#ff8066
• inputValidation.infoBackground#0c1d13
• inputValidation.infoBorder#a8d45b
• inputValidation.warningBackground#0c1d13
• inputValidation.warningBorder#f4d35e
• list.activeSelectionBackground#14321f
• list.activeSelectionForeground#d9f5c9
• list.focusOutline#a8d45b
• list.highlightForeground#a8d45b
• list.hoverBackground#0c1d13
• list.inactiveSelectionBackground#0c1d13
• list.inactiveSelectionForeground#d9f5c9
• menu.background#0a1a11
• menu.foreground#d9f5c9
• menu.selectionBackground#14321f
• menu.selectionForeground#d9f5c9
• menu.separatorBackground#28583a
• minimap.background#07130d
• minimap.errorHighlight#ff8066
• minimap.findMatchHighlight#f4d35e
• minimap.selectionHighlight#a8d45b70
• minimap.warningHighlight#f4d35e
• notificationCenter.border#28583a
• notificationCenterHeader.background#14321f
• notificationCenterHeader.foreground#d9f5c9
• notifications.background#0a1a11
• notifications.border#28583a
• notifications.foreground#d9f5c9
• notificationToast.border#28583a
• panel.background#0a1a11
• panel.border#28583a
• panel.foreground#d9f5c9
• panelTitle.activeBorder#a8d45b
• panelTitle.activeForeground#d9f5c9
• panelTitle.inactiveForeground#7ea774
• peekView.border#a8d45b
• peekViewEditor.background#07130d
• peekViewResult.background#0a1a11
• peekViewTitle.background#14321f
• peekViewTitleDescription.foreground#7ea774
• peekViewTitleLabel.foreground#d9f5c9
• pickerGroup.border#28583a
• pickerGroup.foreground#a8d45b
• progressBar.background#a8d45b
• quickInput.background#0a1a11
• quickInput.foreground#d9f5c9
• quickInputList.focusBackground#14321f
• quickInputList.focusForeground#d9f5c9
• quickInputTitle.background#14321f
• sash.hoverBorder#a8d45b
• scrollbarSlider.activeBackground#a8d45b88
• scrollbarSlider.background#28583a55
• scrollbarSlider.hoverBackground#a8d45b55
• selection.background#a8d45b44
• settings.dropdownBackground#07130d
• settings.dropdownBorder#28583a
• settings.dropdownForeground#d9f5c9
• settings.headerForeground#d9f5c9
• settings.modifiedItemIndicator#a8d45b
• settings.textInputBackground#07130d
• settings.textInputBorder#28583a
• settings.textInputForeground#d9f5c9
• sideBar.background#0a1a11
• sideBar.border#28583a
• sideBar.foreground#d9f5c9
• sideBarSectionHeader.background#14321f
• sideBarSectionHeader.border#28583a
• sideBarSectionHeader.foreground#d9f5c9
• sideBarTitle.foreground#d9f5c9
• statusBar.background#14321f
• statusBar.border#28583a
• statusBar.debuggingBackground#a8d45b
• statusBar.debuggingForeground#07130d
• statusBar.foreground#d9f5c9
• statusBar.noFolderBackground#0c1d13
• statusBarItem.hoverBackground#28583a
• statusBarItem.remoteBackground#a8d45b
• statusBarItem.remoteForeground#07130d
• symbolIcon.classForeground#d7ef8f
• symbolIcon.functionForeground#5ee39a
• symbolIcon.methodForeground#5ee39a
• symbolIcon.propertyForeground#c3e57d
• symbolIcon.variableForeground#d9f5c9
• tab.activeBackground#07130d
• tab.activeBorderTop#a8d45b
• tab.activeForeground#d9f5c9
• tab.border#28583a
• tab.inactiveBackground#0c1d13
• tab.inactiveForeground#7ea774
• tab.unfocusedActiveBorderTop#7ea774
• terminal.ansiBlack#07130d
• terminal.ansiBlue#5ee39a
• terminal.ansiBrightBlack#7ea774
• terminal.ansiBrightBlue#5ee39a
• terminal.ansiBrightCyan#a8d45b
• terminal.ansiBrightGreen#5ee39a
• terminal.ansiBrightMagenta#5ee39a
• terminal.ansiBrightRed#ff8066
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#f4d35e
• terminal.ansiCyan#a8d45b
• terminal.ansiGreen#5ee39a
• terminal.ansiMagenta#5ee39a
• terminal.ansiRed#ff8066
• terminal.ansiWhite#d9f5c9
• terminal.ansiYellow#f4d35e
• terminal.background#07130d
• terminal.foreground#d9f5c9
• textBlockQuote.background#0c1d13
• textBlockQuote.border#a8d45b
• textCodeBlock.background#0c1d13
• textLink.activeForeground#f4d35e
• textLink.foreground#a8d45b
• titleBar.activeBackground#0c1d13
• titleBar.activeForeground#d9f5c9
• titleBar.border#28583a
• titleBar.inactiveBackground#0a1a11
• titleBar.inactiveForeground#7ea774
• widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).