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#00d7ff
• activityBar.background#0d1030
• activityBar.foreground#e8edff
• activityBar.inactiveForeground#7f89c8
• activityBarBadge.background#00d7ff
• activityBarBadge.foreground#07091f
• badge.background#00d7ff
• badge.foreground#07091f
• breadcrumb.activeSelectionForeground#00d7ff
• breadcrumb.background#07091f
• breadcrumb.focusForeground#e8edff
• breadcrumb.foreground#7f89c8
• button.background#00d7ff
• button.foreground#07091f
• button.hoverBackground#ffd166
• button.secondaryBackground#15194a
• button.secondaryForeground#e8edff
• button.secondaryHoverBackground#23286a
• checkbox.background#07091f
• checkbox.border#23286a
• checkbox.foreground#e8edff
• descriptionForeground#7f89c8
• diffEditor.border#23286a
• diffEditor.insertedTextBackground#8cffc122
• diffEditor.removedTextBackground#ff5f7a22
• disabledForeground#7f89c8
• dropdown.background#07091f
• dropdown.border#23286a
• dropdown.foreground#e8edff
• editor.background#07091f
• editor.findMatchBackground#ffd16666
• editor.findMatchHighlightBackground#00d7ff33
• editor.findRangeHighlightBackground#ff4fd822
• editor.foreground#e8edff
• editor.hoverHighlightBackground#00d7ff18
• editor.inactiveSelectionBackground#00d7ff22
• editor.lineHighlightBackground#0d1030
• editor.lineHighlightBorder#23286a
• editor.selectionBackground#00d7ff44
• editor.selectionHighlightBackground#ff4fd833
• editor.wordHighlightBackground#00d7ff22
• editor.wordHighlightStrongBackground#ff4fd822
• editorBracketMatch.background#00d7ff22
• editorBracketMatch.border#00d7ff
• editorCursor.foreground#00d7ff
• editorGroup.border#23286a
• editorGroupHeader.tabsBackground#0d1030
• editorGroupHeader.tabsBorder#23286a
• editorGutter.addedBackground#8cffc1
• editorGutter.background#07091f
• editorGutter.deletedBackground#ff5f7a
• editorGutter.modifiedBackground#ffd166
• editorHoverWidget.background#0a0d29
• editorHoverWidget.border#23286a
• editorHoverWidget.foreground#e8edff
• editorIndentGuide.activeBackground1#00d7ff
• editorIndentGuide.background1#23286a
• editorLineNumber.activeForeground#00d7ff
• editorLineNumber.foreground#7f89c8
• editorOverviewRuler.addedForeground#8cffc1
• editorOverviewRuler.border#07091f
• editorOverviewRuler.deletedForeground#ff5f7a
• editorOverviewRuler.errorForeground#ff5f7a
• editorOverviewRuler.infoForeground#00d7ff
• editorOverviewRuler.modifiedForeground#ffd166
• editorOverviewRuler.warningForeground#ffd166
• editorRuler.foreground#23286a
• editorSuggestWidget.background#0a0d29
• editorSuggestWidget.border#23286a
• editorSuggestWidget.foreground#e8edff
• editorSuggestWidget.highlightForeground#00d7ff
• editorSuggestWidget.selectedBackground#15194a
• editorWhitespace.foreground#23286a
• errorForeground#ff5f7a
• focusBorder#00d7ff
• foreground#e8edff
• gitDecoration.addedResourceForeground#8cffc1
• gitDecoration.conflictingResourceForeground#ff4fd8
• gitDecoration.deletedResourceForeground#ff5f7a
• gitDecoration.ignoredResourceForeground#7f89c8
• gitDecoration.modifiedResourceForeground#ffd166
• gitDecoration.untrackedResourceForeground#8cffc1
• icon.foreground#e8edff
• input.background#07091f
• input.border#23286a
• input.foreground#e8edff
• input.placeholderForeground#7f89c8
• inputOption.activeBackground#00d7ff22
• inputOption.activeBorder#00d7ff
• inputValidation.errorBackground#0d1030
• inputValidation.errorBorder#ff5f7a
• inputValidation.infoBackground#0d1030
• inputValidation.infoBorder#00d7ff
• inputValidation.warningBackground#0d1030
• inputValidation.warningBorder#ffd166
• list.activeSelectionBackground#15194a
• list.activeSelectionForeground#e8edff
• list.focusOutline#00d7ff
• list.highlightForeground#00d7ff
• list.hoverBackground#0d1030
• list.inactiveSelectionBackground#0d1030
• list.inactiveSelectionForeground#e8edff
• menu.background#0a0d29
• menu.foreground#e8edff
• menu.selectionBackground#15194a
• menu.selectionForeground#e8edff
• menu.separatorBackground#23286a
• minimap.background#07091f
• minimap.errorHighlight#ff5f7a
• minimap.findMatchHighlight#ffd166
• minimap.selectionHighlight#00d7ff70
• minimap.warningHighlight#ffd166
• notificationCenter.border#23286a
• notificationCenterHeader.background#15194a
• notificationCenterHeader.foreground#e8edff
• notifications.background#0a0d29
• notifications.border#23286a
• notifications.foreground#e8edff
• notificationToast.border#23286a
• panel.background#0a0d29
• panel.border#23286a
• panel.foreground#e8edff
• panelTitle.activeBorder#00d7ff
• panelTitle.activeForeground#e8edff
• panelTitle.inactiveForeground#7f89c8
• peekView.border#00d7ff
• peekViewEditor.background#07091f
• peekViewResult.background#0a0d29
• peekViewTitle.background#15194a
• peekViewTitleDescription.foreground#7f89c8
• peekViewTitleLabel.foreground#e8edff
• pickerGroup.border#23286a
• pickerGroup.foreground#00d7ff
• progressBar.background#00d7ff
• quickInput.background#0a0d29
• quickInput.foreground#e8edff
• quickInputList.focusBackground#15194a
• quickInputList.focusForeground#e8edff
• quickInputTitle.background#15194a
• sash.hoverBorder#00d7ff
• scrollbarSlider.activeBackground#00d7ff88
• scrollbarSlider.background#23286a55
• scrollbarSlider.hoverBackground#00d7ff55
• selection.background#00d7ff44
• settings.dropdownBackground#07091f
• settings.dropdownBorder#23286a
• settings.dropdownForeground#e8edff
• settings.headerForeground#e8edff
• settings.modifiedItemIndicator#00d7ff
• settings.textInputBackground#07091f
• settings.textInputBorder#23286a
• settings.textInputForeground#e8edff
• sideBar.background#0a0d29
• sideBar.border#23286a
• sideBar.foreground#e8edff
• sideBarSectionHeader.background#15194a
• sideBarSectionHeader.border#23286a
• sideBarSectionHeader.foreground#e8edff
• sideBarTitle.foreground#e8edff
• statusBar.background#15194a
• statusBar.border#23286a
• statusBar.debuggingBackground#00d7ff
• statusBar.debuggingForeground#07091f
• statusBar.foreground#e8edff
• statusBar.noFolderBackground#0d1030
• statusBarItem.hoverBackground#23286a
• statusBarItem.remoteBackground#00d7ff
• statusBarItem.remoteForeground#07091f
• symbolIcon.classForeground#b891ff
• symbolIcon.functionForeground#00d7ff
• symbolIcon.methodForeground#00d7ff
• symbolIcon.propertyForeground#f7a8ff
• symbolIcon.variableForeground#e8edff
• tab.activeBackground#07091f
• tab.activeBorderTop#00d7ff
• tab.activeForeground#e8edff
• tab.border#23286a
• tab.inactiveBackground#0d1030
• tab.inactiveForeground#7f89c8
• tab.unfocusedActiveBorderTop#7f89c8
• terminal.ansiBlack#07091f
• terminal.ansiBlue#00d7ff
• terminal.ansiBrightBlack#7f89c8
• terminal.ansiBrightBlue#00d7ff
• terminal.ansiBrightCyan#00d7ff
• terminal.ansiBrightGreen#8cffc1
• terminal.ansiBrightMagenta#ff4fd8
• terminal.ansiBrightRed#ff5f7a
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#ffd166
• terminal.ansiCyan#00d7ff
• terminal.ansiGreen#8cffc1
• terminal.ansiMagenta#ff4fd8
• terminal.ansiRed#ff5f7a
• terminal.ansiWhite#e8edff
• terminal.ansiYellow#ffd166
• terminal.background#07091f
• terminal.foreground#e8edff
• textBlockQuote.background#0d1030
• textBlockQuote.border#00d7ff
• textCodeBlock.background#0d1030
• textLink.activeForeground#ffd166
• textLink.foreground#00d7ff
• titleBar.activeBackground#0d1030
• titleBar.activeForeground#e8edff
• titleBar.border#23286a
• titleBar.inactiveBackground#0a0d29
• titleBar.inactiveForeground#7f89c8
• widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).