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#1a0c0a
  • activityBar.border#291410
  • activityBar.foreground#7a3b2e
  • activityBar.inactiveForeground#c0a193
  • activityBarBadge.background#00b4e1
  • activityBarBadge.foreground#fcfbfa
  • badge.background#7a3b2e
  • badge.foreground#fcfbfa
  • breadcrumb.activeSelectionForeground#efe7e3
  • breadcrumb.focusForeground#efe7e3
  • breadcrumb.foreground#c0a193
  • button.background#7a3b2e
  • button.foreground#fcfbfa
  • button.hoverBackground#874f43
  • button.secondaryBackground#200f0c
  • button.secondaryForeground#efe7e3
  • descriptionForeground#c0a193
  • dropdown.background#1a0c0a
  • dropdown.border#291410
  • dropdown.foreground#efe7e3
  • editor.background#140907
  • editor.findMatchBackground#6667ab66
  • editor.findMatchHighlightBackground#6667ab33
  • editor.foreground#efe7e3
  • editor.inactiveSelectionBackground#7a3b2e26
  • editor.lineHighlightBackground#7a3b2e1a
  • editor.lineHighlightBorder#7a3b2e00
  • editor.selectionBackground#7a3b2e4d
  • editor.wordHighlightBackground#7a3b2e33
  • editorBracketMatch.background#7a3b2e40
  • editorBracketMatch.border#7a3b2e99
  • editorCursor.foreground#7a3b2e
  • editorError.foreground#dd4132
  • editorGroup.border#291410
  • editorGroupHeader.tabsBackground#1a0c0a
  • editorGroupHeader.tabsBorder#291410
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#efe7e333
  • editorIndentGuide.background#efe7e314
  • editorInfo.foreground#00b4e1
  • editorLineNumber.activeForeground#efe7e3
  • editorLineNumber.foreground#c0a193
  • editorRuler.foreground#efe7e314
  • editorSuggestWidget.selectedBackground#7a3b2e40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#efe7e31a
  • editorWidget.background#1a0c0a
  • editorWidget.border#291410
  • focusBorder#7a3b2e99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#c0a193
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#c0a193
  • input.background#1a0c0a
  • input.border#291410
  • input.foreground#efe7e3
  • input.placeholderForeground#c0a193
  • inputOption.activeBorder#7a3b2e
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#00b4e1
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#7a3b2e4d
  • list.activeSelectionForeground#efe7e3
  • list.focusBackground#7a3b2e33
  • list.highlightForeground#7a3b2e
  • list.hoverBackground#7a3b2e26
  • list.inactiveSelectionBackground#7a3b2e26
  • minimap.background#140907
  • minimap.findMatchHighlight#6667ab99
  • minimap.selectionHighlight#7a3b2e66
  • notificationLink.foreground#7a3b2e
  • notifications.background#200f0c
  • notifications.foreground#efe7e3
  • panel.background#1a0c0a
  • panel.border#291410
  • panelTitle.activeBorder#7a3b2e
  • panelTitle.activeForeground#efe7e3
  • panelTitle.inactiveForeground#c0a193
  • peekView.border#7a3b2e
  • peekViewEditor.background#1a0c0a
  • peekViewResult.background#200f0c
  • peekViewTitle.background#1a0c0a
  • progressBar.background#7a3b2e
  • scrollbar.shadow#0c060545
  • scrollbarSlider.activeBackground#efe7e359
  • scrollbarSlider.background#efe7e31f
  • scrollbarSlider.hoverBackground#efe7e340
  • selection.background#7a3b2e4d
  • sideBar.background#200f0c
  • sideBar.border#291410
  • sideBar.foreground#efe7e3
  • sideBarSectionHeader.background#7a3b2e26
  • sideBarSectionHeader.foreground#efe7e3
  • sideBarTitle.foreground#efe7e3
  • statusBar.background#49231c
  • statusBar.border#291410
  • statusBar.debuggingBackground#00b4e1
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#af8982
  • statusBar.noFolderBackground#1a0c0a
  • statusBarItem.hoverBackground#7a3b2e4d
  • statusBarItem.remoteBackground#7a3b2e
  • statusBarItem.remoteForeground#fcfbfa
  • tab.activeBackground#140907
  • tab.activeBorder#7a3b2e
  • tab.activeBorderTop#7a3b2e00
  • tab.activeForeground#efe7e3
  • tab.border#291410
  • tab.inactiveBackground#1a0c0a
  • tab.inactiveForeground#c0a193
  • terminal.ansiBlack#140907
  • terminal.ansiBlue#454458
  • terminal.ansiBrightBlack#c0a193
  • 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#efe7e3
  • terminal.ansiYellow#efc050
  • terminal.background#1a0c0a
  • terminal.foreground#efe7e3
  • terminalCursor.foreground#7a3b2e
  • textLink.activeForeground#26bfe6
  • textLink.foreground#00b4e1
  • titleBar.activeBackground#1a0c0a
  • titleBar.activeForeground#efe7e3
  • titleBar.border#291410
  • titleBar.inactiveBackground#1a0c0a
  • titleBar.inactiveForeground#c0a193

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#c0a193italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#a07269bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#a07269bold
storage.type, storage.modifier#a07269bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#00b4e1
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#a07269
string.regexp#00b4e1
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#7d7eb8
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#ff3ca0bold
variable.other.constant, variable.other.enummember#ff3ca0bold
constant.character.escape#9f7168
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#a96c71italic
entity.name.type.parameter#a96c71italic
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#efe7e3
variable.parameter#efe7e3italic
variable.language, variable.language.this, variable.language.self, variable.language.super#a07269italic
variable.other.property, variable.other.object.property, meta.object-literal.key#efe7e3
entity.name.class, entity.name.type.class, support.class#9c68b9bold italic
entity.other.inherited-class#9c68b9italic
entity.name.tag, punctuation.definition.tag#a07269bold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#9f7168
punctuation, punctuation.separator, punctuation.terminator, meta.brace#c0a193
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#a96c71italic
support.type.property-name.css, support.type.vendored.property-name.css#a96c71
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9c68b9bold
support.constant.property-value.css, support.constant.color.css#ff3ca0
keyword.other.unit.css#7d7eb8
support.type.property-name.json#a96c71
markup.heading, markup.heading entity.name, entity.name.section.markdown#a07269bold
markup.bold#ff3ca0bold
markup.italic#a96c71italic
markup.inline.raw, markup.raw#00b4e1
markup.underline.link#76ff7b
markup.quote#c0a193italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050