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#2e0906
  • activityBar.border#4a0e0a
  • activityBar.foreground#da291c
  • activityBar.inactiveForeground#dd9c8d
  • activityBarBadge.background#00b5cc
  • activityBarBadge.foreground#fcfbfa
  • badge.background#da291c
  • badge.foreground#fcfbfa
  • breadcrumb.activeSelectionForeground#f5e6e2
  • breadcrumb.focusForeground#f5e6e2
  • breadcrumb.foreground#dd9c8d
  • button.background#da291c
  • button.foreground#fcfbfa
  • button.hoverBackground#de3e33
  • button.secondaryBackground#390b07
  • button.secondaryForeground#f5e6e2
  • descriptionForeground#dd9c8d
  • dropdown.background#2e0906
  • dropdown.border#4a0e0a
  • dropdown.foreground#f5e6e2
  • editor.background#230704
  • editor.findMatchBackground#5c068c66
  • editor.findMatchHighlightBackground#5c068c33
  • editor.foreground#f5e6e2
  • editor.inactiveSelectionBackground#da291c26
  • editor.lineHighlightBackground#da291c1a
  • editor.lineHighlightBorder#da291c00
  • editor.selectionBackground#da291c4d
  • editor.wordHighlightBackground#da291c33
  • editorBracketMatch.background#da291c40
  • editorBracketMatch.border#da291c99
  • editorCursor.foreground#da291c
  • editorError.foreground#dd4132
  • editorGroup.border#4a0e0a
  • editorGroupHeader.tabsBackground#2e0906
  • editorGroupHeader.tabsBorder#4a0e0a
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f5e6e233
  • editorIndentGuide.background#f5e6e214
  • editorInfo.foreground#00b5cc
  • editorLineNumber.activeForeground#f5e6e2
  • editorLineNumber.foreground#dd9c8d
  • editorRuler.foreground#f5e6e214
  • editorSuggestWidget.selectedBackground#da291c40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f5e6e21a
  • editorWidget.background#2e0906
  • editorWidget.border#4a0e0a
  • focusBorder#da291c99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#dd9c8d
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#dd9c8d
  • input.background#2e0906
  • input.border#4a0e0a
  • input.foreground#f5e6e2
  • input.placeholderForeground#dd9c8d
  • inputOption.activeBorder#da291c
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#00b5cc
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#da291c4d
  • list.activeSelectionForeground#f5e6e2
  • list.focusBackground#da291c33
  • list.highlightForeground#da291c
  • list.hoverBackground#da291c26
  • list.inactiveSelectionBackground#da291c26
  • minimap.background#230704
  • minimap.findMatchHighlight#5c068c99
  • minimap.selectionHighlight#da291c66
  • notificationLink.foreground#da291c
  • notifications.background#390b07
  • notifications.foreground#f5e6e2
  • panel.background#2e0906
  • panel.border#4a0e0a
  • panelTitle.activeBorder#da291c
  • panelTitle.activeForeground#f5e6e2
  • panelTitle.inactiveForeground#dd9c8d
  • peekView.border#da291c
  • peekViewEditor.background#2e0906
  • peekViewResult.background#390b07
  • peekViewTitle.background#2e0906
  • progressBar.background#da291c
  • scrollbar.shadow#16040345
  • scrollbarSlider.activeBackground#f5e6e259
  • scrollbarSlider.background#f5e6e21f
  • scrollbarSlider.hoverBackground#f5e6e240
  • selection.background#da291c4d
  • sideBar.background#390b07
  • sideBar.border#4a0e0a
  • sideBar.foreground#f5e6e2
  • sideBarSectionHeader.background#da291c26
  • sideBarSectionHeader.foreground#f5e6e2
  • sideBarTitle.foreground#f5e6e2
  • statusBar.background#831911
  • statusBar.border#4a0e0a
  • statusBar.debuggingBackground#00b5cc
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#e97f77
  • statusBar.noFolderBackground#2e0906
  • statusBarItem.hoverBackground#da291c4d
  • statusBarItem.remoteBackground#da291c
  • statusBarItem.remoteForeground#fcfbfa
  • tab.activeBackground#230704
  • tab.activeBorder#da291c
  • tab.activeBorderTop#da291c00
  • tab.activeForeground#f5e6e2
  • tab.border#4a0e0a
  • tab.inactiveBackground#2e0906
  • tab.inactiveForeground#dd9c8d
  • terminal.ansiBlack#230704
  • terminal.ansiBlue#753b4f
  • terminal.ansiBrightBlack#dd9c8d
  • 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#f5e6e2
  • terminal.ansiYellow#efc050
  • terminal.background#2e0906
  • terminal.foreground#f5e6e2
  • terminalCursor.foreground#da291c
  • textLink.activeForeground#26c0d4
  • textLink.foreground#00b5cc
  • titleBar.activeBackground#2e0906
  • titleBar.activeForeground#f5e6e2
  • titleBar.border#4a0e0a
  • titleBar.inactiveBackground#2e0906
  • titleBar.inactiveForeground#dd9c8d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#dd9c8ditalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#e04a3fbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#e04a3fbold
storage.type, storage.modifier#e04a3fbold
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#e04a3f
string.regexp#00b5cc
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#9c68b9
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#95738abold
variable.other.constant, variable.other.enummember#95738abold
constant.character.escape#e0493e
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#a96978italic
entity.name.type.parameter#a96978italic
entity.name.function, meta.function entity.name.function#76ff7bbold
meta.function-call entity.name.function, support.function#76ff7b
meta.method-call entity.name.function, entity.name.function.member#76ff7b
variable, variable.other, variable.other.readwrite#f5e6e2
variable.parameter#f5e6e2italic
variable.language, variable.language.this, variable.language.self, variable.language.super#e04a3fitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#f5e6e2
entity.name.class, entity.name.type.class, support.class#78be20bold italic
entity.other.inherited-class#78be20italic
entity.name.tag, punctuation.definition.tag#e04a3fbold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#e0493e
punctuation, punctuation.separator, punctuation.terminator, meta.brace#dd9c8d
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#a96978italic
support.type.property-name.css, support.type.vendored.property-name.css#a96978
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#78be20bold
support.constant.property-value.css, support.constant.color.css#95738a
keyword.other.unit.css#9c68b9
support.type.property-name.json#a96978
markup.heading, markup.heading entity.name, entity.name.section.markdown#e04a3fbold
markup.bold#95738abold
markup.italic#a96978italic
markup.inline.raw, markup.raw#00b5cc
markup.underline.link#76ff7b
markup.quote#dd9c8ditalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050