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#2a2d00
  • activityBar.border#444900
  • activityBar.foreground#c8d800
  • activityBar.inactiveForeground#989337
  • activityBarBadge.background#6667ab
  • activityBarBadge.foreground#f5f4f1
  • badge.background#c8d800
  • badge.foreground#1e2000
  • breadcrumb.activeSelectionForeground#e1dfc8
  • breadcrumb.focusForeground#e1dfc8
  • breadcrumb.foreground#989337
  • button.background#c8d800
  • button.foreground#1e2000
  • button.hoverBackground#cedc1a
  • button.secondaryBackground#343800
  • button.secondaryForeground#e1dfc8
  • descriptionForeground#989337
  • dropdown.background#2a2d00
  • dropdown.border#444900
  • dropdown.foreground#e1dfc8
  • editor.background#202300
  • editor.findMatchBackground#86d0bf66
  • editor.findMatchHighlightBackground#86d0bf33
  • editor.foreground#e1dfc8
  • editor.inactiveSelectionBackground#c8d80026
  • editor.lineHighlightBackground#c8d8001a
  • editor.lineHighlightBorder#c8d80000
  • editor.selectionBackground#c8d8004d
  • editor.wordHighlightBackground#c8d80033
  • editorBracketMatch.background#c8d80040
  • editorBracketMatch.border#c8d80099
  • editorCursor.foreground#c8d800
  • editorError.foreground#dd4132
  • editorGroup.border#444900
  • editorGroupHeader.tabsBackground#2a2d00
  • editorGroupHeader.tabsBorder#444900
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e1dfc833
  • editorIndentGuide.background#e1dfc814
  • editorInfo.foreground#6667ab
  • editorLineNumber.activeForeground#e1dfc8
  • editorLineNumber.foreground#989337
  • editorRuler.foreground#e1dfc814
  • editorSuggestWidget.selectedBackground#c8d80040
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e1dfc81a
  • editorWidget.background#2a2d00
  • editorWidget.border#444900
  • focusBorder#c8d80099
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#989337
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#989337
  • input.background#2a2d00
  • input.border#444900
  • input.foreground#e1dfc8
  • input.placeholderForeground#989337
  • inputOption.activeBorder#c8d800
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#6667ab
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#c8d8004d
  • list.activeSelectionForeground#e1dfc8
  • list.focusBackground#c8d80033
  • list.highlightForeground#c8d800
  • list.hoverBackground#c8d80026
  • list.inactiveSelectionBackground#c8d80026
  • minimap.background#202300
  • minimap.findMatchHighlight#86d0bf99
  • minimap.selectionHighlight#c8d80066
  • notificationLink.foreground#c8d800
  • notifications.background#343800
  • notifications.foreground#e1dfc8
  • panel.background#2a2d00
  • panel.border#444900
  • panelTitle.activeBorder#c8d800
  • panelTitle.activeForeground#e1dfc8
  • panelTitle.inactiveForeground#989337
  • peekView.border#c8d800
  • peekViewEditor.background#2a2d00
  • peekViewResult.background#343800
  • peekViewTitle.background#2a2d00
  • progressBar.background#c8d800
  • scrollbar.shadow#14160045
  • scrollbarSlider.activeBackground#e1dfc859
  • scrollbarSlider.background#e1dfc81f
  • scrollbarSlider.hoverBackground#e1dfc840
  • selection.background#c8d8004d
  • sideBar.background#343800
  • sideBar.border#444900
  • sideBar.foreground#e1dfc8
  • sideBarSectionHeader.background#c8d80026
  • sideBarSectionHeader.foreground#e1dfc8
  • sideBarTitle.foreground#e1dfc8
  • statusBar.background#788200
  • statusBar.border#444900
  • statusBar.debuggingBackground#6667ab
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#dee866
  • statusBar.noFolderBackground#2a2d00
  • statusBarItem.hoverBackground#c8d8004d
  • statusBarItem.remoteBackground#c8d800
  • statusBarItem.remoteForeground#1e2000
  • tab.activeBackground#202300
  • tab.activeBorder#c8d800
  • tab.activeBorderTop#c8d80000
  • tab.activeForeground#e1dfc8
  • tab.border#444900
  • tab.inactiveBackground#2a2d00
  • tab.inactiveForeground#989337
  • terminal.ansiBlack#202300
  • terminal.ansiBlue#6c9241
  • terminal.ansiBrightBlack#989337
  • 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#e1dfc8
  • terminal.ansiYellow#efc050
  • terminal.background#2a2d00
  • terminal.foreground#e1dfc8
  • terminalCursor.foreground#c8d800
  • textLink.activeForeground#7d7eb8
  • textLink.foreground#6667ab
  • titleBar.activeBackground#2a2d00
  • titleBar.activeForeground#e1dfc8
  • titleBar.border#444900
  • titleBar.inactiveBackground#2a2d00
  • titleBar.inactiveForeground#989337

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#989337italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#c8d800bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#c8d800bold
storage.type, storage.modifier#c8d800bold
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#c8d800
string.regexp#8788be
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#86d0bf
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#9c8472bold
variable.other.constant, variable.other.enummember#9c8472bold
constant.character.escape#d0de26
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#88b04bitalic
entity.name.type.parameter#88b04bitalic
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#e1dfc8
variable.parameter#e1dfc8italic
variable.language, variable.language.this, variable.language.self, variable.language.super#c8d800italic
variable.other.property, variable.other.object.property, meta.object-literal.key#e1dfc8
entity.name.class, entity.name.type.class, support.class#ec5b83bold italic
entity.other.inherited-class#ec5b83italic
entity.name.tag, punctuation.definition.tag#c8d800bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#d0de26
punctuation, punctuation.separator, punctuation.terminator, meta.brace#989337
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#88b04bitalic
support.type.property-name.css, support.type.vendored.property-name.css#88b04b
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ec5b83bold
support.constant.property-value.css, support.constant.color.css#9c8472
keyword.other.unit.css#86d0bf
support.type.property-name.json#88b04b
markup.heading, markup.heading entity.name, entity.name.section.markdown#c8d800bold
markup.bold#9c8472bold
markup.italic#88b04bitalic
markup.inline.raw, markup.raw#8788be
markup.underline.link#e8d4e2
markup.quote#989337italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050