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#593e19
  • banner.iconForeground#8cb7bf
  • button.background#9f7e56
  • button.border#00000000
  • button.foreground#250200
  • button.secondaryBackground#8cb7bf
  • button.secondaryForeground#593e19
  • button.separator#a7a59f
  • charts.blue#1e4950
  • charts.foreground#593e19
  • charts.green#027c9b
  • charts.lines#9a9489
  • 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#9a9489
  • editor.background#dbeaf8
  • editor.foreground#593e19
  • 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#593e1940
  • editorHoverWidget.foreground#593e19
  • editorHoverWidget.highlightForeground#250200
  • 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#593e1940
  • editorWidget.foreground#593e19
  • errorForeground#c94a1c
  • focusBorder#99c1d0
  • foreground#593e19
  • gitDecoration.addedResourceForeground#1e86a6
  • gitDecoration.conflictingResourceForeground#c94a1c
  • gitDecoration.deletedResourceForeground#c94a1c
  • gitDecoration.ignoredResourceForeground#593e1966
  • 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#a7a59f
  • gitlens.decorations.modifiedForegroundColor#006272
  • gitlens.decorations.untrackedForegroundColor#6e2b00
  • inlineChatDiff.inserted#1e86a633
  • inlineChatDiff.removed#c94a1c33
  • list.activeSelectionBackground#a6c5de
  • list.activeSelectionForeground#250200
  • list.activeSelectionIconForeground#250200
  • list.errorForeground#c94a1c
  • list.focusBackground#bbd4e8
  • list.focusForeground#593e19
  • list.focusOutline#00000000
  • list.hoverBackground#c6dbee
  • list.hoverForeground#593e19
  • list.inactiveFocusBackground#c6dbee
  • list.inactiveFocusOutline#00000000
  • list.inactiveSelectionBackground#bbd4e8
  • list.inactiveSelectionForeground#593e19
  • list.inactiveSelectionIconForeground#593e19
  • 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#6e5f63
  • sideBarSectionHeader.background#dbeaf8
  • sideBarSectionHeader.foreground#250200
  • sideBarTitle.foreground#593e19
  • 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#250200
  • statusBarItem.errorBackground#c94a1c
  • statusBarItem.errorForeground#250200
  • statusBarItem.hoverBackground#c1def8
  • statusBarItem.warningBackground#6e2b00
  • statusBarItem.warningForeground#9f7e56
  • tab.activeBackground#c1def8
  • tab.activeForeground#593e19
  • tab.border#bbd6e1
  • tab.hoverBackground#b4d1dc
  • tab.hoverForeground#80767c
  • 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#593e19
  • 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#aeb0ba
  • welcomePage.tileHoverBackground#b3cee5
  • widget.border#593e1940
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string#593e19
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#593e19
variable, meta.definition.variable entity.name.function#593e19
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.other.constant#250200
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#250200italic
keyword.control.flow#68d4f1italic
entity.name.function, support.function#50a3b5
new.expr entity.name.function#250200bold
storage.type, storage.modifier#027c9bitalic
support.module, support.node#593e19italic
support.type#68d4f1
entity.name.type, entity.other.inherited-class#250200
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#593e19
text.html.markdown beginning.punctuation.definition.list#027c9b
markup.italic#9fa8b2italic
markup.bold#250200bold
markup.bold markup.italic, markup.italic markup.bold#250200
keyword.other.definition.ini#593e19
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