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#6d7a80
  • activityBar.background#5a666b
  • activityBar.foreground#f1f5f7
  • activityBar.inactiveForeground#aab4b9
  • activityBarBadge.background#3b8fc4
  • activityBarTop.activeBackground#dce9ed55
  • activityBarTop.activeBorder#3b8fc4
  • activityBarTop.background#e8f0f2
  • activityBarTop.border#9aaab0
  • activityBarTop.foreground#28658f
  • activityBarTop.inactiveForeground#536773
  • badge.background#3b8fc4
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#28658f
  • breadcrumb.background#FFFFFF
  • breadcrumb.focusForeground#28658f
  • breadcrumb.foreground#536773
  • button.background#3b8fc4
  • button.foreground#ffffff
  • button.hoverBackground#28658f
  • chat.background#f8fbfc
  • chat.editedFileForeground#8a5a00
  • chat.requestBubbleBackground#e8f0f2
  • chat.requestBubbleHoverBackground#dce9ed
  • chat.slashCommandBackground#b8d8e47a
  • chat.slashCommandForeground#245b72
  • checkbox.background#e8f0f2
  • checkbox.border#819daa
  • checkbox.foreground#245b72
  • commandCenter.activeBackground#eaf1f3
  • commandCenter.activeBorder#3b8fc4
  • commandCenter.background#f8fbfc
  • commandCenter.border#c4d0d5
  • commandCenter.foreground#29383e
  • diffEditor.border#c4d0d5
  • diffEditor.insertedLineBackground#3b9b6215
  • diffEditor.insertedTextBackground#3b9b6225
  • diffEditor.move.border#819daa
  • diffEditor.removedLineBackground#c84f4f15
  • diffEditor.removedTextBackground#c84f4f25
  • dropdown.background#f8fbfc
  • dropdown.border#c4d0d5
  • dropdown.foreground#29383e
  • dropdown.listBackground#f8fbfc
  • editor.background#FFFFFF
  • editor.findMatchBackground#ff003366
  • editor.findMatchBorder#00539766
  • editor.findMatchHighlightBackground#2480672f
  • editor.foreground#222222
  • editor.lineHighlightBackground#eef3f5
  • editor.selectionBackground#b8d4e3
  • editor.selectionHighlightBackground#0077FF2f
  • editor.wordHighlightStrongBorder#0077FF34
  • editorBracketHighlight.foreground1#ff0033
  • editorBracketHighlight.foreground2#0033ff
  • editorBracketHighlight.foreground3#00D810
  • editorBracketHighlight.foreground4#FF23C6
  • editorBracketHighlight.foreground5#00A4FF
  • editorBracketHighlight.foreground6#39a200
  • editorCursor.foreground#24333a
  • editorError.border#c43d3d00
  • editorError.foreground#c43d3d
  • editorGhostText.foreground#53677399
  • editorGroup.dropBackground#3b8fc430
  • editorGroupHeader.tabsBackground#e8f0f2
  • editorGutter.addedBackground#3b9b62
  • editorGutter.deletedBackground#c84f4f
  • editorGutter.modifiedBackground#3b8fc4
  • editorIndentGuide.background#d5dde0
  • editorInfo.border#28658f00
  • editorInfo.foreground#28658f
  • editorInlayHint.background#dbe8ed99
  • editorInlayHint.foreground#536773
  • editorLink.activeForeground#28658f
  • editorOverviewRuler.errorForeground#c43d3d
  • editorOverviewRuler.infoForeground#28658f
  • editorOverviewRuler.warningForeground#a66f00
  • editorStickyScroll.background#f8fbfc
  • editorStickyScroll.border#c4d0d5
  • editorStickyScroll.shadow#535c6933
  • editorStickyScrollHover.background#eaf1f3
  • editorSuggestWidget.background#f8fbfc
  • editorSuggestWidget.border#819daa
  • editorSuggestWidget.foreground#29383e
  • editorSuggestWidget.highlightForeground#3b8fc4
  • editorSuggestWidget.selectedBackground#dce9ed
  • editorSuggestWidget.selectedForeground#1a262c
  • editorWarning.border#a66f0000
  • editorWarning.foreground#a66f00
  • editorWhitespace.foreground#404040
  • editorWidget.background#e8f0f2
  • editorWidget.border#c4d0d5
  • focusBorder#3b8fc4
  • gitDecoration.addedResourceForeground#1f633a
  • gitDecoration.conflictingResourceForeground#8f3663
  • gitDecoration.deletedResourceForeground#a62f2f
  • gitDecoration.ignoredResourceForeground#536773
  • gitDecoration.modifiedResourceForeground#7d5300
  • gitDecoration.untrackedResourceForeground#245b72
  • inlineChat.background#f8fbfc
  • inlineChat.border#819daa
  • inlineChat.foreground#29383e
  • inputValidation.errorBackground#f9dede
  • inputValidation.errorBorder#c43d3d
  • inputValidation.errorForeground#6e2020
  • inputValidation.infoBackground#dcecf5
  • inputValidation.infoBorder#28658f
  • inputValidation.infoForeground#23465d
  • inputValidation.warningBackground#fff1c9
  • inputValidation.warningBorder#a66f00
  • inputValidation.warningForeground#5e4800
  • list.activeSelectionBackground#dce9ed
  • list.activeSelectionForeground#1a262c
  • list.filterMatchBorder#0077FF
  • list.focusBackground#dce9ed
  • list.highlightForeground#3b8fc4
  • list.hoverBackground#e6eef1
  • list.hoverForeground#222222
  • list.inactiveSelectionBackground#b9c6cc
  • list.inactiveSelectionForeground#1a262c
  • menu.background#f8fbfc
  • menu.border#819daa
  • menu.foreground#29383e
  • menu.selectionBackground#dce9ed
  • menu.selectionForeground#1a262c
  • menu.separatorBackground#c4d0d5
  • merge.border#819daa
  • merge.currentContentBackground#3b9b6220
  • merge.currentHeaderBackground#3b9b6255
  • merge.incomingContentBackground#3b8fc420
  • merge.incomingHeaderBackground#3b8fc455
  • minimap.background#e8eef0
  • minimap.findMatchHighlight#d49a2c
  • minimap.selectionHighlight#a4bec9
  • notebook.cellBorderColor#cbd9de
  • notebook.focusedCellBorder#3b8f9c
  • notebook.focusedRowBorder#819daa
  • notebook.selectedCellBackground#c8ddf150
  • notificationCenter.border#819daa
  • notificationCenterHeader.background#e8f0f2
  • notificationCenterHeader.foreground#29383e
  • notifications.background#f8fbfc
  • notifications.border#c4d0d5
  • notifications.foreground#29383e
  • notificationToast.border#819daa
  • panel.background#e8f0f2
  • panel.border#9aaab0
  • peekView.background#f8fbfc
  • peekView.border#819daa
  • peekViewEditor.background#f8fbfc
  • peekViewResult.background#e8f0f2
  • peekViewResult.fileForeground#245b72
  • peekViewResult.lineForeground#536773
  • quickInput.background#f8fbfc
  • quickInput.foreground#29383e
  • quickInputList.focusBackground#dce9ed
  • quickInputList.focusForeground#1a262c
  • quickInputList.focusIconForeground#28658f
  • quickInputTitle.background#e8f0f2
  • sash.hoverBorder#3b8fc4
  • scrollbar.shadow#aaaaaa99
  • scrollbarSlider.activeBackground#535c6988
  • scrollbarSlider.background#535c6933
  • scrollbarSlider.hoverBackground#535c6955
  • sideBar.background#e8f0f2
  • sideBarActivityBarTop.border#9aaab0
  • sideBarSectionHeader.background#dfe7ea
  • sideBarSectionHeader.border#9aaab0
  • sideBarSectionHeader.foreground#29383e
  • sideBarTitle.foreground#536773
  • statusBar.background#e8f0f2
  • statusBar.debuggingBackground#28658f
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#536773
  • statusBar.noFolderBackground#e8f0f2
  • statusBarItem.activeBackground#cbdde3
  • statusBarItem.hoverBackground#dce9ed
  • statusBarItem.prominentBackground#5a666b
  • tab.activeBackground#FFFFFF
  • tab.activeModifiedBorder#3b8fc4
  • tab.border#e8f0f2
  • tab.hoverForeground#111111
  • tab.inactiveBackground#dfe7ea
  • tab.inactiveForeground#536773
  • tab.inactiveModifiedBorder#3b8fc4
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#28658f
  • terminal.ansiBrightBlack#6c7680
  • terminal.ansiBrightBlue#55b4d4
  • terminal.ansiBrightCyan#39cbcc
  • terminal.ansiBrightGreen#86b300
  • terminal.ansiBrightMagenta#fe76ff
  • terminal.ansiBrightRed#f07171
  • terminal.ansiBrightWhite#aebbc2
  • terminal.ansiBrightYellow#ff9940
  • terminal.ansiCyan#207f4c
  • terminal.ansiGreen#43b244
  • terminal.ansiMagenta#a37acc
  • terminal.ansiRed#f51818
  • terminal.ansiWhite#6c7880
  • terminal.ansiYellow#f2ae49
  • terminal.background#e8f0f2
  • terminal.border#9aaab0
  • terminal.foreground#383838
  • terminal.selectionBackground#b8d4e380
  • titleBar.activeBackground#e8f0f2
  • widget.shadow#535c6925

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable#006600bold
string, punctuation.definition.string#cc33cc—
string, entity.other.inherited-class#cc33cc—
variable#006600bold
string, punctuation.definition.string#cc33cc—
string, entity.other.inherited-class#cc33cc—
hyperlink#0d1171ff—
markup.underline—underline
markup.bold—bold
markup.italic—italic
property#934b3cff—
comment#989898italic
comment.line.number-sign#484848italic bold
comment.block.documentation#9da298italic
constant#160c2abold
constant.other.placeholder.py#7b0000ff—
variable—bold
entity#cc3611ff—
entity.name.type#6c65b0ff—
entity.other.inherited-class#000000ff—
entity.name.function#000—
entity.name.function.argument#a28d00ff—
entity.name.tag#2265adbold
entity.other.attribute-name#cb2d01ff—
keyword#762625bold
keyword.control#A9312Fbold
storage#8f200fbold
keyword.operator.expression.delete.js,keyword.operator.expression.in.js,keyword.operator.expression.of.js,keyword.operator.expression.instanceof.js,keyword.operator.new.js,keyword.operator.expression.typeof.js,keyword.operator.expression.void.js#577909bold
meta.selector#577909bold
string, punctuation.definition.string#e10000—
string, entity.other.inherited-class#e10000—
constant.numeric#9f1bf1—
constant.language#9f1bf1—
support#3c7a03ff—
variable.parameter#ca7300—
keyword.operator#0f95b0
keyword.operator.logical.js,keyword.operator.logical.ts#ca004b—
keyword.operator.arithmetic.js,keyword.operator.comparison.js,keyword.operator.arithmetic.ts,keyword.operator.comparison.ts#2598da—
invalid.deprecated#cb2d01
invalid.illegal#333333ff—
string source#080808ff—
string constant#696969ff—
string variable#234a97ff—
string.regexp#cf5628ff—
string.regexp.character-class, string.regexp constant.character.escaped, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#cf5628ff—
string.regexp constant.character.escape#811f24ff—
text source#080808ff—
support.function#50001d—
support.constant#702d00—
support.variable#295502ff—
entity.name.type.namespace#b18534—
support.class, entity.name.type.class#b18534—
entity.name.class.identifier.namespace.type#b18534—
entity.name.class#4090f3—
entity.name.type#b18534—
entity.name.tag.html#881280
entity.other.attribute-name.html#994500—
string.quoted.double.html#1A1AA8—
punctuation.definition.tag,punctuation.definition.string#881280—
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#cf8f3bbold
support.constant.color.w3c-standard-color-name.css,entity.other.attribute-name.class.css#cf8f3bbold
support.type.vendored.property-name.css#56b6c2—
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts#499504—
support.module.node.js,support.type.object.module.js,support.module.node.js,support.module.node.ts,support.type.object.module.ts,support.module.node.ts#b18534—
variable.other.readwrite.js,support.variable.property.js,support.variable.object.process.js,variable.other.readwrite.ts,support.variable.property.ts,support.variable.object.process.ts#006600
meta.object-literal.key.js,meta.object-literal.key.ts#3C7A03—
support.constant.json.js,support.constant.json.ts#cf8f3b—
keyword.operator.expression.instanceof.js,keyword.operator.expression.instanceof.ts#577909
keyword.operator.expression.typeof.js,keyword.operator.expression.typeof.ts#577909
support.type.object.console.js,support.type.object.console.ts#499504—
keyword.operator.js,keyword.operator.ts#56b6c2—
support.type.object.dom.js,support.type.object.dom.ts#56b6c2—
support.variable.dom.js,support.variable.property.dom.js,support.variable.dom.ts,support.variable.property.dom.ts#499504—
var.this.js,var.this.ts,variable.language.this.js,variable.language.this.ts#1c36b7bold
markup.list#7d451cff—
markup.heading, markup.heading entity.name#142b5aff—
markup.quote#0b6125ff—
markup.italic#080808ff—
markup.bold#080808ffbold
markup.underline#080808ffunderline
markup.link#234a97ffunderline
markup.raw#234a97ff—
markup.deleted#b03a3a—
markup.inserted#2e7d4f—
markup.changed#9a6a00—