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#1f1c16
  • activityBar.border#383128
  • activityBar.foreground#b9a384
  • activityBar.inactiveForeground#b9a384
  • activityBarBadge.background#4a6fa5
  • activityBarBadge.foreground#f9f8f5
  • badge.background#b9a384
  • badge.foreground#1c1814
  • breadcrumb.activeSelectionForeground#ebe5dd
  • breadcrumb.focusForeground#ebe5dd
  • breadcrumb.foreground#b9a384
  • button.background#b9a384
  • button.foreground#1c1814
  • button.hoverBackground#c0ac90
  • button.secondaryBackground#29241d
  • button.secondaryForeground#ebe5dd
  • descriptionForeground#b9a384
  • dropdown.background#1f1c16
  • dropdown.border#383128
  • dropdown.foreground#ebe5dd
  • editor.background#161410
  • editor.findMatchBackground#5c068c66
  • editor.findMatchHighlightBackground#5c068c33
  • editor.foreground#ebe5dd
  • editor.inactiveSelectionBackground#b9a38426
  • editor.lineHighlightBackground#b9a3841a
  • editor.lineHighlightBorder#b9a38400
  • editor.selectionBackground#b9a3844d
  • editor.wordHighlightBackground#b9a38433
  • editorBracketMatch.background#b9a38440
  • editorBracketMatch.border#b9a38499
  • editorCursor.foreground#b9a384
  • editorError.foreground#dd4132
  • editorGroup.border#383128
  • editorGroupHeader.tabsBackground#1f1c16
  • editorGroupHeader.tabsBorder#383128
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#ebe5dd33
  • editorIndentGuide.background#ebe5dd14
  • editorInfo.foreground#4a6fa5
  • editorLineNumber.activeForeground#ebe5dd
  • editorLineNumber.foreground#b9a384
  • editorRuler.foreground#ebe5dd14
  • editorSuggestWidget.selectedBackground#b9a38440
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#ebe5dd1a
  • editorWidget.background#1f1c16
  • editorWidget.border#383128
  • focusBorder#b9a38499
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#b9a384
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#b9a384
  • input.background#1f1c16
  • input.border#383128
  • input.foreground#ebe5dd
  • input.placeholderForeground#b9a384
  • inputOption.activeBorder#b9a384
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#4a6fa5
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#b9a3844d
  • list.activeSelectionForeground#ebe5dd
  • list.focusBackground#b9a38433
  • list.highlightForeground#b9a384
  • list.hoverBackground#b9a38426
  • list.inactiveSelectionBackground#b9a38426
  • minimap.background#161410
  • minimap.findMatchHighlight#5c068c99
  • minimap.selectionHighlight#b9a38466
  • notificationLink.foreground#b9a384
  • notifications.background#29241d
  • notifications.foreground#ebe5dd
  • panel.background#1f1c16
  • panel.border#383128
  • panelTitle.activeBorder#b9a384
  • panelTitle.activeForeground#ebe5dd
  • panelTitle.inactiveForeground#b9a384
  • peekView.border#b9a384
  • peekViewEditor.background#1f1c16
  • peekViewResult.background#29241d
  • peekViewTitle.background#1f1c16
  • progressBar.background#b9a384
  • scrollbar.shadow#12100d45
  • scrollbarSlider.activeBackground#ebe5dd59
  • scrollbarSlider.background#ebe5dd1f
  • scrollbarSlider.hoverBackground#ebe5dd40
  • selection.background#b9a3844d
  • sideBar.background#29241d
  • sideBar.border#383128
  • sideBar.foreground#ebe5dd
  • sideBarSectionHeader.background#b9a38426
  • sideBarSectionHeader.foreground#ebe5dd
  • sideBarTitle.foreground#ebe5dd
  • statusBar.background#6f624f
  • statusBar.border#383128
  • statusBar.debuggingBackground#4a6fa5
  • statusBar.debuggingForeground#f9f8f5
  • statusBar.foreground#d5c8b5
  • statusBar.noFolderBackground#1f1c16
  • statusBarItem.hoverBackground#b9a3844d
  • statusBarItem.remoteBackground#b9a384
  • statusBarItem.remoteForeground#1c1814
  • tab.activeBackground#161410
  • tab.activeBorder#b9a384
  • tab.activeBorderTop#b9a38400
  • tab.activeForeground#ebe5dd
  • tab.border#383128
  • tab.inactiveBackground#1f1c16
  • tab.inactiveForeground#b9a384
  • terminal.ansiBlack#161410
  • terminal.ansiBlue#647883
  • terminal.ansiBrightBlack#b9a384
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f9f8f5
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#ebe5dd
  • terminal.ansiYellow#efc050
  • terminal.background#1f1c16
  • terminal.foreground#ebe5dd
  • terminalCursor.foreground#b9a384
  • textLink.activeForeground#6585b3
  • textLink.foreground#4a6fa5
  • titleBar.activeBackground#1f1c16
  • titleBar.activeForeground#ebe5dd
  • titleBar.border#383128
  • titleBar.inactiveBackground#1f1c16
  • titleBar.inactiveForeground#b9a384

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#b9a384italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#b9a384bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#b9a384bold
storage.type, storage.modifier#b9a384bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#6586b3
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#b9a384
string.regexp#6586b3
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#a474bf
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#b0787cbold
variable.other.constant, variable.other.enummember#b0787cbold
constant.character.escape#c4b196
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#fe5000italic
entity.name.type.parameter#fe5000italic
entity.name.function, meta.function entity.name.function#76ff7bbold
meta.function-call entity.name.function, support.function#76ff7b
meta.method-call entity.name.function, entity.name.function.member#76ff7b
variable, variable.other, variable.other.readwrite#ebe5dd
variable.parameter#ebe5dditalic
variable.language, variable.language.this, variable.language.self, variable.language.super#b9a384italic
variable.other.property, variable.other.object.property, meta.object-literal.key#ebe5dd
entity.name.class, entity.name.type.class, support.class#b163a3bold italic
entity.other.inherited-class#b163a3italic
entity.name.tag, punctuation.definition.tag#b9a384bold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#c4b196
punctuation, punctuation.separator, punctuation.terminator, meta.brace#b9a384
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#fe5000italic
support.type.property-name.css, support.type.vendored.property-name.css#fe5000
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#b163a3bold
support.constant.property-value.css, support.constant.color.css#b0787c
keyword.other.unit.css#a474bf
support.type.property-name.json#fe5000
markup.heading, markup.heading entity.name, entity.name.section.markdown#b9a384bold
markup.bold#b0787cbold
markup.italic#fe5000italic
markup.inline.raw, markup.raw#6586b3
markup.underline.link#76ff7b
markup.quote#b9a384italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050