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.activeBorder#E382BC
  • activityBar.background#FFFFFF
  • activityBar.border#FFFFFF
  • activityBar.dropBackground#E75A5A80
  • activityBar.foreground#798BAF
  • activityBarBadge.background#00B6C2
  • activityBarBadge.foreground#FFFFFF
  • badge.background#00B6C2
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#E382BC
  • breadcrumb.background#FFFFFF
  • breadcrumb.focusForeground#434F65
  • breadcrumb.foreground#99A7C2
  • breadcrumbPicker.background#FFFFFF
  • button.background#FFFFFF
  • button.foreground#ffffff
  • button.hoverBackground#B9C2D5
  • debugConsole.errorForeground#E75A5A
  • debugConsole.infoForeground#00B6C2
  • debugConsole.warningForeground#E0AF00
  • debugToolBar.background#FFFFFF
  • diffEditor.insertedTextBackground#00B6C220
  • diffEditor.removedTextBackground#E382BC20
  • dropdown.background#F5F7F9
  • dropdown.border#F5F7F9
  • editor.background#FFFFFF
  • editor.findMatchBackground#FFFFFF00
  • editor.findMatchBorder#E382BC
  • editor.findMatchHighlight#E382BC
  • editor.findMatchHighlightBackground#FFFFFF00
  • editor.findMatchHighlightBorder#697DA5
  • editor.findRangeHighlightBackground#E0AF0030
  • editor.foreground#434F65
  • editor.lineHighlightBackground#F5F7F950
  • editor.lineHighlightBorder#F5F7F900
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#F5F7F9
  • editor.selectionHighlightBackground#E0AF0050
  • editor.wordHighlightBackground#E382BC30
  • editor.wordHighlightStrongBackground#3DB93130
  • editorBracketMatch.background#FFFFFF
  • editorBracketMatch.border#00B6C270
  • editorCursor.foreground#E0AF00
  • editorError.foreground#E75A5A
  • editorGroup.border#FFFFFF
  • editorGroup.dropBackground#E75A5A80
  • editorGroup.focusedEmptyBorder#E75A5A
  • editorGroupHeader.tabsBackground#FFFFFF
  • editorGutter.addedBackground#3DB93160
  • editorGutter.deletedBackground#E75A5A60
  • editorGutter.modifiedBackground#4C71F660
  • editorHoverWidget.background#F5F7F9
  • editorHoverWidget.border#F5F7F9
  • editorIndentGuide.activeBackground#A9B4CB
  • editorIndentGuide.background#F5F7F9
  • editorInfo.foreground#4C71F6
  • editorLineNumber.activeForeground#E0AF00
  • editorLineNumber.foreground#A9B4CB
  • editorLink.activeForeground#434F65
  • editorMarkerNavigation.background#434F6505
  • editorOverviewRuler.border#FFFFFF
  • editorOverviewRuler.errorForeground#E75A5A
  • editorOverviewRuler.findMatchForeground#E382BC
  • editorOverviewRuler.infoForeground#4C71F6
  • editorOverviewRuler.warningForeground#E0AF00
  • editorSuggestWidget.background#F5F7F9
  • editorSuggestWidget.border#F5F7F9
  • editorSuggestWidget.foreground#434F65
  • editorSuggestWidget.highlightForeground#00B6C2
  • editorSuggestWidget.selectedBackground#B9C2D5
  • editorWarning.foreground#E0AF00
  • editorWhitespace.foreground#F5F7F9
  • editorWidget.background#F5F7F9
  • editorWidget.border#E0AF00
  • editorWidget.resizeBorder#E0AF00
  • extensionBadge.remoteBackground#A9B4CB
  • extensionBadge.remoteForeground#434F65
  • extensionButton.prominentBackground#E0AF00
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#E0AF00
  • focusBorder#FFFFFF00
  • foreground#252D3A
  • gitDecoration.conflictingResourceForeground#E0AF00
  • gitDecoration.deletedResourceForeground#E75A5A
  • gitDecoration.ignoredResourceForeground#B9C2D5
  • gitDecoration.modifiedResourceForeground#4C71F6
  • gitDecoration.untrackedResourceForeground#3DB931
  • input.background#FFFFFF
  • input.border#F5F7F9
  • input.foreground#E382BC
  • input.placeholderForeground#A9B4CB
  • inputOption.activeBorder#E75A5A
  • inputValidation.errorBorder#E75A5A50
  • inputValidation.infoBorder#4C71F650
  • inputValidation.warningBorder#E0AF0050
  • list.activeSelectionBackground#FFFFFF00
  • list.activeSelectionForeground#00B6C2
  • list.dropBackground#B9C2D5
  • list.focusBackground#F5F7F9
  • list.focusForeground#252D3A
  • list.highlightForeground#00B6C2
  • list.hoverBackground#FFFFFF00
  • list.hoverForeground#434F65
  • list.inactiveSelectionBackground#F5F7F950
  • list.inactiveSelectionForeground#00B6C2
  • listFilterWidget.background#9883EC
  • listFilterWidget.noMatchesOutline#9883EC
  • listFilterWidget.outline#9883EC
  • menu.background#F5F7F9
  • menu.foreground#434F65
  • menu.selectionBackground#B9C2D5
  • menu.selectionBorder#F5F7F9
  • menu.selectionForeground#434F65
  • menu.separatorBackground#A9B4CB
  • menubar.selectionBackground#F5F7F9
  • menubar.selectionBorder#F5F7F9
  • menubar.selectionForeground#434F65
  • notebook.focusedCellBorder#E75A5A
  • notebook.inactiveFocusedCellBorder#E75A5A80
  • panel.background#FFFFFF
  • panel.border#FFFFFF
  • panel.dropBackground#B9C2D5
  • panelTitle.activeBorder#E0AF00
  • panelTitle.activeForeground#252D3A
  • panelTitle.inactiveForeground#99A7C2
  • peekView.border#F5F7F9
  • peekViewEditor.background#FFFFFF
  • peekViewEditor.matchHighlightBackground#E382BC50
  • peekViewEditorGutter.background#FFFFFF
  • peekViewResult.background#FFFFFF
  • peekViewResult.matchHighlightBackground#E382BC50
  • peekViewResult.selectionBackground#F5F7F9
  • peekViewTitle.background#F5F7F9
  • peekViewTitleDescription.foreground#434F65
  • pickerGroup.border#FFFFFF1a
  • pickerGroup.foreground#E0AF00
  • progressBar.background#E0AF00
  • quickInput.background#FFFFFF
  • quickInput.foreground#99A7C2
  • scrollbar.shadow#FFFFFF00
  • scrollbarSlider.activeBackground#99A7C2
  • scrollbarSlider.background#99A7C250
  • scrollbarSlider.hoverBackground#B9C2D5
  • selection.background#69A7D350
  • settings.checkboxBackground#FFFFFF
  • settings.checkboxForeground#434F65
  • settings.dropdownBackground#FFFFFF
  • settings.dropdownForeground#434F65
  • settings.headerForeground#00B6C2
  • settings.modifiedItemIndicator#E382BC
  • settings.numberInputBackground#FFFFFF
  • settings.numberInputForeground#434F65
  • settings.textInputBackground#FFFFFF
  • settings.textInputForeground#434F65
  • sideBar.background#FFFFFF
  • sideBar.border#B9C2D550
  • sideBar.foreground#798BAF
  • sideBarSectionHeader.background#FFFFFF
  • sideBarSectionHeader.border#FFFFFF
  • sideBarTitle.foreground#99A7C2
  • statusBar.background#FFFFFF
  • statusBar.border#FFFFFF
  • statusBar.debuggingBackground#5654BC
  • statusBar.debuggingForeground#252D3A
  • statusBar.foreground#99A7C2
  • statusBar.noFolderBackground#FFFFFF
  • statusBarItem.activeBackground#E75A5A80
  • statusBarItem.hoverBackground#F5F7F950
  • statusBarItem.remoteBackground#E0AF00
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FFFFFF
  • tab.activeBorderTop#00B6C2
  • tab.activeForeground#252D3A
  • tab.activeModifiedBorder#E382BC
  • tab.border#FFFFFF
  • tab.inactiveBackground#FFFFFF
  • tab.inactiveForeground#99A7C2
  • tab.inactiveModifiedBorder#798BAF
  • tab.unfocusedActiveBorder#99A7C2
  • tab.unfocusedActiveForeground#434F65
  • tab.unfocusedActiveModifiedBorder#b84848
  • tab.unfocusedInactiveModifiedBorder#8a3636
  • terminal.ansiBlack#A9B4CB
  • terminal.ansiBlue#4C71F6
  • terminal.ansiBrightBlack#A9B4CB
  • terminal.ansiBrightBlue#4C71F6
  • terminal.ansiBrightCyan#00B6C2
  • terminal.ansiBrightGreen#3DB931
  • terminal.ansiBrightMagenta#5654BC
  • terminal.ansiBrightRed#E75A5A
  • terminal.ansiBrightWhite#252D3A
  • terminal.ansiBrightYellow#E0AF00
  • terminal.ansiCyan#00B6C2
  • terminal.ansiGreen#3DB931
  • terminal.ansiMagenta#5654BC
  • terminal.ansiRed#E75A5A
  • terminal.ansiWhite#252D3A
  • terminal.ansiYellow#E0AF00
  • terminalCursor.background#000000
  • terminalCursor.foreground#E0AF00
  • textLink.activeForeground#E0AF00
  • textLink.foreground#00B6C2
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#434F65
  • titleBar.border#FFFFFF
  • titleBar.inactiveBackground#FFFFFF
  • titleBar.inactiveForeground#99A7C2
  • tree.indentGuidesStroke#F5F7F9
  • widget.shadow#FFFFFF00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#252D3A
