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#1c0f07
  • activityBar.border#28160a
  • activityBar.foreground#5c3317
  • activityBar.inactiveForeground#b79f8c
  • activityBarBadge.background#1464a0
  • activityBarBadge.foreground#fcfbfa
  • badge.background#5c3317
  • badge.foreground#fcfbfa
  • breadcrumb.activeSelectionForeground#ede6e1
  • breadcrumb.focusForeground#ede6e1
  • breadcrumb.foreground#b79f8c
  • button.background#5c3317
  • button.foreground#fcfbfa
  • button.hoverBackground#6c472e
  • button.secondaryBackground#201208
  • button.secondaryForeground#ede6e1
  • descriptionForeground#b79f8c
  • dropdown.background#1c0f07
  • dropdown.border#28160a
  • dropdown.foreground#ede6e1
  • editor.background#170d06
  • editor.findMatchBackground#76ff7b66
  • editor.findMatchHighlightBackground#76ff7b33
  • editor.foreground#ede6e1
  • editor.inactiveSelectionBackground#5c331726
  • editor.lineHighlightBackground#5c33171a
  • editor.lineHighlightBorder#5c331700
  • editor.selectionBackground#5c33174d
  • editor.wordHighlightBackground#5c331733
  • editorBracketMatch.background#5c331740
  • editorBracketMatch.border#5c331799
  • editorCursor.foreground#5c3317
  • editorError.foreground#dd4132
  • editorGroup.border#28160a
  • editorGroupHeader.tabsBackground#1c0f07
  • editorGroupHeader.tabsBorder#28160a
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#ede6e133
  • editorIndentGuide.background#ede6e114
  • editorInfo.foreground#1464a0
  • editorLineNumber.activeForeground#ede6e1
  • editorLineNumber.foreground#b79f8c
  • editorRuler.foreground#ede6e114
  • editorSuggestWidget.selectedBackground#5c331740
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#ede6e11a
  • editorWidget.background#1c0f07
  • editorWidget.border#28160a
  • focusBorder#5c331799
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#b79f8c
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#b79f8c
  • input.background#1c0f07
  • input.border#28160a
  • input.foreground#ede6e1
  • input.placeholderForeground#b79f8c
  • inputOption.activeBorder#5c3317
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#1464a0
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#5c33174d
  • list.activeSelectionForeground#ede6e1
  • list.focusBackground#5c331733
  • list.highlightForeground#5c3317
  • list.hoverBackground#5c331726
  • list.inactiveSelectionBackground#5c331726
  • minimap.background#170d06
  • minimap.findMatchHighlight#76ff7b99
  • minimap.selectionHighlight#5c331766
  • notificationLink.foreground#5c3317
  • notifications.background#201208
  • notifications.foreground#ede6e1
  • panel.background#1c0f07
  • panel.border#28160a
  • panelTitle.activeBorder#5c3317
  • panelTitle.activeForeground#ede6e1
  • panelTitle.inactiveForeground#b79f8c
  • peekView.border#5c3317
  • peekViewEditor.background#1c0f07
  • peekViewResult.background#201208
  • peekViewTitle.background#1c0f07
  • progressBar.background#5c3317
  • scrollbar.shadow#09050245
  • scrollbarSlider.activeBackground#ede6e159
  • scrollbarSlider.background#ede6e11f
  • scrollbarSlider.hoverBackground#ede6e140
  • selection.background#5c33174d
  • sideBar.background#201208
  • sideBar.border#28160a
  • sideBar.foreground#ede6e1
  • sideBarSectionHeader.background#5c331726
  • sideBarSectionHeader.foreground#ede6e1
  • sideBarTitle.foreground#ede6e1
  • statusBar.background#371f0e
  • statusBar.border#28160a
  • statusBar.debuggingBackground#1464a0
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#9d8574
  • statusBar.noFolderBackground#1c0f07
  • statusBarItem.hoverBackground#5c33174d
  • statusBarItem.remoteBackground#5c3317
  • statusBarItem.remoteForeground#fcfbfa
  • tab.activeBackground#170d06
  • tab.activeBorder#5c3317
  • tab.activeBorderTop#5c331700
  • tab.activeForeground#ede6e1
  • tab.border#28160a
  • tab.inactiveBackground#1c0f07
  • tab.inactiveForeground#b79f8c
  • terminal.ansiBlack#170d06
  • terminal.ansiBlue#36404c
  • terminal.ansiBrightBlack#b79f8c
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#fcfbfa
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#ede6e1
  • terminal.ansiYellow#efc050
  • terminal.background#1c0f07
  • terminal.foreground#ede6e1
  • terminalCursor.foreground#5c3317
  • textLink.activeForeground#377bae
  • textLink.foreground#1464a0
  • titleBar.activeBackground#1c0f07
  • titleBar.activeForeground#ede6e1
  • titleBar.border#28160a
  • titleBar.inactiveBackground#1c0f07
  • titleBar.inactiveForeground#b79f8c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#b79f8citalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#937966bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#937966bold
storage.type, storage.modifier#937966bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#4886b5
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#937966
string.regexp#4886b5
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#76ff7b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#c8d800bold
variable.other.constant, variable.other.enummember#c8d800bold
constant.character.escape#927965
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#c9b99aitalic
entity.name.type.parameter#c9b99aitalic
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#ede6e1
variable.parameter#ede6e1italic
variable.language, variable.language.this, variable.language.self, variable.language.super#937966italic
variable.other.property, variable.other.object.property, meta.object-literal.key#ede6e1
entity.name.class, entity.name.type.class, support.class#ad6ab3bold italic
entity.other.inherited-class#ad6ab3italic
entity.name.tag, punctuation.definition.tag#937966bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#927965
punctuation, punctuation.separator, punctuation.terminator, meta.brace#b79f8c
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#c9b99aitalic
support.type.property-name.css, support.type.vendored.property-name.css#c9b99a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ad6ab3bold
support.constant.property-value.css, support.constant.color.css#c8d800
keyword.other.unit.css#76ff7b
support.type.property-name.json#c9b99a
markup.heading, markup.heading entity.name, entity.name.section.markdown#937966bold
markup.bold#c8d800bold
markup.italic#c9b99aitalic
markup.inline.raw, markup.raw#4886b5
markup.underline.link#e8d4e2
markup.quote#b79f8citalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050