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#2b1613
  • activityBar.border#4d2722
  • activityBar.foreground#ff8272
  • activityBar.inactiveForeground#e8b7a7
  • activityBarBadge.background#00b5cc
  • activityBarBadge.foreground#fcfbfa
  • badge.background#ff8272
  • badge.foreground#261411
  • breadcrumb.activeSelectionForeground#f8ece7
  • breadcrumb.focusForeground#f8ece7
  • breadcrumb.foreground#e8b7a7
  • button.background#ff8272
  • button.foreground#261411
  • button.hoverBackground#ff8f80
  • button.secondaryBackground#381d19
  • button.secondaryForeground#f8ece7
  • descriptionForeground#e8b7a7
  • dropdown.background#2b1613
  • dropdown.border#4d2722
  • dropdown.foreground#f8ece7
  • editor.background#1f100e
  • editor.findMatchBackground#4e9a2f66
  • editor.findMatchHighlightBackground#4e9a2f33
  • editor.foreground#f8ece7
  • editor.inactiveSelectionBackground#ff827226
  • editor.lineHighlightBackground#ff82721a
  • editor.lineHighlightBorder#ff827200
  • editor.selectionBackground#ff82724d
  • editor.wordHighlightBackground#ff827233
  • editorBracketMatch.background#ff827240
  • editorBracketMatch.border#ff827299
  • editorCursor.foreground#ff8272
  • editorError.foreground#dd4132
  • editorGroup.border#4d2722
  • editorGroupHeader.tabsBackground#2b1613
  • editorGroupHeader.tabsBorder#4d2722
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f8ece733
  • editorIndentGuide.background#f8ece714
  • editorInfo.foreground#00b5cc
  • editorLineNumber.activeForeground#f8ece7
  • editorLineNumber.foreground#e8b7a7
  • editorRuler.foreground#f8ece714
  • editorSuggestWidget.selectedBackground#ff827240
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f8ece71a
  • editorWidget.background#2b1613
  • editorWidget.border#4d2722
  • focusBorder#ff827299
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#e8b7a7
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#e8b7a7
  • input.background#2b1613
  • input.border#4d2722
  • input.foreground#f8ece7
  • input.placeholderForeground#e8b7a7
  • inputOption.activeBorder#ff8272
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#00b5cc
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#ff82724d
  • list.activeSelectionForeground#f8ece7
  • list.focusBackground#ff827233
  • list.highlightForeground#ff8272
  • list.hoverBackground#ff827226
  • list.inactiveSelectionBackground#ff827226
  • minimap.background#1f100e
  • minimap.findMatchHighlight#4e9a2f99
  • minimap.selectionHighlight#ff827266
  • notificationLink.foreground#ff8272
  • notifications.background#381d19
  • notifications.foreground#f8ece7
  • panel.background#2b1613
  • panel.border#4d2722
  • panelTitle.activeBorder#ff8272
  • panelTitle.activeForeground#f8ece7
  • panelTitle.inactiveForeground#e8b7a7
  • peekView.border#ff8272
  • peekViewEditor.background#2b1613
  • peekViewResult.background#381d19
  • peekViewTitle.background#2b1613
  • progressBar.background#ff8272
  • scrollbar.shadow#190d0b45
  • scrollbarSlider.activeBackground#f8ece759
  • scrollbarSlider.background#f8ece71f
  • scrollbarSlider.hoverBackground#f8ece740
  • selection.background#ff82724d
  • sideBar.background#381d19
  • sideBar.border#4d2722
  • sideBar.foreground#f8ece7
  • sideBarSectionHeader.background#ff827226
  • sideBarSectionHeader.foreground#f8ece7
  • sideBarTitle.foreground#f8ece7
  • statusBar.background#994e44
  • statusBar.border#4d2722
  • statusBar.debuggingBackground#00b5cc
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#ffb4aa
  • statusBar.noFolderBackground#2b1613
  • statusBarItem.hoverBackground#ff82724d
  • statusBarItem.remoteBackground#ff8272
  • statusBarItem.remoteForeground#261411
  • tab.activeBackground#1f100e
  • tab.activeBorder#ff8272
  • tab.activeBorderTop#ff827200
  • tab.activeForeground#f8ece7
  • tab.border#4d2722
  • tab.inactiveBackground#2b1613
  • tab.inactiveForeground#e8b7a7
  • terminal.ansiBlack#1f100e
  • terminal.ansiBlue#87677a
  • terminal.ansiBrightBlack#e8b7a7
  • 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#f8ece7
  • terminal.ansiYellow#efc050
  • terminal.background#2b1613
  • terminal.foreground#f8ece7
  • terminalCursor.foreground#ff8272
  • textLink.activeForeground#26c0d4
  • textLink.foreground#00b5cc
  • titleBar.activeBackground#2b1613
  • titleBar.activeForeground#f8ece7
  • titleBar.border#4d2722
  • titleBar.inactiveBackground#2b1613
  • titleBar.inactiveForeground#e8b7a7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#e8b7a7italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#ff8272bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#ff8272bold
storage.type, storage.modifier#ff8272bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#00b5cc
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#ff8272
string.regexp#00b5cc
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#ff9587
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#ffbe98italic
entity.name.type.parameter#ffbe98italic
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#f8ece7
variable.parameter#f8ece7italic
variable.language, variable.language.this, variable.language.self, variable.language.super#ff8272italic
variable.other.property, variable.other.object.property, meta.object-literal.key#f8ece7
entity.name.class, entity.name.type.class, support.class#a474bfbold italic
entity.other.inherited-class#a474bfitalic
entity.name.tag, punctuation.definition.tag#ff8272bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ff9587
punctuation, punctuation.separator, punctuation.terminator, meta.brace#e8b7a7
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#ffbe98italic
support.type.property-name.css, support.type.vendored.property-name.css#ffbe98
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#a474bfbold
support.constant.property-value.css, support.constant.color.css#f5df4d
keyword.other.unit.css#4e9a2f
support.type.property-name.json#ffbe98
markup.heading, markup.heading entity.name, entity.name.section.markdown#ff8272bold
markup.bold#f5df4dbold
markup.italic#ffbe98italic
markup.inline.raw, markup.raw#00b5cc
markup.underline.link#e8d4e2
markup.quote#e8b7a7italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050