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#2e2e00
  • activityBar.border#4b4b00
  • activityBar.foreground#dddd00
  • activityBar.inactiveForeground#9f9437
  • activityBarBadge.background#6667ab
  • activityBarBadge.foreground#f5f4f1
  • badge.background#dddd00
  • badge.foreground#212100
  • breadcrumb.activeSelectionForeground#e3e0c8
  • breadcrumb.focusForeground#e3e0c8
  • breadcrumb.foreground#9f9437
  • button.background#dddd00
  • button.foreground#212100
  • button.hoverBackground#e0e01a
  • button.secondaryBackground#393900
  • button.secondaryForeground#e3e0c8
  • descriptionForeground#9f9437
  • dropdown.background#2e2e00
  • dropdown.border#4b4b00
  • dropdown.foreground#e3e0c8
  • editor.background#232300
  • editor.findMatchBackground#d4145a66
  • editor.findMatchHighlightBackground#d4145a33
  • editor.foreground#e3e0c8
  • editor.inactiveSelectionBackground#dddd0026
  • editor.lineHighlightBackground#dddd001a
  • editor.lineHighlightBorder#dddd0000
  • editor.selectionBackground#dddd004d
  • editor.wordHighlightBackground#dddd0033
  • editorBracketMatch.background#dddd0040
  • editorBracketMatch.border#dddd0099
  • editorCursor.foreground#dddd00
  • editorError.foreground#dd4132
  • editorGroup.border#4b4b00
  • editorGroupHeader.tabsBackground#2e2e00
  • editorGroupHeader.tabsBorder#4b4b00
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e3e0c833
  • editorIndentGuide.background#e3e0c814
  • editorInfo.foreground#6667ab
  • editorLineNumber.activeForeground#e3e0c8
  • editorLineNumber.foreground#9f9437
  • editorRuler.foreground#e3e0c814
  • editorSuggestWidget.selectedBackground#dddd0040
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e3e0c81a
  • editorWidget.background#2e2e00
  • editorWidget.border#4b4b00
  • focusBorder#dddd0099
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#9f9437
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#9f9437
  • input.background#2e2e00
  • input.border#4b4b00
  • input.foreground#e3e0c8
  • input.placeholderForeground#9f9437
  • inputOption.activeBorder#dddd00
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#6667ab
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#dddd004d
  • list.activeSelectionForeground#e3e0c8
  • list.focusBackground#dddd0033
  • list.highlightForeground#dddd00
  • list.hoverBackground#dddd0026
  • list.inactiveSelectionBackground#dddd0026
  • minimap.background#232300
  • minimap.findMatchHighlight#d4145a99
  • minimap.selectionHighlight#dddd0066
  • notificationLink.foreground#dddd00
  • notifications.background#393900
  • notifications.foreground#e3e0c8
  • panel.background#2e2e00
  • panel.border#4b4b00
  • panelTitle.activeBorder#dddd00
  • panelTitle.activeForeground#e3e0c8
  • panelTitle.inactiveForeground#9f9437
  • peekView.border#dddd00
  • peekViewEditor.background#2e2e00
  • peekViewResult.background#393900
  • peekViewTitle.background#2e2e00
  • progressBar.background#dddd00
  • scrollbar.shadow#16160045
  • scrollbarSlider.activeBackground#e3e0c859
  • scrollbarSlider.background#e3e0c81f
  • scrollbarSlider.hoverBackground#e3e0c840
  • selection.background#dddd004d
  • sideBar.background#393900
  • sideBar.border#4b4b00
  • sideBar.foreground#e3e0c8
  • sideBarSectionHeader.background#dddd0026
  • sideBarSectionHeader.foreground#e3e0c8
  • sideBarTitle.foreground#e3e0c8
  • statusBar.background#858500
  • statusBar.border#4b4b00
  • statusBar.debuggingBackground#6667ab
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#ebeb66
  • statusBar.noFolderBackground#2e2e00
  • statusBarItem.hoverBackground#dddd004d
  • statusBarItem.remoteBackground#dddd00
  • statusBarItem.remoteForeground#212100
  • tab.activeBackground#232300
  • tab.activeBorder#dddd00
  • tab.activeBorderTop#dddd0000
  • tab.activeForeground#e3e0c8
  • tab.border#4b4b00
  • tab.inactiveBackground#2e2e00
  • tab.inactiveForeground#9f9437
  • terminal.ansiBlack#232300
  • terminal.ansiBlue#769541
  • terminal.ansiBrightBlack#9f9437
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f5f4f1
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#e3e0c8
  • terminal.ansiYellow#efc050
  • terminal.background#2e2e00
  • terminal.foreground#e3e0c8
  • terminalCursor.foreground#dddd00
  • textLink.activeForeground#7d7eb8
  • textLink.foreground#6667ab
  • titleBar.activeBackground#2e2e00
  • titleBar.activeForeground#e3e0c8
  • titleBar.border#4b4b00
  • titleBar.inactiveBackground#2e2e00
  • titleBar.inactiveForeground#9f9437

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#9f9437italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#dddd00bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#dddd00bold
storage.type, storage.modifier#dddd00bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#8788be
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#dddd00
string.regexp#8788be
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#e26492
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#fe5000bold
variable.other.constant, variable.other.enummember#fe5000bold
constant.character.escape#e2e226
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#ffc72citalic
entity.name.type.parameter#ffc72citalic
entity.name.function, meta.function entity.name.function#e8d4e2bold
meta.function-call entity.name.function, support.function#e8d4e2
meta.method-call entity.name.function, entity.name.function.member#e8d4e2
variable, variable.other, variable.other.readwrite#e3e0c8
variable.parameter#e3e0c8italic
variable.language, variable.language.this, variable.language.self, variable.language.super#dddd00italic
variable.other.property, variable.other.object.property, meta.object-literal.key#e3e0c8
entity.name.class, entity.name.type.class, support.class#00b140bold italic
entity.other.inherited-class#00b140italic
entity.name.tag, punctuation.definition.tag#dddd00bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#e2e226
punctuation, punctuation.separator, punctuation.terminator, meta.brace#9f9437
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#ffc72citalic
support.type.property-name.css, support.type.vendored.property-name.css#ffc72c
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#00b140bold
support.constant.property-value.css, support.constant.color.css#fe5000
keyword.other.unit.css#e26492
support.type.property-name.json#ffc72c
markup.heading, markup.heading entity.name, entity.name.section.markdown#dddd00bold
markup.bold#fe5000bold
markup.italic#ffc72citalic
markup.inline.raw, markup.raw#8788be
markup.underline.link#e8d4e2
markup.quote#9f9437italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050