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#7db8cf
  • activityBar.background#dbeaf8
  • activityBar.border#d4e5f5
  • activityBar.foreground#2d5158
  • activityBar.inactiveForeground#95adb8
  • activityBarBadge.background#027c9b
  • activityBarBadge.foreground#fee4ce
  • badge.background#d15123
  • badge.foreground#fee4ce
  • banner.background#c7742a
  • banner.foreground#4b310c
  • banner.iconForeground#8cb7bf
  • button.background#9f7e56
  • button.border#00000000
  • button.foreground#251400
  • button.secondaryBackground#8cb7bf
  • button.secondaryForeground#4b310c
  • button.separator#a1a09a
  • charts.blue#1e4950
  • charts.foreground#4b310c
  • charts.green#027c9b
  • charts.lines#938e82
  • charts.orange#fca02f
  • charts.purple#68d4f1
  • charts.red#d15123
  • charts.yellow#fdd39f
  • diffEditor.border#cbdff0
  • diffEditor.diagonalFill#c1d8eb
  • diffEditor.insertedLineBackground#1e86a64d
  • diffEditor.insertedTextBackground#1e86a64d
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedLineBackground#c94a1c4d
  • diffEditor.removedTextBackground#c94a1c4d
  • diffEditor.removedTextBorder#00000000
  • disabledForeground#938e82
  • editor.background#dbeaf8
  • editor.foreground#4b310c
  • editor.lineHighlightBackground#cee1f2
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#8bb2cf
  • editor.selectionForeground#251400
  • editorCursor.foreground#6e2b00
  • editorError.foreground#003b53
  • editorGroup.border#cbdff0
  • editorGroup.dropBackground#c1d8eb
  • editorGroup.dropIntoPromptBackground#c1d8eb
  • editorGroup.dropIntoPromptBorder#00000000
  • editorGroup.dropIntoPromptForeground#a8b4c0
  • editorGroupHeader.tabsBackground#dbeaf8
  • editorGutter.addedBackground#1e86a6
  • editorGutter.deletedBackground#c94a1c
  • editorHoverWidget.background#bdb4a7
  • editorHoverWidget.border#4b310c40
  • editorHoverWidget.foreground#4b310c
  • editorHoverWidget.highlightForeground#251400
  • editorHoverWidget.statusBarBackground#dbeaf8
  • editorInfo.foreground#8cb7bf
  • editorLineNumber.activeForeground#9fa8b2
  • editorLineNumber.foreground#a6c5de
  • editorOverviewRuler.addedForeground#1e86a6
  • editorOverviewRuler.deletedForeground#c94a1c
  • editorOverviewRuler.errorForeground#c94a1c
  • editorOverviewRuler.infoForeground#8cb7bf
  • editorOverviewRuler.warningForeground#6e2b00
  • editorRuler.foreground#afcfdd
  • editorWarning.foreground#6e2b00
  • editorWidget.background#bdb4a7
  • editorWidget.border#4b310c40
  • editorWidget.foreground#4b310c
  • errorForeground#c94a1c
  • focusBorder#99c1d0
  • foreground#4b310c
  • gitDecoration.addedResourceForeground#1e86a6
  • gitDecoration.conflictingResourceForeground#c94a1c
  • gitDecoration.deletedResourceForeground#c94a1c
  • gitDecoration.ignoredResourceForeground#4b310c66
  • gitDecoration.modifiedResourceForeground#006272
  • gitDecoration.stageDeletedResourceForeground#cd6a48
  • gitDecoration.stageModifiedResourceForeground#2c7d8d
  • gitDecoration.untrackedResourceForeground#6e2b00
  • gitlens.decorations.addedForegroundColor#1e86a6
  • gitlens.decorations.copiedForegroundColor#1e86a6
  • gitlens.decorations.deletedForegroundColor#c94a1c
  • gitlens.decorations.ignoredForegroundColor#a1a09a
  • gitlens.decorations.modifiedForegroundColor#006272
  • gitlens.decorations.untrackedForegroundColor#6e2b00
  • inlineChatDiff.inserted#1e86a633
  • inlineChatDiff.removed#c94a1c33
  • list.activeSelectionBackground#a6c5de
  • list.activeSelectionForeground#251400
  • list.activeSelectionIconForeground#251400
  • list.errorForeground#c94a1c
  • list.focusBackground#bbd4e8
  • list.focusForeground#4b310c
  • list.focusOutline#00000000
  • list.hoverBackground#c6dbee
  • list.hoverForeground#4b310c
  • list.inactiveFocusBackground#c6dbee
  • list.inactiveFocusOutline#00000000
  • list.inactiveSelectionBackground#bbd4e8
  • list.inactiveSelectionForeground#4b310c
  • list.inactiveSelectionIconForeground#4b310c
  • list.invalidItemForeground#c94a1c
  • list.warningForeground#6e2b00
  • merge.border#cbdff0
  • panel.border#cbdff0
  • problemsErrorIcon.foreground#c94a1c
  • problemsInfoIcon.foreground#8cb7bf
  • problemsWarningIcon.foreground#6e2b00
  • selection.background#8bb2cf
  • sideBar.background#dbeaf8
  • sideBar.border#cbdff0
  • sideBar.foreground#6e6a63
  • sideBarSectionHeader.background#dbeaf8
  • sideBarSectionHeader.foreground#251400
  • sideBarTitle.foreground#4b310c
  • statusBar.background#dbeaf8
  • statusBar.border#00000000
  • statusBar.debuggingBackground#006272
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#251400
  • statusBar.foreground#9fa8b2
  • statusBar.noFolderBackground#a4becf
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#003b53
  • statusBarItem.activeBackground#251400
  • statusBarItem.errorBackground#c94a1c
  • statusBarItem.errorForeground#251400
  • statusBarItem.hoverBackground#c1def8
  • statusBarItem.warningBackground#6e2b00
  • statusBarItem.warningForeground#9f7e56
  • tab.activeBackground#c1def8
  • tab.activeForeground#4b310c
  • tab.border#bbd6e1
  • tab.hoverBackground#b4d1dc
  • tab.hoverForeground#807f7c
  • tab.inactiveBackground#dbeaf8
  • tab.inactiveForeground#9fa8b2
  • terminal.ansiBlack#17384c
  • terminal.ansiBlue#1e4950
  • terminal.ansiBrightBlack#434b53
  • terminal.ansiBrightBlue#1bbcdd
  • terminal.ansiBrightCyan#87acb4
  • terminal.ansiBrightGreen#628d98
  • terminal.ansiBrightMagenta#bbe3ee
  • terminal.ansiBrightRed#d48678
  • terminal.ansiBrightWhite#fee4ce
  • terminal.ansiBrightYellow#fdd39f
  • terminal.ansiCyan#50a3b5
  • terminal.ansiGreen#027c9b
  • terminal.ansiMagenta#68d4f1
  • terminal.ansiRed#d15123
  • terminal.ansiWhite#deb88d
  • terminal.ansiYellow#fca02f
  • terminal.background#dbeaf8
  • terminal.foreground#4b310c
  • terminal.selectionBackground#8bb2cf
  • terminal.selectionForeground#251400
  • textLink.activeForeground#2d5158
  • textLink.foreground#006272
  • titleBar.activeBackground#c3deee
  • titleBar.activeForeground#446e79
  • titleBar.border#00000000
  • toolbar.activeBackground#d4aaa0
  • toolbar.hoverBackground#d7cacc
  • toolbar.hoverOutline#00000000
  • welcomePage.background#d4e5f5
  • welcomePage.progress.background#a6c5de
  • welcomePage.progress.foreground#006272
  • welcomePage.tileBackground#c1d8eb
  • welcomePage.tileBorder#aeb5ba
  • welcomePage.tileHoverBackground#b3cee5
  • widget.border#4b310c40
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string#4b310c
string.template#027c9b
string.template punctuation#50a3b5
constant.language#fca02fitalic
constant.numeric#50a3b5
constant.language.json, constant.language.import-export-all#027c9b
support.class#50a3b5
support.variable, support.constant#4b310c
variable, meta.definition.variable entity.name.function#4b310c
source.vue meta.attribute variablebold
variable.parameteritalic
variable.object.property, meta.field.declaration string, variable.other.object.property#027c9b
support.variable.property, variable.other.property#68d4f1
variable.language.thisitalic
modifier, support.type.object#027c9b
keyword#fca02f
keyword.control.loop, keyword.control.conditional, keyword.control.trycatch#fca02f
keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.default#251400italic
keyword.control.flow#68d4f1italic
entity.name.function, support.function#50a3b5
new.expr entity.name.function#251400bold
storage.type, storage.modifier#027c9bitalic
support.module, support.node#4b310citalic
support.type#68d4f1
entity.name.type, entity.other.inherited-class#251400
comment#00627266italic
entity.name.type.class#68d4f1
meta.definition.method entity.name.function#50a3b5
meta.function entity.name.function#50a3b5
template.expression.begin, template.expression.end#027c9b
entity.name.tag.yaml#68d4f1
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json, meta.attribute entity.name, meta.attribute punctuation.separator.label#50a3b5italic
entity.other.attribute-name.class#027c9b
entity.other.attribute-name.id#50a3b5
source.css#fca02f
meta.tag, punctuation.definition.tag#027c9b
entity.name.tag#50a3b5
meta.tag entity.other.attribute-name#027c9bitalic
entity.other.attribute-name#fca02f
markup.heading#027c9b
text.html.markdown meta.link.inline, meta.link.reference#4b310c
text.html.markdown beginning.punctuation.definition.list#027c9b
markup.italic#9fa8b2italic
markup.bold#251400bold
markup.bold markup.italic, markup.italic markup.bold#251400
keyword.other.definition.ini#4b310c
entity.name.section.group-title.ini#027c9b
punctuation.definition.tag#50a3b5
storage.modifier.ts, entity.name.type.module.ts, support.type.primitive.ts#50a3b5
entity.name.type.instance.jsdoc#50a3b5
punctuation.separator.parameter#00627266
meta.brace, punctuation.definition.parameters, punctuation.definition.block, punctuation.terminator.statement, punctuation.separator.comma, punctuation.section.embedded#00627266
token.info-token#8cb7bf
token.warn-token#fca02f
token.error-token#c94a1c
token.debug-token#027c9b