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#e7dee2
  • activityBar.border#c0acb3
  • activityBar.foreground#4c2a2b
  • activityBar.inactiveForeground#6a3f4b
  • activityBarBadge.background#4b9e9d
  • activityBarBadge.foreground#f5f1f2
  • badge.background#4c2a2b
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#110909
  • breadcrumb.focusForeground#110909
  • breadcrumb.foreground#6a3f4b
  • button.background#4c2a2b
  • button.foreground#f5f1f2
  • button.hoverBackground#442627
  • button.secondaryBackground#e7dee2
  • button.secondaryForeground#110909
  • descriptionForeground#6a3f4b
  • dropdown.background#f7f4f5
  • dropdown.border#c0acb3
  • dropdown.foreground#110909
  • editor.background#f7f4f5
  • editor.findMatchBackground#9063cd59
  • editor.findMatchHighlightBackground#9063cd26
  • editor.foreground#110909
  • editor.inactiveSelectionBackground#4c2a2b1a
  • editor.lineHighlightBackground#4c2a2b14
  • editor.lineHighlightBorder#4c2a2b00
  • editor.selectionBackground#4c2a2b33
  • editor.wordHighlightBackground#4c2a2b26
  • editorBracketMatch.background#4c2a2b33
  • editorBracketMatch.border#4c2a2b80
  • editorCursor.foreground#4c2a2b
  • editorError.foreground#bf1932
  • editorGroup.border#c0acb3
  • editorGroupHeader.tabsBackground#efe9eb
  • editorGroupHeader.tabsBorder#c0acb3
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#1109092e
  • editorIndentGuide.background#11090914
  • editorInfo.foreground#4b9e9d
  • editorLineNumber.activeForeground#110909
  • editorLineNumber.foreground#6a3f4b
  • editorRuler.foreground#11090914
  • editorSuggestWidget.selectedBackground#4c2a2b26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#1109091a
  • editorWidget.background#f7f4f5
  • editorWidget.border#c0acb3
  • focusBorder#4c2a2b80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#6a3f4b
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#6a3f4b
  • input.background#f7f4f5
  • input.border#c0acb3
  • input.foreground#110909
  • input.placeholderForeground#6a3f4b
  • inputOption.activeBorder#4c2a2b
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#4b9e9d
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#4c2a2b33
  • list.activeSelectionForeground#110909
  • list.focusBackground#4c2a2b26
  • list.highlightForeground#4c2a2b
  • list.hoverBackground#4c2a2b1a
  • list.inactiveSelectionBackground#4c2a2b1a
  • minimap.background#f7f4f5
  • minimap.findMatchHighlight#9063cd80
  • minimap.selectionHighlight#4c2a2b4d
  • notificationLink.foreground#4c2a2b
  • notifications.background#f7f4f5
  • notifications.foreground#110909
  • panel.background#efe9eb
  • panel.border#c0acb3
  • panelTitle.activeBorder#4c2a2b
  • panelTitle.activeForeground#110909
  • panelTitle.inactiveForeground#6a3f4b
  • peekView.border#4c2a2b
  • peekViewEditor.background#efe9eb
  • peekViewResult.background#e7dee2
  • peekViewTitle.background#efe9eb
  • progressBar.background#4c2a2b
  • scrollbar.shadow#08040414
  • scrollbarSlider.activeBackground#1109094d
  • scrollbarSlider.background#1109091a
  • scrollbarSlider.hoverBackground#11090933
  • selection.background#4c2a2b33
  • sideBar.background#efe9eb
  • sideBar.border#c0acb3
  • sideBar.foreground#110909
  • sideBarSectionHeader.background#4c2a2b1a
  • sideBarSectionHeader.foreground#110909
  • sideBarTitle.foreground#110909
  • statusBar.background#4c2a2b
  • statusBar.border#c0acb3
  • statusBar.debuggingBackground#4b9e9d
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f5f1f2
  • statusBar.noFolderBackground#e7dee2
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#412425
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#f7f4f5
  • tab.activeBorder#4c2a2b
  • tab.activeBorderTop#4c2a2b00
  • tab.activeForeground#110909
  • tab.border#c0acb3
  • tab.inactiveBackground#efe9eb
  • tab.inactiveForeground#6a3f4b
  • terminal.ansiBlack#110909
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#6a3f4b
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f5f1f2
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f7f4f5
  • terminal.ansiYellow#d4a017
  • terminal.background#efe9eb
  • terminal.foreground#110909
  • terminalCursor.foreground#4c2a2b
  • textLink.activeForeground#428d8b
  • textLink.foreground#4b9e9d
  • titleBar.activeBackground#efe9eb
  • titleBar.activeForeground#110909
  • titleBar.border#c0acb3
  • titleBar.inactiveBackground#efe9eb
  • titleBar.inactiveForeground#6a3f4b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#6a3f4bitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#4c2a2bbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#4c2a2bbold
storage.type, storage.modifier#4c2a2bbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#367472
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#4c2a2b
string.regexp#367472
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#845bbd
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#786d74bold
variable.other.constant, variable.other.enummember#786d74bold
constant.character.escape#674a4b
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#88666fitalic
entity.name.type.parameter#88666fitalic
entity.name.function, meta.function entity.name.function#38793abold
meta.function-call entity.name.function, support.function#38793a
meta.method-call entity.name.function, entity.name.function.member#38793a
variable, variable.other, variable.other.readwrite#110909
variable.parameter#110909italic
variable.language, variable.language.this, variable.language.self, variable.language.super#4c2a2bitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#110909
entity.name.class, entity.name.type.class, support.class#5a7431bold italic
entity.other.inherited-class#5a7431italic
entity.name.tag, punctuation.definition.tag#4c2a2bbold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#674a4b
punctuation, punctuation.separator, punctuation.terminator, meta.brace#6a3f4b
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#88666fitalic
support.type.property-name.css, support.type.vendored.property-name.css#88666f
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5a7431bold
support.constant.property-value.css, support.constant.color.css#786d74
keyword.other.unit.css#845bbd
support.type.property-name.json#88666f
markup.heading, markup.heading entity.name, entity.name.section.markdown#4c2a2bbold
markup.bold#786d74bold
markup.italic#88666fitalic
markup.inline.raw, markup.raw#367472
markup.underline.link#38793a
markup.quote#6a3f4bitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050