string#3DB931
punctuation, constant.other.symbol#E382BC
constant.character.escape, text.html constant.character.entity.named#434F65
constant.language.boolean#E382BC
constant.numeric#E19235
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#434F65
keyword, modifier, variable.language.this, support.type.object, constant.language#E75A5A
entity.name.function, support.function#9883EC
storage.type, storage.modifier, storage.control#00B6C2
support.module, support.node#00B6C2italic
support.type, constant.other.key#E382BC
entity.name.type, entity.other.inherited-class, entity.other#E382BC
comment#99A7C2italic
comment punctuation.definition.comment, string.quoted.docstring#99A7C2italic
punctuation#E382BC
entity.name, entity.name.type.class, support.type, support.class, meta.use#9883EC
variable.object.property, meta.field.declaration entity.name.function#E75A5A
meta.definition.method entity.name.function#E75A5A
meta.function entity.name.function#E0AF00
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#E75A5A
meta.embedded, source.groovy.embedded, meta.template.expression#252D3A
entity.name.tag.yaml#00B6C2
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#00B6C2
constant.language.json#E75A5A
entity.other.attribute-name.class#E0AF00
entity.other.attribute-name.id#E19235
source.css entity.name.tag#E0AF00
support.type.property-name.css#69A7D3
meta.tag, punctuation.definition.tag#E75A5A
entity.name.tag#00B6C2
entity.other.attribute-name#00B6C2
punctuation.definition.entity.html#434F65
markup.heading#E75A5A
text.html.markdown meta.link.inline, meta.link.reference#00B6C2
text.html.markdown beginning.punctuation.definition.list#E75A5A
markup.italic#00B6C2italic
markup.bold#00B6C2bold
markup.bold markup.italic, markup.italic markup.bold#00B6C2italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#3DB931
markup.inline.raw.string.markdown#3DB931
keyword.other.definition.ini#00B6C2
entity.name.section.group-title.ini#E75A5A
source.cs meta.class.identifier storage.type#9883EC
source.cs meta.method.identifier entity.name.function#E75A5A
source.cs meta.method-call meta.method, source.cs entity.name.function#9883EC
source.cs storage.type#E382BC
source.cs meta.method.return-type#E382BC
source.cs meta.preprocessor#99A7C2
source.cs entity.name.type.namespace#252D3A
meta.jsx.children, SXNested#252D3A
support.class.component#E0AF00
source.cpp meta.block variable.other#252D3A
source.python meta.member.access.python#00B6C2
source.python meta.function-call.python, meta.function-call.arguments#9883EC
meta.block#00B6C2
entity.name.function.call#E0AF00
source.php support.other.namespace, source.php meta.use support.class#252D3A
constant.keyword#E75A5Aitalic
entity.name.function#E0AF00
Global settings#252D3A