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.activeBackground#dbe8f7aa
  • activityBar.activeBorder#005fa3
  • activityBar.background#f7f8fa
  • activityBar.foreground#1f2430
  • activityBar.inactiveForeground#6b7280
  • activityBarBadge.background#4f6fa8
  • activityBarBadge.foreground#111827
  • badge.background#4f6fa8
  • badge.foreground#111827
  • breadcrumb.activeSelectionForeground#0067b8
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#1f2430
  • breadcrumb.foreground#6b7280
  • button.background#dbe8f7
  • button.foreground#1f2430
  • button.hoverBackground#c8dcf4
  • button.secondaryBackground#f7f8fa
  • button.secondaryForeground#1f2430
  • button.secondaryHoverBackground#dbe8f7aa
  • charts.blue#005fa3
  • charts.foreground#1f2430
  • charts.green#1f7a36
  • charts.lines#7b8190
  • charts.orange#8a5d00
  • charts.purple#0067b8
  • charts.red#b42318
  • charts.yellow#9a6700
  • chat.avatarBackground#dbe8f7
  • chat.avatarForeground#1f2430
  • chat.requestBackground#ffffff
  • chat.requestBorder#00000000
  • chat.requestBubbleBackground#ffffff
  • chat.requestBubbleHoverBackground#ffffff
  • chat.requestCodeBorder#00000000
  • chat.slashCommandBackground#d3e2f5
  • chat.slashCommandForeground#0067b8
  • debugIcon.breakpointForeground#0067b8
  • debugIcon.startForeground#1f7a36
  • debugIcon.stopForeground#b42318
  • debugToolBar.background#f7f8fa
  • descriptionForeground#6b7280
  • diffEditor.diagonalFill#ffffff
  • diffEditor.insertedTextBackground#1f7a3633
  • diffEditor.removedTextBackground#b4231833
  • disabledForeground#7b8190
  • dropdown.background#f7f8fa
  • dropdown.border#00000000
  • dropdown.foreground#1f2430
  • editor.background#ffffff
  • editor.findMatchBackground#c8dcf4dd
  • editor.findMatchHighlightBackground#c8dcf4aa
  • editor.findRangeHighlightBackground#dbe8f788
  • editor.foreground#1f2430
  • editor.hoverHighlightBackground#dbe8f770
  • editor.inactiveSelectionBackground#dbe8f7cc
  • editor.lineHighlightBackground#ffffff
  • editor.rangeHighlightBackground#dbe8f755
  • editor.selectionBackground#dbe8f7
  • editor.selectionHighlightBackground#dbe8f7aa
  • editor.wordHighlightBackground#dbe8f788
  • editor.wordHighlightStrongBackground#c8dcf4aa
  • editorBracketMatch.background#dbe8f788
  • editorBracketMatch.border#005fa3
  • editorCursor.foreground#0067b8
  • editorError.foreground#b42318
  • editorGroup.border#00000000
  • editorGroupHeader.noTabsBackground#ffffff
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#1f7a36
  • editorGutter.deletedBackground#b42318
  • editorGutter.modifiedBackground#9a6700
  • editorHint.foreground#0a7f9e
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#00000000
  • editorIndentGuide.activeBackground1#7b8190
  • editorIndentGuide.background1#7b819066
  • editorInfo.foreground#0067b8
  • editorLineNumber.activeForeground#1f2430
  • editorLineNumber.foreground#6b7280
  • editorOverviewRuler.addedForeground#1f7a3688
  • editorOverviewRuler.bracketMatchForeground#005fa3cc
  • editorOverviewRuler.deletedForeground#b4231888
  • editorOverviewRuler.errorForeground#b42318cc
  • editorOverviewRuler.infoForeground#0067b8cc
  • editorOverviewRuler.modifiedForeground#9a670088
  • editorOverviewRuler.warningForeground#9a6700cc
  • editorOverviewRuler.wordHighlightForeground#c8dcf4dd
  • editorRuler.foreground#dbe8f7aa
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#00000000
  • editorSuggestWidget.focusHighlightForeground#0067b8
  • editorSuggestWidget.foreground#1f2430
  • editorSuggestWidget.highlightForeground#0067b8
  • editorSuggestWidget.selectedBackground#dbe8f7
  • editorWarning.foreground#9a6700
  • editorWhitespace.foreground#7b819055
  • editorWidget.background#ffffff
  • editorWidget.border#00000000
  • errorForeground#b42318
  • focusBorder#00000000
  • foreground#1f2430
  • gitDecoration.addedResourceForeground#1f7a36
  • gitDecoration.conflictingResourceForeground#9a6700
  • gitDecoration.deletedResourceForeground#b42318
  • gitDecoration.ignoredResourceForeground#7b8190
  • gitDecoration.modifiedResourceForeground#9a6700
  • gitDecoration.submoduleResourceForeground#7b56d1
  • gitDecoration.untrackedResourceForeground#1f7a36
  • icon.foreground#6b7280
  • inlineChat.background#ffffff
  • inlineChat.border#00000000
  • inlineChatInput.background#ffffff
  • inlineChatInput.border#00000000
  • inlineChatInput.focusBorder#00000000
  • inlineChatInput.placeholderForeground#6b7280
  • input.background#ffffff
  • input.border#00000000
  • input.foreground#1f2430
  • input.placeholderForeground#6b7280
  • inputOption.activeBackground#dbe8f7aa
  • inputOption.activeBorder#00000000
  • inputOption.hoverBackground#dbe8f770
  • inputValidation.errorBackground#b4231822
  • inputValidation.errorBorder#b42318
  • inputValidation.infoBackground#dbe8f755
  • inputValidation.infoBorder#005fa3
  • inputValidation.warningBackground#9a670022
  • inputValidation.warningBorder#9a6700
  • keybindingLabel.background#f7f8fa
  • keybindingLabel.border#00000000
  • keybindingLabel.bottomBorder#00000000
  • keybindingLabel.foreground#1f2430
  • list.activeSelectionBackground#dbe8f7
  • list.activeSelectionForeground#1f2430
  • list.errorForeground#b42318
  • list.focusBackground#dbe8f7
  • list.focusForeground#1f2430
  • list.highlightForeground#0067b8
  • list.hoverBackground#dbe8f7aa
  • list.hoverForeground#1f2430
  • list.inactiveSelectionBackground#dbe8f7cc
  • list.inactiveSelectionForeground#1f2430
  • list.warningForeground#9a6700
  • menubar.selectionBackground#dbe8f7cc
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#1f2430
  • minimap.background#f7f8fa
  • minimap.errorHighlight#b42318aa
  • minimap.findMatchHighlight#c8dcf4dd
  • minimap.selectionHighlight#dbe8f7dd
  • minimap.warningHighlight#9a6700aa
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#0067b8
  • notifications.background#f7f8fa
  • notifications.border#00000000
  • notifications.foreground#1f2430
  • notificationsErrorIcon.foreground#b42318
  • notificationsInfoIcon.foreground#0067b8
  • notificationsWarningIcon.foreground#9a6700
  • notificationToast.border#00000000
  • panel.background#f7f8fa
  • panel.border#c9c2b6
  • panelInput.border#00000000
  • panelSectionHeader.background#ffffff
  • panelSectionHeader.border#00000000
  • panelSectionHeader.foreground#0067b8
  • panelTitle.activeBorder#005fa3
  • panelTitle.activeForeground#1f2430
  • panelTitle.inactiveForeground#6b7280
  • peekView.border#00000000
  • peekViewEditor.background#f7f8fa
  • peekViewEditor.matchHighlightBackground#c8dcf4aa
  • peekViewResult.background#ffffff
  • peekViewResult.matchHighlightBackground#c8dcf4aa
  • peekViewResult.selectionBackground#dbe8f7
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#6b7280
  • peekViewTitleLabel.foreground#1f2430
  • pickerGroup.border#00000000
  • pickerGroup.foreground#0067b8
  • problemsErrorIcon.foreground#b42318
  • problemsInfoIcon.foreground#0067b8
  • problemsWarningIcon.foreground#9a6700
  • progressBar.background#005fa3
  • quickInput.background#f7f8fa
  • quickInput.foreground#1f2430
  • quickInputList.focusBackground#dbe8f7
  • sash.hoverBorder#005fa3
  • scrollbarSlider.activeBackground#005fa366
  • scrollbarSlider.background#7b819055
  • scrollbarSlider.hoverBackground#7b819088
  • settings.headerForeground#0067b8
  • settings.modifiedItemIndicator#005fa3
  • sideBar.background#f7f8fa
  • sideBar.border#c9c2b6
  • sideBar.foreground#1f2430
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#6b7280
  • sideBarTitle.foreground#1f2430
  • statusBar.background#ffffff
  • statusBar.border#c9c2b6
  • statusBar.debuggingBackground#dbe8f7
  • statusBar.debuggingForeground#1f2430
  • statusBar.foreground#1f2430
  • statusBar.noFolderBackground#ffffff
  • statusBar.noFolderForeground#6b7280
  • statusBarItem.activeBackground#dbe8f7cc
  • statusBarItem.hoverBackground#dbe8f7aa
  • statusBarItem.prominentBackground#dbe8f7
  • statusBarItem.prominentHoverBackground#c8dcf4
  • symbolIcon.classForeground#0067b8
  • symbolIcon.functionForeground#005fa3
  • symbolIcon.interfaceForeground#0a7f9e
  • symbolIcon.keywordForeground#0067b8
  • symbolIcon.methodForeground#005fa3
  • symbolIcon.namespaceForeground#0067b8
  • symbolIcon.numberForeground#8a5d00
  • symbolIcon.stringForeground#0a7f9e
  • symbolIcon.variableForeground#1f2430
  • tab.activeBackground#ffffff
  • tab.activeBorder#00000000
  • tab.activeBorderTop#005fa3
  • tab.activeForeground#1f2430
  • tab.border#00000000
  • tab.hoverBackground#dbe8f7aa
  • tab.hoverForeground#1f2430
  • tab.inactiveBackground#f7f8fa
  • tab.inactiveForeground#6b7280
  • tab.inactiveModifiedBorder#0a7f9e
  • tab.lastPinnedBorder#00000000
  • tab.modifiedBorder#005fa3
  • terminal.ansiBlack#f7f8fa
  • terminal.ansiBlue#005fa3
  • terminal.ansiBrightBlack#7b8190
  • terminal.ansiBrightBlue#0067b8
  • terminal.ansiBrightCyan#267b92
  • terminal.ansiBrightGreen#2a8f42
  • terminal.ansiBrightMagenta#7b56d1
  • terminal.ansiBrightRed#c13d3a
  • terminal.ansiBrightWhite#111827
  • terminal.ansiBrightYellow#b7791f
  • terminal.ansiCyan#0a7f9e
  • terminal.ansiGreen#1f7a36
  • terminal.ansiMagenta#6e42c1
  • terminal.ansiRed#b42318
  • terminal.ansiWhite#1f2430
  • terminal.ansiYellow#9a6700
  • terminal.background#f7f8fa
  • terminal.border#c9c2b6
  • terminal.foreground#1f2430
  • terminal.inactiveSelectionBackground#dbe8f788
  • terminal.selectionBackground#dbe8f7cc
  • terminalCursor.background#f7f8fa
  • terminalCursor.foreground#0067b8
  • testing.iconErrored#9a6700
  • testing.iconFailed#b42318
  • testing.iconPassed#1f7a36
  • testing.iconQueued#0067b8
  • testing.iconUnset#6b7280
  • testing.runAction#005fa3
  • textCodeBlock.background#ffffff
  • textLink.activeForeground#0067b8
  • textLink.foreground#005fa3
  • textPreformat.foreground#0a7f9e
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#1f2430
  • titleBar.border#c9c2b6
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#6b7280
  • tree.indentGuidesStroke#7b819066
  • tree.tableColumnsBorder#00000000
  • tree.tableOddRowsBackground#ffffff
  • welcomePage.background#f7f8fa
  • welcomePage.progress.background#dbe8f7aa
  • welcomePage.progress.foreground#005fa3
  • window.activeBorder#00000000
  • window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7b8190italic
