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#202d00
  • activityBar.border#334900
  • activityBar.foreground#97d700
  • activityBar.inactiveForeground#8a9237
  • activityBarBadge.background#5f4b8b
  • activityBarBadge.foreground#f5f4f1
  • badge.background#97d700
  • badge.foreground#172000
  • breadcrumb.activeSelectionForeground#dedfc8
  • breadcrumb.focusForeground#dedfc8
  • breadcrumb.foreground#8a9237
  • button.background#97d700
  • button.foreground#172000
  • button.hoverBackground#a1db1a
  • button.secondaryBackground#273800
  • button.secondaryForeground#dedfc8
  • descriptionForeground#8a9237
  • dropdown.background#202d00
  • dropdown.border#334900
  • dropdown.foreground#dedfc8
  • editor.background#182200
  • editor.findMatchBackground#86d0bf66
  • editor.findMatchHighlightBackground#86d0bf33
  • editor.foreground#dedfc8
  • editor.inactiveSelectionBackground#97d70026
  • editor.lineHighlightBackground#97d7001a
  • editor.lineHighlightBorder#97d70000
  • editor.selectionBackground#97d7004d
  • editor.wordHighlightBackground#97d70033
  • editorBracketMatch.background#97d70040
  • editorBracketMatch.border#97d70099
  • editorCursor.foreground#97d700
  • editorError.foreground#dd4132
  • editorGroup.border#334900
  • editorGroupHeader.tabsBackground#202d00
  • editorGroupHeader.tabsBorder#334900
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#dedfc833
  • editorIndentGuide.background#dedfc814
  • editorInfo.foreground#5f4b8b
  • editorLineNumber.activeForeground#dedfc8
  • editorLineNumber.foreground#8a9237
  • editorRuler.foreground#dedfc814
  • editorSuggestWidget.selectedBackground#97d70040
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#dedfc81a
  • editorWidget.background#202d00
  • editorWidget.border#334900
  • focusBorder#97d70099
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#8a9237
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#8a9237
  • input.background#202d00
  • input.border#334900
  • input.foreground#dedfc8
  • input.placeholderForeground#8a9237
  • inputOption.activeBorder#97d700
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#5f4b8b
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#97d7004d
  • list.activeSelectionForeground#dedfc8
  • list.focusBackground#97d70033
  • list.highlightForeground#97d700
  • list.hoverBackground#97d70026
  • list.inactiveSelectionBackground#97d70026
  • minimap.background#182200
  • minimap.findMatchHighlight#86d0bf99
  • minimap.selectionHighlight#97d70066
  • notificationLink.foreground#97d700
  • notifications.background#273800
  • notifications.foreground#dedfc8
  • panel.background#202d00
  • panel.border#334900
  • panelTitle.activeBorder#97d700
  • panelTitle.activeForeground#dedfc8
  • panelTitle.inactiveForeground#8a9237
  • peekView.border#97d700
  • peekViewEditor.background#202d00
  • peekViewResult.background#273800
  • peekViewTitle.background#202d00
  • progressBar.background#97d700
  • scrollbar.shadow#0f150045
  • scrollbarSlider.activeBackground#dedfc859
  • scrollbarSlider.background#dedfc81f
  • scrollbarSlider.hoverBackground#dedfc840
  • selection.background#97d7004d
  • sideBar.background#273800
  • sideBar.border#334900
  • sideBar.foreground#dedfc8
  • sideBarSectionHeader.background#97d70026
  • sideBarSectionHeader.foreground#dedfc8
  • sideBarTitle.foreground#dedfc8
  • statusBar.background#5b8100
  • statusBar.border#334900
  • statusBar.debuggingBackground#5f4b8b
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#c1e766
  • statusBar.noFolderBackground#202d00
  • statusBarItem.hoverBackground#97d7004d
  • statusBarItem.remoteBackground#97d700
  • statusBarItem.remoteForeground#172000
  • tab.activeBackground#182200
  • tab.activeBorder#97d700
  • tab.activeBorderTop#97d70000
  • tab.activeForeground#dedfc8
  • tab.border#334900
  • tab.inactiveBackground#202d00
  • tab.inactiveForeground#8a9237
  • terminal.ansiBlack#182200
  • terminal.ansiBlue#539241
  • terminal.ansiBrightBlack#8a9237
  • 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#dedfc8
  • terminal.ansiYellow#efc050
  • terminal.background#202d00
  • terminal.foreground#dedfc8
  • terminalCursor.foreground#97d700
  • textLink.activeForeground#77669c
  • textLink.foreground#5f4b8b
  • titleBar.activeBackground#202d00
  • titleBar.activeForeground#dedfc8
  • titleBar.border#334900
  • titleBar.inactiveBackground#202d00
  • titleBar.inactiveForeground#8a9237

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#8a9237italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#97d700bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#97d700bold
storage.type, storage.modifier#97d700bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#9687b3
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#97d700
string.regexp#9687b3
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#86d0bf
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#e8ae4ebold
variable.other.constant, variable.other.enummember#e8ae4ebold
constant.character.escape#a7dd26
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#8a8d28italic
entity.name.type.parameter#8a8d28italic
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#dedfc8
variable.parameter#dedfc8italic
variable.language, variable.language.this, variable.language.self, variable.language.super#97d700italic
variable.other.property, variable.other.object.property, meta.object-literal.key#dedfc8
entity.name.class, entity.name.type.class, support.class#b0787cbold italic
entity.other.inherited-class#b0787citalic
entity.name.tag, punctuation.definition.tag#97d700bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#a7dd26
punctuation, punctuation.separator, punctuation.terminator, meta.brace#8a9237
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#8a8d28italic
support.type.property-name.css, support.type.vendored.property-name.css#8a8d28
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#b0787cbold
support.constant.property-value.css, support.constant.color.css#e8ae4e
keyword.other.unit.css#86d0bf
support.type.property-name.json#8a8d28
markup.heading, markup.heading entity.name, entity.name.section.markdown#97d700bold
markup.bold#e8ae4ebold
markup.italic#8a8d28italic
markup.inline.raw, markup.raw#9687b3
markup.underline.link#e8d4e2
markup.quote#8a9237italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050