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#eae8e1
  • activityBar.border#cfc8b7
  • activityBar.foreground#aa9a7d
  • activityBar.inactiveForeground#a4936d
  • activityBarBadge.background#8397bc
  • activityBarBadge.foreground#f5f4f1
  • badge.background#aa9a7d
  • badge.foreground#201d17
  • breadcrumb.activeSelectionForeground#201d17
  • breadcrumb.focusForeground#201d17
  • breadcrumb.foreground#a4936d
  • button.background#aa9a7d
  • button.foreground#201d17
  • button.hoverBackground#998b71
  • button.secondaryBackground#eae8e1
  • button.secondaryForeground#201d17
  • descriptionForeground#a4936d
  • dropdown.background#f8f7f5
  • dropdown.border#cfc8b7
  • dropdown.foreground#201d17
  • editor.background#f8f7f5
  • editor.findMatchBackground#9e4fa559
  • editor.findMatchHighlightBackground#9e4fa526
  • editor.foreground#201d17
  • editor.inactiveSelectionBackground#aa9a7d1a
  • editor.lineHighlightBackground#aa9a7d14
  • editor.lineHighlightBorder#aa9a7d00
  • editor.selectionBackground#aa9a7d33
  • editor.wordHighlightBackground#aa9a7d26
  • editorBracketMatch.background#aa9a7d33
  • editorBracketMatch.border#aa9a7d80
  • editorCursor.foreground#aa9a7d
  • editorError.foreground#bf1932
  • editorGroup.border#cfc8b7
  • editorGroupHeader.tabsBackground#f1efeb
  • editorGroupHeader.tabsBorder#cfc8b7
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#201d172e
  • editorIndentGuide.background#201d1714
  • editorInfo.foreground#8397bc
  • editorLineNumber.activeForeground#201d17
  • editorLineNumber.foreground#a4936d
  • editorRuler.foreground#201d1714
  • editorSuggestWidget.selectedBackground#aa9a7d26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#201d171a
  • editorWidget.background#f8f7f5
  • editorWidget.border#cfc8b7
  • focusBorder#aa9a7d80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#a4936d
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#a4936d
  • input.background#f8f7f5
  • input.border#cfc8b7
  • input.foreground#201d17
  • input.placeholderForeground#a4936d
  • inputOption.activeBorder#aa9a7d
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#8397bc
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#aa9a7d33
  • list.activeSelectionForeground#201d17
  • list.focusBackground#aa9a7d26
  • list.highlightForeground#aa9a7d
  • list.hoverBackground#aa9a7d1a
  • list.inactiveSelectionBackground#aa9a7d1a
  • minimap.background#f8f7f5
  • minimap.findMatchHighlight#9e4fa580
  • minimap.selectionHighlight#aa9a7d4d
  • notificationLink.foreground#aa9a7d
  • notifications.background#f8f7f5
  • notifications.foreground#201d17
  • panel.background#f1efeb
  • panel.border#cfc8b7
  • panelTitle.activeBorder#aa9a7d
  • panelTitle.activeForeground#201d17
  • panelTitle.inactiveForeground#a4936d
  • peekView.border#aa9a7d
  • peekViewEditor.background#f1efeb
  • peekViewResult.background#eae8e1
  • peekViewTitle.background#f1efeb
  • progressBar.background#aa9a7d
  • scrollbar.shadow#15131014
  • scrollbarSlider.activeBackground#201d174d
  • scrollbarSlider.background#201d171a
  • scrollbarSlider.hoverBackground#201d1733
  • selection.background#aa9a7d33
  • sideBar.background#f1efeb
  • sideBar.border#cfc8b7
  • sideBar.foreground#201d17
  • sideBarSectionHeader.background#aa9a7d1a
  • sideBarSectionHeader.foreground#201d17
  • sideBarTitle.foreground#201d17
  • statusBar.background#aa9a7d
  • statusBar.border#cfc8b7
  • statusBar.debuggingBackground#8397bc
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#201d17
  • statusBar.noFolderBackground#eae8e1
  • statusBarItem.hoverBackground#f5f4f133
  • statusBarItem.remoteBackground#91836a
  • statusBarItem.remoteForeground#201d17
  • tab.activeBackground#f8f7f5
  • tab.activeBorder#aa9a7d
  • tab.activeBorderTop#aa9a7d00
  • tab.activeForeground#201d17
  • tab.border#cfc8b7
  • tab.inactiveBackground#f1efeb
  • tab.inactiveForeground#a4936d
  • terminal.ansiBlack#201d17
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#a4936d
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f5f4f1
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f8f7f5
  • terminal.ansiYellow#d4a017
  • terminal.background#f1efeb
  • terminal.foreground#201d17
  • terminalCursor.foreground#aa9a7d
  • textLink.activeForeground#7586a7
  • textLink.foreground#8397bc
  • titleBar.activeBackground#f1efeb
  • titleBar.activeForeground#201d17
  • titleBar.border#cfc8b7
  • titleBar.inactiveBackground#f1efeb
  • titleBar.inactiveForeground#a4936d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#a4936ditalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#776d56bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#776d56bold
storage.type, storage.modifier#776d56bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#606f8a
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#776d56
string.regexp#606f8a
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#9e4fa5
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#886162bold
variable.other.constant, variable.other.enummember#886162bold
constant.character.escape#796f5e
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#5c3317italic
entity.name.type.parameter#5c3317italic
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#201d17
variable.parameter#201d17italic
variable.language, variable.language.this, variable.language.self, variable.language.super#776d56italic
variable.other.property, variable.other.object.property, meta.object-literal.key#201d17
entity.name.class, entity.name.type.class, support.class#5e2b4ebold italic
entity.other.inherited-class#5e2b4eitalic
entity.name.tag, punctuation.definition.tag#776d56bold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#796f5e
punctuation, punctuation.separator, punctuation.terminator, meta.brace#a4936d
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#5c3317italic
support.type.property-name.css, support.type.vendored.property-name.css#5c3317
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5e2b4ebold
support.constant.property-value.css, support.constant.color.css#886162
keyword.other.unit.css#9e4fa5
support.type.property-name.json#5c3317
markup.heading, markup.heading entity.name, entity.name.section.markdown#776d56bold
markup.bold#886162bold
markup.italic#5c3317italic
markup.inline.raw, markup.raw#606f8a
markup.underline.link#38793a
markup.quote#a4936ditalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050