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#dfe1e2
  • activityBar.border#afb4bb
  • activityBar.foreground#4a6fa5
  • activityBar.inactiveForeground#4c5e77
  • activityBarBadge.background#a79377
  • activityBarBadge.foreground#f1f1f2
  • badge.background#4a6fa5
  • badge.foreground#f1f1f2
  • breadcrumb.activeSelectionForeground#101824
  • breadcrumb.focusForeground#101824
  • breadcrumb.foreground#4c5e77
  • button.background#4a6fa5
  • button.foreground#f1f1f2
  • button.hoverBackground#436495
  • button.secondaryBackground#dfe1e2
  • button.secondaryForeground#101824
  • descriptionForeground#4c5e77
  • dropdown.background#f4f5f5
  • dropdown.border#afb4bb
  • dropdown.foreground#101824
  • editor.background#f4f5f5
  • editor.findMatchBackground#b163a359
  • editor.findMatchHighlightBackground#b163a326
  • editor.foreground#101824
  • editor.inactiveSelectionBackground#4a6fa51a
  • editor.lineHighlightBackground#4a6fa514
  • editor.lineHighlightBorder#4a6fa500
  • editor.selectionBackground#4a6fa533
  • editor.wordHighlightBackground#4a6fa526
  • editorBracketMatch.background#4a6fa533
  • editorBracketMatch.border#4a6fa580
  • editorCursor.foreground#4a6fa5
  • editorError.foreground#bf1932
  • editorGroup.border#afb4bb
  • editorGroupHeader.tabsBackground#eaebec
  • editorGroupHeader.tabsBorder#afb4bb
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1018242e
  • editorIndentGuide.background#10182414
  • editorInfo.foreground#a79377
  • editorLineNumber.activeForeground#101824
  • editorLineNumber.foreground#4c5e77
  • editorRuler.foreground#10182414
  • editorSuggestWidget.selectedBackground#4a6fa526
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1018241a
  • editorWidget.background#f4f5f5
  • editorWidget.border#afb4bb
  • focusBorder#4a6fa580
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#4c5e77
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#4c5e77
  • input.background#f4f5f5
  • input.border#afb4bb
  • input.foreground#101824
  • input.placeholderForeground#4c5e77
  • inputOption.activeBorder#4a6fa5
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#a79377
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#4a6fa533
  • list.activeSelectionForeground#101824
  • list.focusBackground#4a6fa526
  • list.highlightForeground#4a6fa5
  • list.hoverBackground#4a6fa51a
  • list.inactiveSelectionBackground#4a6fa51a
  • minimap.background#f4f5f5
  • minimap.findMatchHighlight#b163a380
  • minimap.selectionHighlight#4a6fa54d
  • notificationLink.foreground#4a6fa5
  • notifications.background#f4f5f5
  • notifications.foreground#101824
  • panel.background#eaebec
  • panel.border#afb4bb
  • panelTitle.activeBorder#4a6fa5
  • panelTitle.activeForeground#101824
  • panelTitle.inactiveForeground#4c5e77
  • peekView.border#4a6fa5
  • peekViewEditor.background#eaebec
  • peekViewResult.background#dfe1e2
  • peekViewTitle.background#eaebec
  • progressBar.background#4a6fa5
  • scrollbar.shadow#070b1014
  • scrollbarSlider.activeBackground#1018244d
  • scrollbarSlider.background#1018241a
  • scrollbarSlider.hoverBackground#10182433
  • selection.background#4a6fa533
  • sideBar.background#eaebec
  • sideBar.border#afb4bb
  • sideBar.foreground#101824
  • sideBarSectionHeader.background#4a6fa51a
  • sideBarSectionHeader.foreground#101824
  • sideBarTitle.foreground#101824
  • statusBar.background#4a6fa5
  • statusBar.border#afb4bb
  • statusBar.debuggingBackground#a79377
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#f1f1f2
  • statusBar.noFolderBackground#dfe1e2
  • statusBarItem.hoverBackground#f1f1f233
  • statusBarItem.remoteBackground#3f5e8c
  • statusBarItem.remoteForeground#f1f1f2
  • tab.activeBackground#f4f5f5
  • tab.activeBorder#4a6fa5
  • tab.activeBorderTop#4a6fa500
  • tab.activeForeground#101824
  • tab.border#afb4bb
  • tab.inactiveBackground#eaebec
  • tab.inactiveForeground#4c5e77
  • terminal.ansiBlack#101824
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#4c5e77
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f1f1f2
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f4f5f5
  • terminal.ansiYellow#d4a017
  • terminal.background#eaebec
  • terminal.foreground#101824
  • terminalCursor.foreground#4a6fa5
  • textLink.activeForeground#94826a
  • textLink.foreground#a79377
  • titleBar.activeBackground#eaebec
  • titleBar.activeForeground#101824
  • titleBar.border#afb4bb
  • titleBar.inactiveBackground#eaebec
  • titleBar.inactiveForeground#4c5e77

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#4c5e77italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#4a6fa5bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#4a6fa5bold
storage.type, storage.modifier#4a6fa5bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#796c56
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#4a6fa5
string.regexp#796c56
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#96548a
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#2d796fbold
variable.other.constant, variable.other.enummember#2d796fbold
constant.character.escape#567098
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.module, support.type, support.type.builtin#0070abitalic
entity.name.type.parameter#0070abitalic
entity.name.function, meta.function entity.name.function#7f6666bold
meta.function-call entity.name.function, support.function#7f6666
meta.method-call entity.name.function, entity.name.function.member#7f6666
variable, variable.other, variable.other.readwrite#101824
variable.parameter#101824italic
variable.language, variable.language.this, variable.language.self, variable.language.super#4a6fa5italic
variable.other.property, variable.other.object.property, meta.object-literal.key#101824
entity.name.class, entity.name.type.class, support.class#38793abold italic
entity.other.inherited-class#38793aitalic
entity.name.tag, punctuation.definition.tag#4a6fa5bold
entity.other.attribute-name#7f6666italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#567098
punctuation, punctuation.separator, punctuation.terminator, meta.brace#4c5e77
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#0070abitalic
support.type.property-name.css, support.type.vendored.property-name.css#0070ab
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#38793abold
support.constant.property-value.css, support.constant.color.css#2d796f
keyword.other.unit.css#96548a
support.type.property-name.json#0070ab
markup.heading, markup.heading entity.name, entity.name.section.markdown#4a6fa5bold
markup.bold#2d796fbold
markup.italic#0070abitalic
markup.inline.raw, markup.raw#796c56
markup.underline.link#7f6666
markup.quote#4c5e77italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050