variable, string constant.other.placeholder#1f2430
constant.other.color#267b92
invalid, invalid.illegal#b42318
keyword, storage.type, storage.modifier#6e42c1
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#005fa3
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#0a7f9e
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#005fa3
meta.block variable.other#1f2430
support.other.variable, string.other.link#267b92
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#8a5d00
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#2a8f42
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#7b56d1
support.type#005fa3
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#267b92
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#0067b8
variable.language#6e42c1italic
entity.name.method.js#005fa3italic
meta.class-method.js entity.name.function.js, variable.function.constructor#005fa3
entity.other.attribute-name#8a5d00
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#8a5d00italic
entity.other.attribute-name.class#8a5d00
source.sass keyword.control#7b56d1
markup.inserted#1f7a36
markup.deleted#b42318
markup.changed#9a6700
string.regexp#7b56d1
constant.character.escape#267b92
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6e42c1italic
source.js constant.other.object.key.js string.unquoted.label.js#6e42c1italic
source.json meta.structure.dictionary.json support.type.property-name.json#0067b8
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#0a7f9e
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8a5d00
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#6e42c1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#005fa3
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#267b92
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9a6700
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c13d3a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#2a8f42
text.html.markdown, punctuation.definition.list_item.markdown#1f2430
text.html.markdown markup.inline.raw.markdown#8a5d00
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#7b8190
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#7b56d1
markup.italic#0067b8italic
markup.bold, markup.bold string#005fa3bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#6e42c1bold
markup.underline#8a5d00underline
markup.quote punctuation.definition.blockquote.markdown#7b8190
markup.quoteitalic
string.other.link.title.markdown#005fa3
string.other.link.description.title.markdown#0a7f9e
constant.other.reference.link.markdown#8a5d00
markup.raw.block#267b92
markup.raw.block.fenced.markdown#7b819088
punctuation.definition.fenced.markdown#7b819088
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#1f2430
variable.language.fenced.markdown#7b8190
meta.separator#7b8190bold
markup.table#1f2430