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#10200a
  • activityBar.border#1b3410
  • activityBar.foreground#4e9a2f
  • activityBar.inactiveForeground#748045
  • activityBarBadge.background#5c068c
  • activityBarBadge.foreground#f5f4f1
  • badge.background#4e9a2f
  • badge.foreground#0c1707
  • breadcrumb.activeSelectionForeground#d9dbcb
  • breadcrumb.focusForeground#d9dbcb
  • breadcrumb.foreground#748045
  • button.background#4e9a2f
  • button.foreground#0c1707
  • button.hoverBackground#60a444
  • button.secondaryBackground#14280c
  • button.secondaryForeground#d9dbcb
  • descriptionForeground#748045
  • dropdown.background#10200a
  • dropdown.border#1b3410
  • dropdown.foreground#d9dbcb
  • editor.background#0c1908
  • editor.findMatchBackground#00b5cc66
  • editor.findMatchHighlightBackground#00b5cc33
  • editor.foreground#d9dbcb
  • editor.inactiveSelectionBackground#4e9a2f26
  • editor.lineHighlightBackground#4e9a2f1a
  • editor.lineHighlightBorder#4e9a2f00
  • editor.selectionBackground#4e9a2f4d
  • editor.wordHighlightBackground#4e9a2f33
  • editorBracketMatch.background#4e9a2f40
  • editorBracketMatch.border#4e9a2f99
  • editorCursor.foreground#4e9a2f
  • editorError.foreground#dd4132
  • editorGroup.border#1b3410
  • editorGroupHeader.tabsBackground#10200a
  • editorGroupHeader.tabsBorder#1b3410
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#d9dbcb33
  • editorIndentGuide.background#d9dbcb14
  • editorInfo.foreground#5c068c
  • editorLineNumber.activeForeground#d9dbcb
  • editorLineNumber.foreground#748045
  • editorRuler.foreground#d9dbcb14
  • editorSuggestWidget.selectedBackground#4e9a2f40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#d9dbcb1a
  • editorWidget.background#10200a
  • editorWidget.border#1b3410
  • focusBorder#4e9a2f99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#748045
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#748045
  • input.background#10200a
  • input.border#1b3410
  • input.foreground#d9dbcb
  • input.placeholderForeground#748045
  • inputOption.activeBorder#4e9a2f
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#5c068c
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#4e9a2f4d
  • list.activeSelectionForeground#d9dbcb
  • list.focusBackground#4e9a2f33
  • list.highlightForeground#4e9a2f
  • list.hoverBackground#4e9a2f26
  • list.inactiveSelectionBackground#4e9a2f26
  • minimap.background#0c1908
  • minimap.findMatchHighlight#00b5cc99
  • minimap.selectionHighlight#4e9a2f66
  • notificationLink.foreground#4e9a2f
  • notifications.background#14280c
  • notifications.foreground#d9dbcb
  • panel.background#10200a
  • panel.border#1b3410
  • panelTitle.activeBorder#4e9a2f
  • panelTitle.activeForeground#d9dbcb
  • panelTitle.inactiveForeground#748045
  • peekView.border#4e9a2f
  • peekViewEditor.background#10200a
  • peekViewResult.background#14280c
  • peekViewTitle.background#10200a
  • progressBar.background#4e9a2f
  • scrollbar.shadow#080f0545
  • scrollbarSlider.activeBackground#d9dbcb59
  • scrollbarSlider.background#d9dbcb1f
  • scrollbarSlider.hoverBackground#d9dbcb40
  • selection.background#4e9a2f4d
  • sideBar.background#14280c
  • sideBar.border#1b3410
  • sideBar.foreground#d9dbcb
  • sideBarSectionHeader.background#4e9a2f26
  • sideBarSectionHeader.foreground#d9dbcb
  • sideBarTitle.foreground#d9dbcb
  • statusBar.background#2f5c1c
  • statusBar.border#1b3410
  • statusBar.debuggingBackground#5c068c
  • statusBar.debuggingForeground#f5f4f1
  • statusBar.foreground#95c282
  • statusBar.noFolderBackground#10200a
  • statusBarItem.hoverBackground#4e9a2f4d
  • statusBarItem.remoteBackground#4e9a2f
  • statusBarItem.remoteForeground#0c1707
  • tab.activeBackground#0c1908
  • tab.activeBorder#4e9a2f
  • tab.activeBorderTop#4e9a2f00
  • tab.activeForeground#d9dbcb
  • tab.border#1b3410
  • tab.inactiveBackground#10200a
  • tab.inactiveForeground#748045
  • terminal.ansiBlack#0c1908
  • terminal.ansiBlue#2f7358
  • terminal.ansiBrightBlack#748045
  • 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#d9dbcb
  • terminal.ansiYellow#efc050
  • terminal.background#10200a
  • terminal.foreground#d9dbcb
  • terminalCursor.foreground#4e9a2f
  • textLink.activeForeground#742b9d
  • textLink.foreground#5c068c
  • titleBar.activeBackground#10200a
  • titleBar.activeForeground#d9dbcb
  • titleBar.border#1b3410
  • titleBar.inactiveBackground#10200a
  • titleBar.inactiveForeground#748045

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#748045italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#4e9a2fbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#4e9a2fbold
storage.type, storage.modifier#4e9a2fbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#a474bf
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#4e9a2f
string.regexp#a474bf
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#00b5cc
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#8a8d28bold
variable.other.constant, variable.other.enummember#8a8d28bold
constant.character.escape#69a94e
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#78be20italic
entity.name.type.parameter#78be20italic
entity.name.function, meta.function entity.name.function#f7cac9bold
meta.function-call entity.name.function, support.function#f7cac9
meta.method-call entity.name.function, entity.name.function.member#f7cac9
variable, variable.other, variable.other.readwrite#d9dbcb
variable.parameter#d9dbcbitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#4e9a2fitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#d9dbcb
entity.name.class, entity.name.type.class, support.class#ffbe98bold italic
entity.other.inherited-class#ffbe98italic
entity.name.tag, punctuation.definition.tag#4e9a2fbold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#69a94e
punctuation, punctuation.separator, punctuation.terminator, meta.brace#748045
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#78be20italic
support.type.property-name.css, support.type.vendored.property-name.css#78be20
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffbe98bold
support.constant.property-value.css, support.constant.color.css#8a8d28
keyword.other.unit.css#00b5cc
support.type.property-name.json#78be20
markup.heading, markup.heading entity.name, entity.name.section.markdown#4e9a2fbold
markup.bold#8a8d28bold
markup.italic#78be20italic
markup.inline.raw, markup.raw#a474bf
markup.underline.link#f7cac9
markup.quote#748045italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050