Skip to main content
Coding Theme

Color themes

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.background#FFFFFF
  • activityBar.border#CC3388
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#CC3388
  • activityBarBadge.background#CC3388
  • activityBarBadge.foreground#FFFFFF
  • badge.background#CC3388
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#CC3388
  • breadcrumb.background#FFFFFF
  • breadcrumb.focusForeground#CC3388
  • breadcrumb.foreground#000000
  • breadcrumbPicker.background#FFFFFF
  • button.background#CC3388
  • button.border#CC3388
  • button.foreground#FFFFFF
  • button.hoverBackground#FF69B4
  • button.secondaryBackground#FF69B4
  • button.secondaryForeground#FFFFFF
  • checkbox.background#FFFFFF
  • checkbox.border#CC3388
  • checkbox.foreground#000000
  • debugToolBar.background#FFFFFF
  • debugToolBar.border#CC3388
  • diffEditor.insertedTextBackground#A6E22E25
  • diffEditor.removedTextBackground#F9267225
  • dropdown.background#FFFFFF
  • dropdown.border#CC3388
  • dropdown.foreground#000000
  • dropdown.listBackground#FFFFFF
  • editor.background#FFFFFF
  • editor.findMatchBackground#FF69B4
  • editor.findMatchHighlightBackground#FF69B450
  • editor.findRangeHighlightBackground#FFD6E8
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#FFD6E8
  • editor.lineHighlightBackground#FFF0F5
  • editor.selectionBackground#FF69B4
  • editor.selectionForeground#FFFFFF
  • editor.selectionHighlightBackground#FF69B430
  • editor.wordHighlightBackground#FF69B430
  • editor.wordHighlightStrongBackground#FF69B460
  • editorBracketMatch.background#FF69B430
  • editorBracketMatch.border#CC3388
  • editorCursor.foreground#CC3388
  • editorError.foreground#CC0033
  • editorGroup.border#CC3388
  • editorGroup.dropBackground#FF69B440
  • editorGroupHeader.tabsBackground#FFFFFF
  • editorGroupHeader.tabsBorder#CC3388
  • editorGutter.addedBackground#5A8A00
  • editorGutter.background#FFFFFF
  • editorGutter.deletedBackground#CC0033
  • editorGutter.modifiedBackground#CC3388
  • editorHoverWidget.background#FFFFFF
  • editorHoverWidget.border#CC3388
  • editorInfo.foreground#0077AA
  • editorLineNumber.foreground#CC3388
  • editorSuggestWidget.background#FFFFFF
  • editorSuggestWidget.border#CC3388
  • editorSuggestWidget.foreground#000000
  • editorSuggestWidget.selectedBackground#FF69B4
  • editorWarning.foreground#CC3388
  • editorWidget.background#FFFFFF
  • editorWidget.border#CC3388
  • editorWidget.foreground#000000
  • extensionButton.prominentBackground#CC3388
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#FF69B4
  • focusBorder#CC3388
  • gitDecoration.addedResourceForeground#5A8A00
  • gitDecoration.conflictingResourceForeground#CC0033
  • gitDecoration.deletedResourceForeground#CC0033
  • gitDecoration.ignoredResourceForeground#AAAAAA
  • gitDecoration.modifiedResourceForeground#CC3388
  • gitDecoration.submoduleResourceForeground#CC3388
  • gitDecoration.untrackedResourceForeground#5A8A00
  • input.background#FFFFFF
  • input.border#CC3388
  • input.foreground#000000
  • input.placeholderForeground#CC3388
  • inputOption.activeBackground#FF69B4
  • inputOption.activeBorder#CC3388
  • inputOption.activeForeground#FFFFFF
  • keybindingLabel.background#FFFFFF
  • keybindingLabel.border#CC3388
  • keybindingLabel.bottomBorder#CC3388
  • keybindingLabel.foreground#000000
  • list.activeSelectionBackground#FF69B4
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#FF69B4
  • list.focusBackground#FF69B4
  • list.focusForeground#FFFFFF
  • list.hoverBackground#FFD6E8
  • list.hoverForeground#000000
  • list.inactiveSelectionBackground#FFF0F5
  • list.inactiveSelectionForeground#000000
  • menu.background#FFFFFF
  • menu.border#CC3388
  • menu.foreground#000000
  • menu.selectionBackground#FF69B4
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#CC3388
  • menubar.selectionBackground#FF69B4
  • menubar.selectionForeground#FFFFFF
  • minimap.findMatchHighlight#CC3388
  • minimap.selectionHighlight#FF69B480
  • minimapSlider.activeBackground#CC338880
  • minimapSlider.background#DDDDDD80
  • minimapSlider.hoverBackground#BBBBBB80
  • notificationCenter.border#CC3388
  • notificationCenterHeader.background#FFFFFF
  • notificationCenterHeader.foreground#CC3388
  • notificationLink.activeForeground#CC3388
  • notifications.background#FFFFFF
  • notifications.border#CC3388
  • notifications.foreground#000000
  • notificationToast.border#CC3388
  • panel.background#FFFFFF
  • panel.border#CC3388
  • panel.dropBorder#CC3388
  • panelTitle.activeBorder#CC3388
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#555555
  • peekView.border#CC3388
  • peekViewEditor.background#FFF0F5
  • peekViewEditor.matchHighlightBackground#FF69B450
  • peekViewResult.background#FFF8FB
  • peekViewResult.fileForeground#000000
  • peekViewResult.lineForeground#000000
  • peekViewResult.matchHighlightBackground#FF69B450
  • peekViewResult.selectionBackground#FF69B4
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#FFFFFF
  • peekViewTitleDescription.foreground#555555
  • peekViewTitleLabel.foreground#CC3388
  • progressBar.background#CC3388
  • quickInput.background#FFFFFF
  • quickInput.foreground#000000
  • quickInputList.focusBackground#FF69B4
  • quickInputList.focusForeground#FFFFFF
  • scrollbar.shadow#CCCCCC
  • scrollbarSlider.activeBackground#CC3388
  • scrollbarSlider.background#DDDDDD
  • scrollbarSlider.hoverBackground#BBBBBB
  • selection.background#FF69B450
  • sideBar.background#FFFFFF
  • sideBar.border#CC3388
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#FF69B4
  • sideBarSectionHeader.border#CC3388
  • sideBarSectionHeader.foreground#FFFFFF
  • statusBar.background#FFFFFF
  • statusBar.border#CC3388
  • statusBar.debuggingBackground#FF69B4
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#FFFFFF
  • statusBar.noFolderForeground#000000
  • statusBarItem.activeBackground#FF69B4
  • statusBarItem.hoverBackground#FF69B4
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#CC3388
  • tab.activeForeground#000000
  • tab.border#CC3388
  • tab.hoverBackground#FF69B4
  • tab.hoverBorder#CC3388
  • tab.hoverForeground#FFFFFF
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#555555
  • terminal.background#FFFFFF
  • terminal.border#CC3388
  • terminal.foreground#000000
  • terminal.selectionBackground#FF69B4
  • terminalCursor.background#CC3388
  • terminalCursor.foreground#CC3388
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#000000
  • titleBar.border#CC3388
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#555555
  • tree.indentGuidesStroke#CC3388
  • widget.shadow#CCCCCC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line#8C8C8Citalic
