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#b891ff
• activityBar.background#15102f
• activityBar.foreground#ede7ff
• activityBar.inactiveForeground#9a8ac8
• activityBarBadge.background#b891ff
• activityBarBadge.foreground#0d0a1f
• badge.background#b891ff
• badge.foreground#0d0a1f
• breadcrumb.activeSelectionForeground#b891ff
• breadcrumb.background#0d0a1f
• breadcrumb.focusForeground#ede7ff
• breadcrumb.foreground#9a8ac8
• button.background#b891ff
• button.foreground#0d0a1f
• button.hoverBackground#ffd6f6
• button.secondaryBackground#241b52
• button.secondaryForeground#ede7ff
• button.secondaryHoverBackground#3d2f7a
• checkbox.background#0d0a1f
• checkbox.border#3d2f7a
• checkbox.foreground#ede7ff
• descriptionForeground#9a8ac8
• diffEditor.border#3d2f7a
• diffEditor.insertedTextBackground#a7f3d022
• diffEditor.removedTextBackground#ff6b9a22
• disabledForeground#9a8ac8
• dropdown.background#0d0a1f
• dropdown.border#3d2f7a
• dropdown.foreground#ede7ff
• editor.background#0d0a1f
• editor.findMatchBackground#ffd6f666
• editor.findMatchHighlightBackground#b891ff33
• editor.findRangeHighlightBackground#6ee7ff22
• editor.foreground#ede7ff
• editor.hoverHighlightBackground#b891ff18
• editor.inactiveSelectionBackground#b891ff22
• editor.lineHighlightBackground#15102f
• editor.lineHighlightBorder#3d2f7a
• editor.selectionBackground#b891ff44
• editor.selectionHighlightBackground#6ee7ff33
• editor.wordHighlightBackground#b891ff22
• editor.wordHighlightStrongBackground#6ee7ff22
• editorBracketMatch.background#b891ff22
• editorBracketMatch.border#b891ff
• editorCursor.foreground#b891ff
• editorGroup.border#3d2f7a
• editorGroupHeader.tabsBackground#15102f
• editorGroupHeader.tabsBorder#3d2f7a
• editorGutter.addedBackground#a7f3d0
• editorGutter.background#0d0a1f
• editorGutter.deletedBackground#ff6b9a
• editorGutter.modifiedBackground#ffd6f6
• editorHoverWidget.background#110d27
• editorHoverWidget.border#3d2f7a
• editorHoverWidget.foreground#ede7ff
• editorIndentGuide.activeBackground1#b891ff
• editorIndentGuide.background1#3d2f7a
• editorLineNumber.activeForeground#b891ff
• editorLineNumber.foreground#9a8ac8
• editorOverviewRuler.addedForeground#a7f3d0
• editorOverviewRuler.border#0d0a1f
• editorOverviewRuler.deletedForeground#ff6b9a
• editorOverviewRuler.errorForeground#ff6b9a
• editorOverviewRuler.infoForeground#b891ff
• editorOverviewRuler.modifiedForeground#ffd6f6
• editorOverviewRuler.warningForeground#ffd6f6
• editorRuler.foreground#3d2f7a
• editorSuggestWidget.background#110d27
• editorSuggestWidget.border#3d2f7a
• editorSuggestWidget.foreground#ede7ff
• editorSuggestWidget.highlightForeground#b891ff
• editorSuggestWidget.selectedBackground#241b52
• editorWhitespace.foreground#3d2f7a
• errorForeground#ff6b9a
• focusBorder#b891ff
• foreground#ede7ff
• gitDecoration.addedResourceForeground#a7f3d0
• gitDecoration.conflictingResourceForeground#6ee7ff
• gitDecoration.deletedResourceForeground#ff6b9a
• gitDecoration.ignoredResourceForeground#9a8ac8
• gitDecoration.modifiedResourceForeground#ffd6f6
• gitDecoration.untrackedResourceForeground#a7f3d0
• icon.foreground#ede7ff
• input.background#0d0a1f
• input.border#3d2f7a
• input.foreground#ede7ff
• input.placeholderForeground#9a8ac8
• inputOption.activeBackground#b891ff22
• inputOption.activeBorder#b891ff
• inputValidation.errorBackground#15102f
• inputValidation.errorBorder#ff6b9a
• inputValidation.infoBackground#15102f
• inputValidation.infoBorder#b891ff
• inputValidation.warningBackground#15102f
• inputValidation.warningBorder#ffd6f6
• list.activeSelectionBackground#241b52
• list.activeSelectionForeground#ede7ff
• list.focusOutline#b891ff
• list.highlightForeground#b891ff
• list.hoverBackground#15102f
• list.inactiveSelectionBackground#15102f
• list.inactiveSelectionForeground#ede7ff
• menu.background#110d27
• menu.foreground#ede7ff
• menu.selectionBackground#241b52
• menu.selectionForeground#ede7ff
• menu.separatorBackground#3d2f7a
• minimap.background#0d0a1f
• minimap.errorHighlight#ff6b9a
• minimap.findMatchHighlight#ffd6f6
• minimap.selectionHighlight#b891ff70
• minimap.warningHighlight#ffd6f6
• notificationCenter.border#3d2f7a
• notificationCenterHeader.background#241b52
• notificationCenterHeader.foreground#ede7ff
• notifications.background#110d27
• notifications.border#3d2f7a
• notifications.foreground#ede7ff
• notificationToast.border#3d2f7a
• panel.background#110d27
• panel.border#3d2f7a
• panel.foreground#ede7ff
• panelTitle.activeBorder#b891ff
• panelTitle.activeForeground#ede7ff
• panelTitle.inactiveForeground#9a8ac8
• peekView.border#b891ff
• peekViewEditor.background#0d0a1f
• peekViewResult.background#110d27
• peekViewTitle.background#241b52
• peekViewTitleDescription.foreground#9a8ac8
• peekViewTitleLabel.foreground#ede7ff
• pickerGroup.border#3d2f7a
• pickerGroup.foreground#b891ff
• progressBar.background#b891ff
• quickInput.background#110d27
• quickInput.foreground#ede7ff
• quickInputList.focusBackground#241b52
• quickInputList.focusForeground#ede7ff
• quickInputTitle.background#241b52
• sash.hoverBorder#b891ff
• scrollbarSlider.activeBackground#b891ff88
• scrollbarSlider.background#3d2f7a55
• scrollbarSlider.hoverBackground#b891ff55
• selection.background#b891ff44
• settings.dropdownBackground#0d0a1f
• settings.dropdownBorder#3d2f7a
• settings.dropdownForeground#ede7ff
• settings.headerForeground#ede7ff
• settings.modifiedItemIndicator#b891ff
• settings.textInputBackground#0d0a1f
• settings.textInputBorder#3d2f7a
• settings.textInputForeground#ede7ff
• sideBar.background#110d27
• sideBar.border#3d2f7a
• sideBar.foreground#ede7ff
• sideBarSectionHeader.background#241b52
• sideBarSectionHeader.border#3d2f7a
• sideBarSectionHeader.foreground#ede7ff
• sideBarTitle.foreground#ede7ff
• statusBar.background#241b52
• statusBar.border#3d2f7a
• statusBar.debuggingBackground#b891ff
• statusBar.debuggingForeground#0d0a1f
• statusBar.foreground#ede7ff
• statusBar.noFolderBackground#15102f
• statusBarItem.hoverBackground#3d2f7a
• statusBarItem.remoteBackground#b891ff
• statusBarItem.remoteForeground#0d0a1f
• symbolIcon.classForeground#ff8fe5
• symbolIcon.functionForeground#6ee7ff
• symbolIcon.methodForeground#6ee7ff
• symbolIcon.propertyForeground#d6c7ff
• symbolIcon.variableForeground#ede7ff
• tab.activeBackground#0d0a1f
• tab.activeBorderTop#b891ff
• tab.activeForeground#ede7ff
• tab.border#3d2f7a
• tab.inactiveBackground#15102f
• tab.inactiveForeground#9a8ac8
• tab.unfocusedActiveBorderTop#9a8ac8
• terminal.ansiBlack#0d0a1f
• terminal.ansiBlue#6ee7ff
• terminal.ansiBrightBlack#9a8ac8
• terminal.ansiBrightBlue#6ee7ff
• terminal.ansiBrightCyan#b891ff
• terminal.ansiBrightGreen#a7f3d0
• terminal.ansiBrightMagenta#6ee7ff
• terminal.ansiBrightRed#ff6b9a
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#ffd6f6
• terminal.ansiCyan#b891ff
• terminal.ansiGreen#a7f3d0
• terminal.ansiMagenta#6ee7ff
• terminal.ansiRed#ff6b9a
• terminal.ansiWhite#ede7ff
• terminal.ansiYellow#ffd6f6
• terminal.background#0d0a1f
• terminal.foreground#ede7ff
• textBlockQuote.background#15102f
• textBlockQuote.border#b891ff
• textCodeBlock.background#15102f
• textLink.activeForeground#ffd6f6
• textLink.foreground#b891ff
• titleBar.activeBackground#15102f
• titleBar.activeForeground#ede7ff
• titleBar.border#3d2f7a
• titleBar.inactiveBackground#110d27
• titleBar.inactiveForeground#9a8ac8
• widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).