Colin's VS Code Themes

Color themes

• 

  Graphite Pop

• 

  Halloween Midnight

• 

  Honey Terminal

• 

  Lavender Static

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#7dd3fc
• activityBar.background#17191e
• activityBar.foreground#f1f3f5
• activityBar.inactiveForeground#8d96a3
• activityBarBadge.background#7dd3fc
• activityBarBadge.foreground#101114
• badge.background#7dd3fc
• badge.foreground#101114
• breadcrumb.activeSelectionForeground#7dd3fc
• breadcrumb.background#101114
• breadcrumb.focusForeground#f1f3f5
• breadcrumb.foreground#8d96a3
• button.background#7dd3fc
• button.foreground#101114
• button.hoverBackground#facc15
• button.secondaryBackground#252832
• button.secondaryForeground#f1f3f5
• button.secondaryHoverBackground#3a3f4a
• checkbox.background#101114
• checkbox.border#3a3f4a
• checkbox.foreground#f1f3f5
• descriptionForeground#8d96a3
• diffEditor.border#3a3f4a
• diffEditor.insertedTextBackground#86efac22
• diffEditor.removedTextBackground#fb718522
• disabledForeground#8d96a3
• dropdown.background#101114
• dropdown.border#3a3f4a
• dropdown.foreground#f1f3f5
• editor.background#101114
• editor.findMatchBackground#facc1566
• editor.findMatchHighlightBackground#7dd3fc33
• editor.findRangeHighlightBackground#f472b622
• editor.foreground#f1f3f5
• editor.hoverHighlightBackground#7dd3fc18
• editor.inactiveSelectionBackground#7dd3fc22
• editor.lineHighlightBackground#17191e
• editor.lineHighlightBorder#3a3f4a
• editor.selectionBackground#7dd3fc44
• editor.selectionHighlightBackground#f472b633
• editor.wordHighlightBackground#7dd3fc22
• editor.wordHighlightStrongBackground#f472b622
• editorBracketMatch.background#7dd3fc22
• editorBracketMatch.border#7dd3fc
• editorCursor.foreground#7dd3fc
• editorGroup.border#3a3f4a
• editorGroupHeader.tabsBackground#17191e
• editorGroupHeader.tabsBorder#3a3f4a
• editorGutter.addedBackground#86efac
• editorGutter.background#101114
• editorGutter.deletedBackground#fb7185
• editorGutter.modifiedBackground#facc15
• editorHoverWidget.background#13151a
• editorHoverWidget.border#3a3f4a
• editorHoverWidget.foreground#f1f3f5
• editorIndentGuide.activeBackground1#7dd3fc
• editorIndentGuide.background1#3a3f4a
• editorLineNumber.activeForeground#7dd3fc
• editorLineNumber.foreground#8d96a3
• editorOverviewRuler.addedForeground#86efac
• editorOverviewRuler.border#101114
• editorOverviewRuler.deletedForeground#fb7185
• editorOverviewRuler.errorForeground#fb7185
• editorOverviewRuler.infoForeground#7dd3fc
• editorOverviewRuler.modifiedForeground#facc15
• editorOverviewRuler.warningForeground#facc15
• editorRuler.foreground#3a3f4a
• editorSuggestWidget.background#13151a
• editorSuggestWidget.border#3a3f4a
• editorSuggestWidget.foreground#f1f3f5
• editorSuggestWidget.highlightForeground#7dd3fc
• editorSuggestWidget.selectedBackground#252832
• editorWhitespace.foreground#3a3f4a
• errorForeground#fb7185
• focusBorder#7dd3fc
• foreground#f1f3f5
• gitDecoration.addedResourceForeground#86efac
• gitDecoration.conflictingResourceForeground#f472b6
• gitDecoration.deletedResourceForeground#fb7185
• gitDecoration.ignoredResourceForeground#8d96a3
• gitDecoration.modifiedResourceForeground#facc15
• gitDecoration.untrackedResourceForeground#86efac
• icon.foreground#f1f3f5
• input.background#101114
• input.border#3a3f4a
• input.foreground#f1f3f5
• input.placeholderForeground#8d96a3
• inputOption.activeBackground#7dd3fc22
• inputOption.activeBorder#7dd3fc
• inputValidation.errorBackground#17191e
• inputValidation.errorBorder#fb7185
• inputValidation.infoBackground#17191e
• inputValidation.infoBorder#7dd3fc
• inputValidation.warningBackground#17191e
• inputValidation.warningBorder#facc15
• list.activeSelectionBackground#252832
• list.activeSelectionForeground#f1f3f5
• list.focusOutline#7dd3fc
• list.highlightForeground#7dd3fc
• list.hoverBackground#17191e
• list.inactiveSelectionBackground#17191e
• list.inactiveSelectionForeground#f1f3f5
• menu.background#13151a
• menu.foreground#f1f3f5
• menu.selectionBackground#252832
• menu.selectionForeground#f1f3f5
• menu.separatorBackground#3a3f4a
• minimap.background#101114
• minimap.errorHighlight#fb7185
• minimap.findMatchHighlight#facc15
• minimap.selectionHighlight#7dd3fc70
• minimap.warningHighlight#facc15
• notificationCenter.border#3a3f4a
• notificationCenterHeader.background#252832
• notificationCenterHeader.foreground#f1f3f5
• notifications.background#13151a
• notifications.border#3a3f4a
• notifications.foreground#f1f3f5
• notificationToast.border#3a3f4a
• panel.background#13151a
• panel.border#3a3f4a
• panel.foreground#f1f3f5
• panelTitle.activeBorder#7dd3fc
• panelTitle.activeForeground#f1f3f5
• panelTitle.inactiveForeground#8d96a3
• peekView.border#7dd3fc
• peekViewEditor.background#101114
• peekViewResult.background#13151a
• peekViewTitle.background#252832
• peekViewTitleDescription.foreground#8d96a3
• peekViewTitleLabel.foreground#f1f3f5
• pickerGroup.border#3a3f4a
• pickerGroup.foreground#7dd3fc
• progressBar.background#7dd3fc
• quickInput.background#13151a
• quickInput.foreground#f1f3f5
• quickInputList.focusBackground#252832
• quickInputList.focusForeground#f1f3f5
• quickInputTitle.background#252832
• sash.hoverBorder#7dd3fc
• scrollbarSlider.activeBackground#7dd3fc88
• scrollbarSlider.background#3a3f4a55
• scrollbarSlider.hoverBackground#7dd3fc55
• selection.background#7dd3fc44
• settings.dropdownBackground#101114
• settings.dropdownBorder#3a3f4a
• settings.dropdownForeground#f1f3f5
• settings.headerForeground#f1f3f5
• settings.modifiedItemIndicator#7dd3fc
• settings.textInputBackground#101114
• settings.textInputBorder#3a3f4a
• settings.textInputForeground#f1f3f5
• sideBar.background#13151a
• sideBar.border#3a3f4a
• sideBar.foreground#f1f3f5
• sideBarSectionHeader.background#252832
• sideBarSectionHeader.border#3a3f4a
• sideBarSectionHeader.foreground#f1f3f5
• sideBarTitle.foreground#f1f3f5
• statusBar.background#252832
• statusBar.border#3a3f4a
• statusBar.debuggingBackground#7dd3fc
• statusBar.debuggingForeground#101114
• statusBar.foreground#f1f3f5
• statusBar.noFolderBackground#17191e
• statusBarItem.hoverBackground#3a3f4a
• statusBarItem.remoteBackground#7dd3fc
• statusBarItem.remoteForeground#101114
• symbolIcon.classForeground#c4b5fd
• symbolIcon.functionForeground#7dd3fc
• symbolIcon.methodForeground#7dd3fc
• symbolIcon.propertyForeground#f0abfc
• symbolIcon.variableForeground#f1f3f5
• tab.activeBackground#101114
• tab.activeBorderTop#7dd3fc
• tab.activeForeground#f1f3f5
• tab.border#3a3f4a
• tab.inactiveBackground#17191e
• tab.inactiveForeground#8d96a3
• tab.unfocusedActiveBorderTop#8d96a3
• terminal.ansiBlack#101114
• terminal.ansiBlue#7dd3fc
• terminal.ansiBrightBlack#8d96a3
• terminal.ansiBrightBlue#7dd3fc
• terminal.ansiBrightCyan#7dd3fc
• terminal.ansiBrightGreen#86efac
• terminal.ansiBrightMagenta#f472b6
• terminal.ansiBrightRed#fb7185
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#facc15
• terminal.ansiCyan#7dd3fc
• terminal.ansiGreen#86efac
• terminal.ansiMagenta#f472b6
• terminal.ansiRed#fb7185
• terminal.ansiWhite#f1f3f5
• terminal.ansiYellow#facc15
• terminal.background#101114
• terminal.foreground#f1f3f5
• textBlockQuote.background#17191e
• textBlockQuote.border#7dd3fc
• textCodeBlock.background#17191e
• textLink.activeForeground#facc15
• textLink.foreground#7dd3fc
• titleBar.activeBackground#17191e
• titleBar.activeForeground#f1f3f5
• titleBar.border#3a3f4a
• titleBar.inactiveBackground#13151a
• titleBar.inactiveForeground#8d96a3
• widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).