keyword, storage.type, storage.modifier#D4000Dbold
keyword.operator#666666
string, constant.character, constant.other#9A5C00
constant.numeric, constant.language, constant.character.escape#8000CC
variable, variable.other#1F3D99
variable.language#D4000D
variable.parameter#CC5500italic
function, entity.name.function, support.function#1E7B1Ebold
entity.name.class, entity.name.type, support.class#0055BBitalic
entity.name.tag, meta.tag.sgml#D4000D
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.class, entity.other.attribute-name.id#0055BB
support.type.property-name.json#0055BB
string.json#9A5C00
source.css support.type.property-name, source.css support.type.vendored.property-name#0055BB
source.css entity.name.tag#1E7B1E
source.css entity.other.attribute-name#0055BB
source.css support.constant, source.css constant.other.color#8000CC
meta.decorator, punctuation.decorator, storage.type.annotation#1E7B1E
entity.name.namespace, entity.name.type.namespace#0055BBitalic
markup.heading, punctuation.definition.heading#CC0066bold
markup.bold#000000bold
markup.italic#000000italic
markup.inline.raw, markup.fenced_code.block#B8860B
markup.underline.link#005F8A
support.type.property-name.yaml, entity.name.tag.yaml#005F8A
invalid, invalid.illegal#CC0033underline
High Contrast Lemon Blush by Linich - VS Code Theme