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#eae8de
  • activityBar.border#cecaa8
  • activityBar.foreground#a0ad00
  • activityBar.inactiveForeground#9f9d2f
  • activityBarBadge.background#5c5d9a
  • activityBarBadge.foreground#f5f4f1
  • badge.background#a0ad00
  • badge.foreground#2c3000
  • breadcrumb.activeSelectionForeground#2c3000
  • breadcrumb.focusForeground#2c3000
  • breadcrumb.foreground#9f9d2f
  • button.background#a0ad00
  • button.foreground#2c3000
  • button.hoverBackground#909c00
  • button.secondaryBackground#eae8de
  • button.secondaryForeground#2c3000
  • descriptionForeground#9f9d2f
  • dropdown.background#f8f7f4
  • dropdown.border#cecaa8
  • dropdown.foreground#2c3000
  • editor.background#f8f7f4
  • editor.findMatchBackground#86d0bf59
  • editor.findMatchHighlightBackground#86d0bf26
  • editor.foreground#2c3000
  • editor.inactiveSelectionBackground#a0ad001a
  • editor.lineHighlightBackground#a0ad0014
  • editor.lineHighlightBorder#a0ad0000
  • editor.selectionBackground#a0ad0033
  • editor.wordHighlightBackground#a0ad0026
  • editorBracketMatch.background#a0ad0033
  • editorBracketMatch.border#a0ad0080
  • editorCursor.foreground#a0ad00
  • editorError.foreground#bf1932
  • editorGroup.border#cecaa8
  • editorGroupHeader.tabsBackground#f1f0e9
  • editorGroupHeader.tabsBorder#cecaa8
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#2c30002e
  • editorIndentGuide.background#2c300014
  • editorInfo.foreground#5c5d9a
  • editorLineNumber.activeForeground#2c3000
  • editorLineNumber.foreground#9f9d2f
  • editorRuler.foreground#2c300014
  • editorSuggestWidget.selectedBackground#a0ad0026
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#2c30001a
  • editorWidget.background#f8f7f4
  • editorWidget.border#cecaa8
  • focusBorder#a0ad0080
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#9f9d2f
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#9f9d2f
  • input.background#f8f7f4
  • input.border#cecaa8
  • input.foreground#2c3000
  • input.placeholderForeground#9f9d2f
  • inputOption.activeBorder#a0ad00
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#5c5d9a
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#a0ad0033
  • list.activeSelectionForeground#2c3000
  • list.focusBackground#a0ad0026
  • list.highlightForeground#a0ad00
  • list.hoverBackground#a0ad001a
  • list.inactiveSelectionBackground#a0ad001a
  • minimap.background#f8f7f4
  • minimap.findMatchHighlight#86d0bf80
  • minimap.selectionHighlight#a0ad004d
  • notificationLink.foreground#a0ad00
  • notifications.background#f8f7f4
  • notifications.foreground#2c3000
  • panel.background#f1f0e9
  • panel.border#cecaa8
  • panelTitle.activeBorder#a0ad00
  • panelTitle.activeForeground#2c3000
  • panelTitle.inactiveForeground#9f9d2f
  • peekView.border#a0ad00
  • peekViewEditor.background#f1f0e9
  • peekViewResult.background#eae8de
  • peekViewTitle.background#f1f0e9
  • progressBar.background#a0ad00
  • scrollbar.shadow#14160014
  • scrollbarSlider.activeBackground#2c30004d
  • scrollbarSlider.background#2c30001a
  • scrollbarSlider.hoverBackground#2c300033
  • selection.background#a0ad0033
  • sideBar.background#f1f0e9
  • sideBar.border#cecaa8
  • sideBar.foreground#2c3000
  • sideBarSectionHeader.background#a0ad001a
  • sideBarSectionHeader.foreground#2c3000
  • sideBarTitle.foreground#2c3000
  • statusBar.background#a0ad00
  • statusBar.border#cecaa8
  • statusBar.debuggingBackground#5c5d9a
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#2c3000
  • statusBar.noFolderBackground#eae8de
  • statusBarItem.hoverBackground#f5f4f133
  • statusBarItem.remoteBackground#889300
  • statusBarItem.remoteForeground#2c3000
  • tab.activeBackground#f8f7f4
  • tab.activeBorder#a0ad00
  • tab.activeBorderTop#a0ad0000
  • tab.activeForeground#2c3000
  • tab.border#cecaa8
  • tab.inactiveBackground#f1f0e9
  • tab.inactiveForeground#9f9d2f
  • terminal.ansiBlack#2c3000
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#9f9d2f
  • 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#f8f7f4
  • terminal.ansiYellow#d4a017
  • terminal.background#f1f0e9
  • terminal.foreground#2c3000
  • terminalCursor.foreground#a0ad00
  • textLink.activeForeground#525289
  • textLink.foreground#5c5d9a
  • titleBar.activeBackground#f1f0e9
  • titleBar.activeForeground#2c3000
  • titleBar.border#cecaa8
  • titleBar.inactiveBackground#f1f0e9
  • titleBar.inactiveForeground#9f9d2f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#9f9d2fitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#666f00bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#666f00bold
storage.type, storage.modifier#666f00bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#6667ab
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#666f00
string.regexp#6667ab
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#4b746b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#5c3317bold
variable.other.constant, variable.other.enummember#5c3317bold
constant.character.escape#6b7113
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#5a7431italic
entity.name.type.parameter#5a7431italic
entity.name.function, meta.function entity.name.function#786d74bold
meta.function-call entity.name.function, support.function#786d74
meta.method-call entity.name.function, entity.name.function.member#786d74
variable, variable.other, variable.other.readwrite#2c3000
variable.parameter#2c3000italic
variable.language, variable.language.this, variable.language.self, variable.language.super#666f00italic
variable.other.property, variable.other.object.property, meta.object-literal.key#2c3000
entity.name.class, entity.name.type.class, support.class#c4345bbold italic
entity.other.inherited-class#c4345bitalic
entity.name.tag, punctuation.definition.tag#666f00bold
entity.other.attribute-name#786d74italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#6b7113
punctuation, punctuation.separator, punctuation.terminator, meta.brace#9f9d2f
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#5a7431italic
support.type.property-name.css, support.type.vendored.property-name.css#5a7431
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#c4345bbold
support.constant.property-value.css, support.constant.color.css#5c3317
keyword.other.unit.css#4b746b
support.type.property-name.json#5a7431
markup.heading, markup.heading entity.name, entity.name.section.markdown#666f00bold
markup.bold#5c3317bold
markup.italic#5a7431italic
markup.inline.raw, markup.raw#6667ab
markup.underline.link#786d74
markup.quote#9f9d2fitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050