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#dfe1e3
  • activityBar.border#afb7c0
  • activityBar.foreground#4d88e1
  • activityBar.inactiveForeground#4e688f
  • activityBarBadge.background#a79377
  • activityBarBadge.foreground#f1f1f2
  • badge.background#4d88e1
  • badge.foreground#0c1422
  • breadcrumb.activeSelectionForeground#0c1422
  • breadcrumb.focusForeground#0c1422
  • breadcrumb.foreground#4e688f
  • button.background#4d88e1
  • button.foreground#0c1422
  • button.hoverBackground#457acb
  • button.secondaryBackground#dfe1e3
  • button.secondaryForeground#0c1422
  • descriptionForeground#4e688f
  • dropdown.background#f4f5f6
  • dropdown.border#afb7c0
  • dropdown.foreground#0c1422
  • editor.background#f4f5f6
  • editor.findMatchBackground#b163a359
  • editor.findMatchHighlightBackground#b163a326
  • editor.foreground#0c1422
  • editor.inactiveSelectionBackground#4d88e11a
  • editor.lineHighlightBackground#4d88e114
  • editor.lineHighlightBorder#4d88e100
  • editor.selectionBackground#4d88e133
  • editor.wordHighlightBackground#4d88e126
  • editorBracketMatch.background#4d88e133
  • editorBracketMatch.border#4d88e180
  • editorCursor.foreground#4d88e1
  • editorError.foreground#bf1932
  • editorGroup.border#afb7c0
  • editorGroupHeader.tabsBackground#eaebed
  • editorGroupHeader.tabsBorder#afb7c0
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#0c14222e
  • editorIndentGuide.background#0c142214
  • editorInfo.foreground#a79377
  • editorLineNumber.activeForeground#0c1422
  • editorLineNumber.foreground#4e688f
  • editorRuler.foreground#0c142214
  • editorSuggestWidget.selectedBackground#4d88e126
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#0c14221a
  • editorWidget.background#f4f5f6
  • editorWidget.border#afb7c0
  • focusBorder#4d88e180
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#4e688f
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#4e688f
  • input.background#f4f5f6
  • input.border#afb7c0
  • input.foreground#0c1422
  • input.placeholderForeground#4e688f
  • inputOption.activeBorder#4d88e1
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#a79377
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#4d88e133
  • list.activeSelectionForeground#0c1422
  • list.focusBackground#4d88e126
  • list.highlightForeground#4d88e1
  • list.hoverBackground#4d88e11a
  • list.inactiveSelectionBackground#4d88e11a
  • minimap.background#f4f5f6
  • minimap.findMatchHighlight#b163a380
  • minimap.selectionHighlight#4d88e14d
  • notificationLink.foreground#4d88e1
  • notifications.background#f4f5f6
  • notifications.foreground#0c1422
  • panel.background#eaebed
  • panel.border#afb7c0
  • panelTitle.activeBorder#4d88e1
  • panelTitle.activeForeground#0c1422
  • panelTitle.inactiveForeground#4e688f
  • peekView.border#4d88e1
  • peekViewEditor.background#eaebed
  • peekViewResult.background#dfe1e3
  • peekViewTitle.background#eaebed
  • progressBar.background#4d88e1
  • scrollbar.shadow#080e1614
  • scrollbarSlider.activeBackground#0c14224d
  • scrollbarSlider.background#0c14221a
  • scrollbarSlider.hoverBackground#0c142233
  • selection.background#4d88e133
  • sideBar.background#eaebed
  • sideBar.border#afb7c0
  • sideBar.foreground#0c1422
  • sideBarSectionHeader.background#4d88e11a
  • sideBarSectionHeader.foreground#0c1422
  • sideBarTitle.foreground#0c1422
  • statusBar.background#4d88e1
  • statusBar.border#afb7c0
  • statusBar.debuggingBackground#a79377
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#0c1422
  • statusBar.noFolderBackground#dfe1e3
  • statusBarItem.hoverBackground#f1f1f233
  • statusBarItem.remoteBackground#4174bf
  • statusBarItem.remoteForeground#0c1422
  • tab.activeBackground#f4f5f6
  • tab.activeBorder#4d88e1
  • tab.activeBorderTop#4d88e100
  • tab.activeForeground#0c1422
  • tab.border#afb7c0
  • tab.inactiveBackground#eaebed
  • tab.inactiveForeground#4e688f
  • terminal.ansiBlack#0c1422
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#4e688f
  • 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#f4f5f6
  • terminal.ansiYellow#d4a017
  • terminal.background#eaebed
  • terminal.foreground#0c1422
  • terminalCursor.foreground#4d88e1
  • textLink.activeForeground#94826a
  • textLink.foreground#a79377
  • titleBar.activeBackground#eaebed
  • titleBar.activeForeground#0c1422
  • titleBar.border#afb7c0
  • titleBar.inactiveBackground#eaebed
  • titleBar.inactiveForeground#4e688f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#4e688fitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#3c6aafbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#3c6aafbold
storage.type, storage.modifier#3c6aafbold
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#3c6aaf
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#00766ebold
variable.other.constant, variable.other.enummember#00766ebold
constant.character.escape#4b6fa5
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#587282italic
entity.name.type.parameter#587282italic
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#0c1422
variable.parameter#0c1422italic
variable.language, variable.language.this, variable.language.self, variable.language.super#3c6aafitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#0c1422
entity.name.class, entity.name.type.class, support.class#38793abold italic
entity.other.inherited-class#38793aitalic
entity.name.tag, punctuation.definition.tag#3c6aafbold
entity.other.attribute-name#7f6666italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#4b6fa5
punctuation, punctuation.separator, punctuation.terminator, meta.brace#4e688f
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#587282italic
support.type.property-name.css, support.type.vendored.property-name.css#587282
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#38793abold
support.constant.property-value.css, support.constant.color.css#00766e
keyword.other.unit.css#96548a
support.type.property-name.json#587282
markup.heading, markup.heading entity.name, entity.name.section.markdown#3c6aafbold
markup.bold#00766ebold
markup.italic#587282italic
markup.inline.raw, markup.raw#796c56
markup.underline.link#7f6666
markup.quote#4e688fitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050