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#040507ff
  • activityBar.border#040507ff
  • activityBar.foreground#808599ff
  • activityBar.inactiveForeground#45414cff
  • activityBarBadge.background#ff7a0000
  • activityBarBadge.foreground#d6eb7aff
  • badge.background#0b0b19c9
  • badge.foreground#82aaffd4
  • breadcrumb.activeSelectionForeground#ffdb67ff
  • breadcrumb.background#040507ff
  • breadcrumb.focusForeground#e6e2d1ff
  • breadcrumb.foregrounddefault
  • button.background#614aa52e
  • button.border#31333838
  • button.foreground#4ddcdcba
  • button.hoverBackground#8d61ff2e
  • button.secondaryBackground#17161e54
  • button.secondaryBorder#5e62750f
  • button.secondaryForeground#d0d5dbba
  • button.secondaryHoverBackground#2b293754
  • button.separator#2c2d3433
  • composerPane.background#040507ff
  • contrastBorder#31333838
  • debugConsole.errorForeground#ff6976ff
  • debugConsole.infoForeground#93b9bfff
  • debugConsole.sourceForeground#949ab0e0
  • debugConsole.warningForeground#f9d460ff
  • diffEditor.diagonalFill#27292f73
  • diffEditor.insertedLineBackground#091511ff
  • diffEditor.insertedTextBackground#061611d9
  • diffEditor.insertedTextBorder#358989ff
  • diffEditor.removedLineBackground#12080bff
  • diffEditor.removedTextBackground#290011cc
  • diffEditorGutter.insertedLineBackground#0a2b20ff
  • diffEditorGutter.removedLineBackground#2c0c15ff
  • dropdown.background#06070bff
  • dropdown.border#27292f73
  • dropdown.foreground#e6e2d1ff
  • dropdown.listBackground#06070bff
  • editor.background#040507ff
  • editor.compositionBorder#39425873
  • editor.findMatchBackground#30406d8c
  • editor.findMatchHighlightBackground#1c27468c
  • editor.findRangeHighlightBackground#39324952
  • editor.foreground#7e859fc2
  • editor.hoverHighlightBackground#19213559
  • editor.inactiveSelectionBackground#37415d3d
  • editor.selectionBackground#3541636b
  • editor.selectionHighlightBackground#464c6352
  • editor.selectionHighlightBorder#19213559
  • editorCursor.foreground#d0d1d5ff
  • editorError.background#a2051980
  • editorError.foreground#ff6976ff
  • editorGroup.border#31333838
  • editorGroupHeader.border#5e62750f
  • editorGroupHeader.noTabsBackground#040507ff
  • editorGroupHeader.tabsBackground#040507ff
  • editorGroupHeader.tabsBorder#31333838
  • editorGutter.addedBackground#0a2b20ff
  • editorGutter.deletedBackground#2c0c15ff
  • editorGutter.modifiedBackground#e9c162c0
  • editorHoverWidget.background#090a1194
  • editorHoverWidget.border#2b7e8a54
  • editorHoverWidget.foreground#badfe599
  • editorHoverWidget.highlightForeground#8eaeb4ff
  • editorHoverWidget.statusBarBackground#050609ff
  • editorIndentGuide.activeBackground1#764d7447
  • editorIndentGuide.background1#46334547
  • editorInfo.foreground#93b9bfff
  • editorInlayHint.background#2a2c2fff
  • editorInlayHint.diagonalFill#27292f73
  • editorInlayHint.foreground#484b57ff
  • editorInlayHint.insertedLineBackground#091511ff
  • editorInlayHint.insertedTextBackground#061611d9
  • editorInlayHint.parameterBackground#2a2c2fff
  • editorInlayHint.parameterForeground#484b57ff
  • editorInlayHint.removedLineBackground#12080bff
  • editorInlayHint.removedTextBackground#290011cc
  • editorInlayHint.typeBackground#2a2c2fff
  • editorInlayHint.typeForeground#484b57ff
  • editorLineNumber.activeForeground#949ab0e0
  • editorLineNumber.foreground#353a4aff
  • editorRuler.foreground#46334547
  • editorSuggestWidget.background#06070bff
  • editorSuggestWidget.border#2b7e8a54
  • editorSuggestWidget.foreground#badfe599
  • editorSuggestWidget.selectedBackground#3541636b
  • editorWarning.foreground#f9d460ff
  • editorWhitespace.foreground#373a45ff
  • editorWidget.background#090a1194
  • editorWidget.border#5e62750f
  • editorWidget.foreground#949ab0e0
  • extensionButton.foreground#4ddcdcba
  • extensionButton.hoverBackground#8d61ff2e
  • extensionButton.prominentBackground#4ddcdcba
  • extensionButton.prominentForeground#4ddcdcba
  • extensionButton.prominentHoverBackground#090a1194
  • extensionButton.separator#5e62750f
  • focusBorder#8eaeb4ff
  • foreground#949ab0e0
  • gitDecoration.addedResourceForeground#358989ff
  • gitDecoration.conflictingResourceForeground#e17177ff
  • gitDecoration.deletedResourceForeground#9a4f53ff
  • gitDecoration.ignoredResourceForeground#515670ff
  • gitDecoration.modifiedResourceForeground#6177b6ff
  • gitDecoration.renamedResourceForeground#358989ff
  • gitDecoration.stageDeletedResourceForeground#9a4f53ff
  • gitDecoration.stageModifiedResourceForeground#6177b6ff
  • gitDecoration.submoduleResourceForeground#3f455fcf
  • gitDecoration.untrackedResourceForeground#358989ff
  • icon.foreground#808599ff
  • input.background#06060aff
  • input.border#3d415399
  • input.foreground#ffffff99
  • input.placeholderForeground#b5b5b545
  • list.activeSelectionBackground#30406d8c
  • list.activeSelectionForeground#e6e2d1ff
  • list.errorForeground#9a4f56ff
  • list.focusBackground#30406d8c
  • list.focusForeground#e6e2d1ff
  • list.highlightForeground#f9d460ff
  • list.hoverBackground#3e42512e
  • list.hoverForeground#e6e2d1ff
  • list.inactiveSelectionBackground#06070bff
  • list.inactiveSelectionForeground#e6e2d1ff
  • menu.background#06070bff
  • menu.foreground#949ab0e0
  • menu.selectionBackground#3541636b
  • menu.selectionForeground#949ab0e0
  • menu.separatorBackground#161621ff
  • merge.commonContentBackground#2e2d36ff
  • merge.commonHeaderBackground#06070bff
  • merge.currentContentBackground#34727eff
  • merge.currentHeaderBackground#06070bff
  • merge.incomingContentBackground#b79251ff
  • merge.incomingHeaderBackground#06070bff
  • minimap.background#040507ff
  • minimap.errorHighlight#a20519ff
  • minimap.findMatchHighlight#30406d8c
  • minimap.selectionHighlight#3541636b
  • minimap.warningHighlight#ce9f87ff
  • notifications.background#090a1194
  • notifications.border#27292f73
  • notifications.foreground#d0d1d5ff
  • panel.background#040507ff
  • panel.border#5e62750f
  • panelInput.border#3d415399
  • panelTitle.activeBorder#9fa4b573
  • panelTitle.activeForeground#808599ff
  • panelTitle.inactiveForeground#e0e0e0ff
  • peekView.border#27292f73
  • peekViewEditor.background#0f0d1aff
  • peekViewEditor.matchHighlightBackground#3541636b
  • peekViewResult.background#06070bff
  • peekViewResult.matchHighlightBackground#3541636b
  • peekViewResult.selectionBackground#30406d8c
  • peekViewTitle.background#0b0915ff
  • peekViewTitleDescription.foreground#3f455fcf
  • peekViewTitleLabel.foreground#e6e2d1ff
  • progressBar.background#8eaeb4ff
  • quickInput.background#040507ff
  • quickInput.foreground#949ab0e0
  • quickInput.list.focusBackground#090a1194
  • quickInputList.focusBackground#090a1194
  • quickInputList.focusForeground#d0d1d5ff
  • sash.hoverBorder#39425873
  • scrollbar.shadow#00000080
  • scrollbarSlider.activeBackground#45414cff
  • scrollbarSlider.background#45414c40
  • scrollbarSlider.hoverBackground#45414c80
  • sideBar.background#040507ff
  • sideBar.border#040507ff
  • sideBar.foreground#3f455fcf
  • sideBarSectionHeader.background#0f0e1000
  • sideBarSectionHeader.foreground#e3e1e8b7
  • sideBarTitle.background#040507ff
  • sideBarTitle.foreground#949ab0e0
  • statusBar.background#040507ff
  • statusBar.border#ffffff00
  • statusBar.foreground#5f6384b8
  • statusBar.noFolderBackground#0b0915ff
  • statusBar.noFolderForeground#484b57ff
  • tab.activeBackground#050609ff
  • tab.activeBorder#d3d7e5ff
  • tab.activeBorderTop#d3d7e5ff
  • tab.activeForeground#808599ff
  • tab.border#31333838
  • tab.hoverBackground#050609ff
  • tab.hoverForeground#d0d1d5ff
  • tab.inactiveBackground#040507ff
  • tab.inactiveForeground#b3b7c5ff
  • tab.lastPinnedBorder#f9d460ff
  • tab.unfocusedActiveBackground#050609ff
  • tab.unfocusedActiveForeground#484b57ff
  • terminal.ansiBlack#2a3248ff
  • terminal.ansiBlue#ac82ffff
  • terminal.ansiBrightBlack#394258ff
  • terminal.ansiBrightBlue#9ec3ffff
  • terminal.ansiBrightCyan#a3eeffff
  • terminal.ansiBrightGreen#d7f2a6ff
  • terminal.ansiBrightMagenta#dda4ffff
  • terminal.ansiBrightRed#ff7f87ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#ffe082ff
  • terminal.ansiCyan#80d3c4ff
  • terminal.ansiGreen#d6eb7aff
  • terminal.ansiMagenta#a696e9ff
  • terminal.ansiRed#ff00afff
  • terminal.ansiWhite#d5d7deff
  • terminal.ansiYellow#ffdb67ff
  • terminal.background#020304ff
  • terminal.border#5e62750f
  • terminal.dropBackground#06070bff
  • terminal.foreground#626274ff
  • terminal.selectionBackground#3541636b
  • terminalCursor.foreground#d0d1d5ff
  • textLink.activeForeground#8eaeb4ff
  • textLink.foreground#8eaeb4ff
  • textPreformat.background#06070bff
  • textPreformat.foreground#949ab0e0
  • textSeparator.foreground#2c2d3433
  • titleBar.activeBackground#040507ff
  • titleBar.activeForeground#949ab0e0
  • titleBar.inactiveBackground#040507ff
  • titleBar.inactiveForeground#3f455fcf
  • tree.indentGuidesStroke#31333838
  • window.activeBorder#5e62750f
  • window.inactiveBorder#31333838

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#949ab0e0
text#949ab0e0
comment#353a4affitalic
punctuation.definition.comment#353a4affitalic
string#7cb57dff
string.regexp#ff6976ffitalic
constant.character.escape#7cb57dff
constant.other.placeholder#7cb57dff
separator.border#2c2d3433
focusBorder#39425873
gauge.border#5e62750f
sash.hoverBorder#39425873
editorGroup.border#31333838
punctuation.definition.template-expression#7cb57dff
meta.template.expression#7cb57dff
constant#6cb2bcff
constant.numeric#6cb2bcff
constant.language#6cb2bcff
quickInput.background#040507ff
quickInput.foreground#949ab0e0
quickInput.focusBackground#040507ff
quickInput.focusForeground#949ab0e0
quickInputList.background#040507ff
quickInputList.foreground#949ab0e0
quickInputList.focusBackground#040507ff
quickInputList.focusForeground#949ab0e0
list.hoverBackground#090a1194
list.hoverForeground#949ab0e0
keyword#8ac3cbcf
keyword.control#e3e1e8a8
keyword.control.conditional#e3e1e8a8
keyword.control.loop#e3e1e8a8
keyword.control.flow#e3e1e8a8
keyword.control.import#b8acf2ff
keyword.control.export#b8acf2ff
keyword.directive#eea8ece6
keyword.directive.define#eea8ece6
keyword.operator#c900cbff
keyword.operator.logical#c900cbff
keyword.operator.assignment#c900cbff
keyword.operator.arithmetic#c900cbff
keyword.operator.comparison#c900cbff
keyword.operator.wordlike#c900cbff
storage#5b6467ff
storage.type#5b6467ff
storage.type.function#63687bff
storage.type.class#63687bff
storage.modifier#5b6467ff
storage.type.primitive#dba1d8ff
variable#e3e1e8c7
variable.other#808599ff
variable.parameter#7785abffitalic
variable.language#ff9454ffitalic
variable.language.this#ff9454ffitalic
variable.language.super#ff9454ffitalic
entity.name.function#f5e0dcff
support.function#96d1d0ff
meta.function-call.generic#f5e0dcff
entity.name.class#dba1d8ffbold underline
entity.other.inherited-class#dba1d8ffbold underline
support.class#dba1d8ff
entity.name.type#dba1d8ff
support.type#dba1d8ff
support.type.builtin#dba1d8ff
entity.name.tag#dba1d8ff
support.class.component#353a4aff
support.class.component.jsx#353a4aff
entity.other.attribute-name#808599ff
meta.tag keyword.operator.assignment#808599ff
meta.tag.attributes#808599ff
support.type.property-name#808599ff
support.type.property-name.css#808599ff
meta.object-literal.key#808599ff
variable.other.property#808599ff
list.hoverBackground#090a1194
list.hoverForeground#949ab0e0
support.type.property-name.css#808599ff
meta.property-name#808599ff
support.constant.property-value#6cb2bcff
constant.other.color#6cb2bcff
meta.property-value#6cb2bcff
meta.selector#dba1d8ff
entity.name.tag.css#dba1d8ff
entity.other.attribute-name.class.css#dba1d8ff
entity.other.attribute-name.id.css#dba1d8ff
punctuation#424758ff
punctuation.definition#362942ff
punctuation.separator#424758ff
punctuation.terminator#424758ff
punctuation.accessor#6177b6ff
punctuation.definition.tag#362942ff
meta.brace#362942ff
meta.brace.round#362942ff
meta.brace.square#362942ff
meta.brace.curly#362942ff
entity.name.function.decorator#eea8ece6
punctuation.definition.decorator#eea8ece6
markup.heading#8ac3cbcfbold
entity.name.section.markdown#8ac3cbcfbold
markup.bold#8ac3cbcfbold
markup.italic#7cb57dffitalic
markup.inline.raw#7cb57dff
markup.fenced_code.block.markdown#7cb57dff
markup.quote#353a4affitalic
markup.underline.link#f5e0dcffunderline
markup.inserted#358989ff
markup.inserted.git_gutter#358989ff
markup.changed#6177b6ff
markup.changed.git_gutter#6177b6ff
markup.deleted#9a4f53ff
markup.deleted.git_gutter#9a4f53ff
invalid#ff6976ff
invalid.illegal#ff6976ff
invalid.deprecated#353a4aff
comment.line.todo#eea8ece6bold
comment.block.todo#eea8ece6bold
comment.line.fixme#f9d460ffbold
comment.block.fixme#f9d460ffbold
comment.line.note#93b9bfffbold
comment.block.note#93b9bfffbold
string.quoted.docstring#353a4affitalic
string.quoted.docstring.multi.python#353a4affitalic
string.quoted.docstring.raw.multi.python#353a4affitalic
source.yaml#949ab0e0
entity.name.tag.yaml#808599ff
string.unquoted.plain.out.yaml#7cb57dff
string.quoted.single.yaml#7cb57dff
meta.structure.dictionary.key.json#808599ff
support.type.property-name.json#808599ff
meta.structure.dictionary.value.json#7cb57dff
meta.property-list.css#808599ff