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#2b120e
  • activityBar.border#4d2019
  • activityBar.foreground#ff6b54
  • activityBar.inactiveForeground#e8b09e
  • activityBarBadge.background#006e7f
  • activityBarBadge.foreground#fcfbfa
  • badge.background#ff6b54
  • badge.foreground#26100d
  • breadcrumb.activeSelectionForeground#f8eae6
  • breadcrumb.focusForeground#f8eae6
  • breadcrumb.foreground#e8b09e
  • button.background#ff6b54
  • button.foreground#26100d
  • button.hoverBackground#ff7a65
  • button.secondaryBackground#381812
  • button.secondaryForeground#f8eae6
  • descriptionForeground#e8b09e
  • dropdown.background#2b120e
  • dropdown.border#4d2019
  • dropdown.foreground#f8eae6
  • editor.background#1f0d0a
  • editor.findMatchBackground#4e9a2f66
  • editor.findMatchHighlightBackground#4e9a2f33
  • editor.foreground#f8eae6
  • editor.inactiveSelectionBackground#ff6b5426
  • editor.lineHighlightBackground#ff6b541a
  • editor.lineHighlightBorder#ff6b5400
  • editor.selectionBackground#ff6b544d
  • editor.wordHighlightBackground#ff6b5433
  • editorBracketMatch.background#ff6b5440
  • editorBracketMatch.border#ff6b5499
  • editorCursor.foreground#ff6b54
  • editorError.foreground#dd4132
  • editorGroup.border#4d2019
  • editorGroupHeader.tabsBackground#2b120e
  • editorGroupHeader.tabsBorder#4d2019
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f8eae633
  • editorIndentGuide.background#f8eae614
  • editorInfo.foreground#006e7f
  • editorLineNumber.activeForeground#f8eae6
  • editorLineNumber.foreground#e8b09e
  • editorRuler.foreground#f8eae614
  • editorSuggestWidget.selectedBackground#ff6b5440
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f8eae61a
  • editorWidget.background#2b120e
  • editorWidget.border#4d2019
  • focusBorder#ff6b5499
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#e8b09e
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#e8b09e
  • input.background#2b120e
  • input.border#4d2019
  • input.foreground#f8eae6
  • input.placeholderForeground#e8b09e
  • inputOption.activeBorder#ff6b54
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#006e7f
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#ff6b544d
  • list.activeSelectionForeground#f8eae6
  • list.focusBackground#ff6b5433
  • list.highlightForeground#ff6b54
  • list.hoverBackground#ff6b5426
  • list.inactiveSelectionBackground#ff6b5426
  • minimap.background#1f0d0a
  • minimap.findMatchHighlight#4e9a2f99
  • minimap.selectionHighlight#ff6b5466
  • notificationLink.foreground#ff6b54
  • notifications.background#381812
  • notifications.foreground#f8eae6
  • panel.background#2b120e
  • panel.border#4d2019
  • panelTitle.activeBorder#ff6b54
  • panelTitle.activeForeground#f8eae6
  • panelTitle.inactiveForeground#e8b09e
  • peekView.border#ff6b54
  • peekViewEditor.background#2b120e
  • peekViewResult.background#381812
  • peekViewTitle.background#2b120e
  • progressBar.background#ff6b54
  • scrollbar.shadow#190b0845
  • scrollbarSlider.activeBackground#f8eae659
  • scrollbarSlider.background#f8eae61f
  • scrollbarSlider.hoverBackground#f8eae640
  • selection.background#ff6b544d
  • sideBar.background#381812
  • sideBar.border#4d2019
  • sideBar.foreground#f8eae6
  • sideBarSectionHeader.background#ff6b5426
  • sideBarSectionHeader.foreground#f8eae6
  • sideBarTitle.foreground#f8eae6
  • statusBar.background#994032
  • statusBar.border#4d2019
  • statusBar.debuggingBackground#006e7f
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#ffa698
  • statusBar.noFolderBackground#2b120e
  • statusBarItem.hoverBackground#ff6b544d
  • statusBarItem.remoteBackground#ff6b54
  • statusBarItem.remoteForeground#26100d
  • tab.activeBackground#1f0d0a
  • tab.activeBorder#ff6b54
  • tab.activeBorderTop#ff6b5400
  • tab.activeForeground#f8eae6
  • tab.border#4d2019
  • tab.inactiveBackground#2b120e
  • tab.inactiveForeground#e8b09e
  • terminal.ansiBlack#1f0d0a
  • terminal.ansiBlue#875c6b
  • terminal.ansiBrightBlack#e8b09e
  • 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#f8eae6
  • terminal.ansiYellow#efc050
  • terminal.background#2b120e
  • terminal.foreground#f8eae6
  • terminalCursor.foreground#ff6b54
  • textLink.activeForeground#268492
  • textLink.foreground#006e7f
  • titleBar.activeBackground#2b120e
  • titleBar.activeForeground#f8eae6
  • titleBar.border#4d2019
  • titleBar.inactiveBackground#2b120e
  • titleBar.inactiveForeground#e8b09e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#e8b09eitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#ff6b54bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#ff6b54bold
storage.type, storage.modifier#ff6b54bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#388f9b
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#ff6b54
string.regexp#388f9b
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#4e9a2f
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#f5df4dbold
variable.other.constant, variable.other.enummember#f5df4dbold
constant.character.escape#ff816e
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#937966italic
entity.name.type.parameter#937966italic
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#f8eae6
variable.parameter#f8eae6italic
variable.language, variable.language.this, variable.language.self, variable.language.super#ff6b54italic
variable.other.property, variable.other.object.property, meta.object-literal.key#f8eae6
entity.name.class, entity.name.type.class, support.class#9c68b9bold italic
entity.other.inherited-class#9c68b9italic
entity.name.tag, punctuation.definition.tag#ff6b54bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ff816e
punctuation, punctuation.separator, punctuation.terminator, meta.brace#e8b09e
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#937966italic
support.type.property-name.css, support.type.vendored.property-name.css#937966
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9c68b9bold
support.constant.property-value.css, support.constant.color.css#f5df4d
keyword.other.unit.css#4e9a2f
support.type.property-name.json#937966
markup.heading, markup.heading entity.name, entity.name.section.markdown#ff6b54bold
markup.bold#f5df4dbold
markup.italic#937966italic
markup.inline.raw, markup.raw#388f9b
markup.underline.link#e8d4e2
markup.quote#e8b09eitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050