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#2b0c0a
  • activityBar.border#461311
  • activityBar.foreground#ce3732
  • activityBar.inactiveForeground#d9a094
  • activityBarBadge.background#53b0ae
  • activityBarBadge.foreground#fcfbfa
  • badge.background#ce3732
  • badge.foreground#fcfbfa
  • breadcrumb.activeSelectionForeground#f5e7e3
  • breadcrumb.focusForeground#f5e7e3
  • breadcrumb.foreground#d9a094
  • button.background#ce3732
  • button.foreground#fcfbfa
  • button.hoverBackground#d34b47
  • button.secondaryBackground#360e0d
  • button.secondaryForeground#f5e7e3
  • descriptionForeground#d9a094
  • dropdown.background#2b0c0a
  • dropdown.border#461311
  • dropdown.foreground#f5e7e3
  • editor.background#210908
  • editor.findMatchBackground#5c068c66
  • editor.findMatchHighlightBackground#5c068c33
  • editor.foreground#f5e7e3
  • editor.inactiveSelectionBackground#ce373226
  • editor.lineHighlightBackground#ce37321a
  • editor.lineHighlightBorder#ce373200
  • editor.selectionBackground#ce37324d
  • editor.wordHighlightBackground#ce373233
  • editorBracketMatch.background#ce373240
  • editorBracketMatch.border#ce373299
  • editorCursor.foreground#ce3732
  • editorError.foreground#dd4132
  • editorGroup.border#461311
  • editorGroupHeader.tabsBackground#2b0c0a
  • editorGroupHeader.tabsBorder#461311
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f5e7e333
  • editorIndentGuide.background#f5e7e314
  • editorInfo.foreground#53b0ae
  • editorLineNumber.activeForeground#f5e7e3
  • editorLineNumber.foreground#d9a094
  • editorRuler.foreground#f5e7e314
  • editorSuggestWidget.selectedBackground#ce373240
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f5e7e31a
  • editorWidget.background#2b0c0a
  • editorWidget.border#461311
  • focusBorder#ce373299
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#d9a094
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#d9a094
  • input.background#2b0c0a
  • input.border#461311
  • input.foreground#f5e7e3
  • input.placeholderForeground#d9a094
  • inputOption.activeBorder#ce3732
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#53b0ae
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#ce37324d
  • list.activeSelectionForeground#f5e7e3
  • list.focusBackground#ce373233
  • list.highlightForeground#ce3732
  • list.hoverBackground#ce373226
  • list.inactiveSelectionBackground#ce373226
  • minimap.background#210908
  • minimap.findMatchHighlight#5c068c99
  • minimap.selectionHighlight#ce373266
  • notificationLink.foreground#ce3732
  • notifications.background#360e0d
  • notifications.foreground#f5e7e3
  • panel.background#2b0c0a
  • panel.border#461311
  • panelTitle.activeBorder#ce3732
  • panelTitle.activeForeground#f5e7e3
  • panelTitle.inactiveForeground#d9a094
  • peekView.border#ce3732
  • peekViewEditor.background#2b0c0a
  • peekViewResult.background#360e0d
  • peekViewTitle.background#2b0c0a
  • progressBar.background#ce3732
  • scrollbar.shadow#15050545
  • scrollbarSlider.activeBackground#f5e7e359
  • scrollbarSlider.background#f5e7e31f
  • scrollbarSlider.hoverBackground#f5e7e340
  • selection.background#ce37324d
  • sideBar.background#360e0d
  • sideBar.border#461311
  • sideBar.foreground#f5e7e3
  • sideBarSectionHeader.background#ce373226
  • sideBarSectionHeader.foreground#f5e7e3
  • sideBarTitle.foreground#f5e7e3
  • statusBar.background#7c211e
  • statusBar.border#461311
  • statusBar.debuggingBackground#53b0ae
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#e28784
  • statusBar.noFolderBackground#2b0c0a
  • statusBarItem.hoverBackground#ce37324d
  • statusBarItem.remoteBackground#ce3732
  • statusBarItem.remoteForeground#fcfbfa
  • tab.activeBackground#210908
  • tab.activeBorder#ce3732
  • tab.activeBorderTop#ce373200
  • tab.activeForeground#f5e7e3
  • tab.border#461311
  • tab.inactiveBackground#2b0c0a
  • tab.inactiveForeground#d9a094
  • terminal.ansiBlack#210908
  • terminal.ansiBlue#6f425a
  • terminal.ansiBrightBlack#d9a094
  • 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#f5e7e3
  • terminal.ansiYellow#efc050
  • terminal.background#2b0c0a
  • terminal.foreground#f5e7e3
  • terminalCursor.foreground#ce3732
  • textLink.activeForeground#6dbcba
  • textLink.foreground#53b0ae
  • titleBar.activeBackground#2b0c0a
  • titleBar.activeForeground#f5e7e3
  • titleBar.border#461311
  • titleBar.inactiveBackground#2b0c0a
  • titleBar.inactiveForeground#d9a094

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#d9a094italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#d65651bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#d65651bold
storage.type, storage.modifier#d65651bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#53b0ae
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#d65651
string.regexp#53b0ae
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#9c68b9
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#efc050bold
variable.other.constant, variable.other.enummember#efc050bold
constant.character.escape#d55551
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#b07583italic
entity.name.type.parameter#b07583italic
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#f5e7e3
variable.parameter#f5e7e3italic
variable.language, variable.language.this, variable.language.self, variable.language.super#d65651italic
variable.other.property, variable.other.object.property, meta.object-literal.key#f5e7e3
entity.name.class, entity.name.type.class, support.class#88b04bbold italic
entity.other.inherited-class#88b04bitalic
entity.name.tag, punctuation.definition.tag#d65651bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#d55551
punctuation, punctuation.separator, punctuation.terminator, meta.brace#d9a094
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#b07583italic
support.type.property-name.css, support.type.vendored.property-name.css#b07583
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#88b04bbold
support.constant.property-value.css, support.constant.color.css#efc050
keyword.other.unit.css#9c68b9
support.type.property-name.json#b07583
markup.heading, markup.heading entity.name, entity.name.section.markdown#d65651bold
markup.bold#efc050bold
markup.italic#b07583italic
markup.inline.raw, markup.raw#53b0ae
markup.underline.link#e8d4e2
markup.quote#d9a094italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050