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#1a0709
  • activityBar.border#2a0b0e
  • activityBar.foreground#7c2029
  • activityBar.inactiveForeground#7d4050
  • activityBarBadge.background#45b5aa
  • activityBarBadge.foreground#f5f1f2
  • badge.background#7c2029
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#dbcacf
  • breadcrumb.focusForeground#dbcacf
  • breadcrumb.foreground#7d4050
  • button.background#7c2029
  • button.foreground#f5f1f2
  • button.hoverBackground#89363e
  • button.secondaryBackground#20080b
  • button.secondaryForeground#dbcacf
  • descriptionForeground#7d4050
  • dropdown.background#1a0709
  • dropdown.border#2a0b0e
  • dropdown.foreground#dbcacf
  • editor.background#140507
  • editor.findMatchBackground#9063cd66
  • editor.findMatchHighlightBackground#9063cd33
  • editor.foreground#dbcacf
  • editor.inactiveSelectionBackground#7c202926
  • editor.lineHighlightBackground#7c20291a
  • editor.lineHighlightBorder#7c202900
  • editor.selectionBackground#7c20294d
  • editor.wordHighlightBackground#7c202933
  • editorBracketMatch.background#7c202940
  • editorBracketMatch.border#7c202999
  • editorCursor.foreground#7c2029
  • editorError.foreground#dd4132
  • editorGroup.border#2a0b0e
  • editorGroupHeader.tabsBackground#1a0709
  • editorGroupHeader.tabsBorder#2a0b0e
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#dbcacf33
  • editorIndentGuide.background#dbcacf14
  • editorInfo.foreground#45b5aa
  • editorLineNumber.activeForeground#dbcacf
  • editorLineNumber.foreground#7d4050
  • editorRuler.foreground#dbcacf14
  • editorSuggestWidget.selectedBackground#7c202940
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#dbcacf1a
  • editorWidget.background#1a0709
  • editorWidget.border#2a0b0e
  • focusBorder#7c202999
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#7d4050
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#7d4050
  • input.background#1a0709
  • input.border#2a0b0e
  • input.foreground#dbcacf
  • input.placeholderForeground#7d4050
  • inputOption.activeBorder#7c2029
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#45b5aa
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#7c20294d
  • list.activeSelectionForeground#dbcacf
  • list.focusBackground#7c202933
  • list.highlightForeground#7c2029
  • list.hoverBackground#7c202926
  • list.inactiveSelectionBackground#7c202926
  • minimap.background#140507
  • minimap.findMatchHighlight#9063cd99
  • minimap.selectionHighlight#7c202966
  • notificationLink.foreground#7c2029
  • notifications.background#20080b
  • notifications.foreground#dbcacf
  • panel.background#1a0709
  • panel.border#2a0b0e
  • panelTitle.activeBorder#7c2029
  • panelTitle.activeForeground#dbcacf
  • panelTitle.inactiveForeground#7d4050
  • peekView.border#7c2029
  • peekViewEditor.background#1a0709
  • peekViewResult.background#20080b
  • peekViewTitle.background#1a0709
  • progressBar.background#7c2029
  • scrollbar.shadow#0c030445
  • scrollbarSlider.activeBackground#dbcacf59
  • scrollbarSlider.background#dbcacf1f
  • scrollbarSlider.hoverBackground#dbcacf40
  • selection.background#7c20294d
  • sideBar.background#20080b
  • sideBar.border#2a0b0e
  • sideBar.foreground#dbcacf
  • sideBarSectionHeader.background#7c202926
  • sideBarSectionHeader.foreground#dbcacf
  • sideBarTitle.foreground#dbcacf
  • statusBar.background#4a1319
  • statusBar.border#2a0b0e
  • statusBar.debuggingBackground#45b5aa
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#b0797f
  • statusBar.noFolderBackground#1a0709
  • statusBarItem.hoverBackground#7c20294d
  • statusBarItem.remoteBackground#7c2029
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#140507
  • tab.activeBorder#7c2029
  • tab.activeBorderTop#7c202900
  • tab.activeForeground#dbcacf
  • tab.border#2a0b0e
  • tab.inactiveBackground#1a0709
  • tab.inactiveForeground#7d4050
  • terminal.ansiBlack#140507
  • terminal.ansiBlue#463655
  • terminal.ansiBrightBlack#7d4050
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f5f1f2
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#dbcacf
  • terminal.ansiYellow#efc050
  • terminal.background#1a0709
  • terminal.foreground#dbcacf
  • terminalCursor.foreground#7c2029
  • textLink.activeForeground#61c0b7
  • textLink.foreground#45b5aa
  • titleBar.activeBackground#1a0709
  • titleBar.activeForeground#dbcacf
  • titleBar.border#2a0b0e
  • titleBar.inactiveBackground#1a0709
  • titleBar.inactiveForeground#7d4050

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#7d4050italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#a96c71bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#a96c71bold
storage.type, storage.modifier#a96c71bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#45b5aa
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#a96c71
string.regexp#45b5aa
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#9063cd
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#b9a384bold
variable.other.constant, variable.other.enummember#b9a384bold
constant.character.escape#a96b71
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#e2583eitalic
entity.name.type.parameter#e2583eitalic
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#dbcacf
variable.parameter#dbcacfitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#a96c71italic
variable.other.property, variable.other.object.property, meta.object-literal.key#dbcacf
entity.name.class, entity.name.type.class, support.class#a3af86bold italic
entity.other.inherited-class#a3af86italic
entity.name.tag, punctuation.definition.tag#a96c71bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#a96b71
punctuation, punctuation.separator, punctuation.terminator, meta.brace#7d4050
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#e2583eitalic
support.type.property-name.css, support.type.vendored.property-name.css#e2583e
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#a3af86bold
support.constant.property-value.css, support.constant.color.css#b9a384
keyword.other.unit.css#9063cd
support.type.property-name.json#e2583e
markup.heading, markup.heading entity.name, entity.name.section.markdown#a96c71bold
markup.bold#b9a384bold
markup.italic#e2583eitalic
markup.inline.raw, markup.raw#45b5aa
markup.underline.link#e8d4e2
markup.quote#7d4050italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050