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#1f1111
  • activityBar.border#331c1c
  • activityBar.foreground#955251
  • activityBar.inactiveForeground#854f5c
  • activityBarBadge.background#53b0ae
  • activityBarBadge.foreground#f5f1f2
  • badge.background#955251
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#ddcdd2
  • breadcrumb.focusForeground#ddcdd2
  • breadcrumb.foreground#854f5c
  • button.background#955251
  • button.foreground#f5f1f2
  • button.hoverBackground#a06362
  • button.secondaryBackground#271515
  • button.secondaryForeground#ddcdd2
  • descriptionForeground#854f5c
  • dropdown.background#1f1111
  • dropdown.border#331c1c
  • dropdown.foreground#ddcdd2
  • editor.background#180d0d
  • editor.findMatchBackground#88b04b66
  • editor.findMatchHighlightBackground#88b04b33
  • editor.foreground#ddcdd2
  • editor.inactiveSelectionBackground#95525126
  • editor.lineHighlightBackground#9552511a
  • editor.lineHighlightBorder#95525100
  • editor.selectionBackground#9552514d
  • editor.wordHighlightBackground#95525133
  • editorBracketMatch.background#95525140
  • editorBracketMatch.border#95525199
  • editorCursor.foreground#955251
  • editorError.foreground#dd4132
  • editorGroup.border#331c1c
  • editorGroupHeader.tabsBackground#1f1111
  • editorGroupHeader.tabsBorder#331c1c
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#ddcdd233
  • editorIndentGuide.background#ddcdd214
  • editorInfo.foreground#53b0ae
  • editorLineNumber.activeForeground#ddcdd2
  • editorLineNumber.foreground#854f5c
  • editorRuler.foreground#ddcdd214
  • editorSuggestWidget.selectedBackground#95525140
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#ddcdd21a
  • editorWidget.background#1f1111
  • editorWidget.border#331c1c
  • focusBorder#95525199
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#854f5c
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#854f5c
  • input.background#1f1111
  • input.border#331c1c
  • input.foreground#ddcdd2
  • input.placeholderForeground#854f5c
  • inputOption.activeBorder#955251
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#53b0ae
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#9552514d
  • list.activeSelectionForeground#ddcdd2
  • list.focusBackground#95525133
  • list.highlightForeground#955251
  • list.hoverBackground#95525126
  • list.inactiveSelectionBackground#95525126
  • minimap.background#180d0d
  • minimap.findMatchHighlight#88b04b99
  • minimap.selectionHighlight#95525166
  • notificationLink.foreground#955251
  • notifications.background#271515
  • notifications.foreground#ddcdd2
  • panel.background#1f1111
  • panel.border#331c1c
  • panelTitle.activeBorder#955251
  • panelTitle.activeForeground#ddcdd2
  • panelTitle.inactiveForeground#854f5c
  • peekView.border#955251
  • peekViewEditor.background#1f1111
  • peekViewResult.background#271515
  • peekViewTitle.background#1f1111
  • progressBar.background#955251
  • scrollbar.shadow#0f080845
  • scrollbarSlider.activeBackground#ddcdd259
  • scrollbarSlider.background#ddcdd21f
  • scrollbarSlider.hoverBackground#ddcdd240
  • selection.background#9552514d
  • sideBar.background#271515
  • sideBar.border#331c1c
  • sideBar.foreground#ddcdd2
  • sideBarSectionHeader.background#95525126
  • sideBarSectionHeader.foreground#ddcdd2
  • sideBarTitle.foreground#ddcdd2
  • statusBar.background#593131
  • statusBar.border#331c1c
  • statusBar.debuggingBackground#53b0ae
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#bf9797
  • statusBar.noFolderBackground#1f1111
  • statusBarItem.hoverBackground#9552514d
  • statusBarItem.remoteBackground#955251
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#180d0d
  • tab.activeBorder#955251
  • tab.activeBorderTop#95525100
  • tab.activeForeground#ddcdd2
  • tab.border#331c1c
  • tab.inactiveBackground#1f1111
  • tab.inactiveForeground#854f5c
  • terminal.ansiBlack#180d0d
  • terminal.ansiBlue#524f69
  • terminal.ansiBrightBlack#854f5c
  • 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#ddcdd2
  • terminal.ansiYellow#efc050
  • terminal.background#1f1111
  • terminal.foreground#ddcdd2
  • terminalCursor.foreground#955251
  • textLink.activeForeground#6dbcba
  • textLink.foreground#53b0ae
  • titleBar.activeBackground#1f1111
  • titleBar.activeForeground#ddcdd2
  • titleBar.border#331c1c
  • titleBar.inactiveBackground#1f1111
  • titleBar.inactiveForeground#854f5c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#854f5citalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#a56d6cbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#a56d6cbold
storage.type, storage.modifier#a56d6cbold
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#a56d6c
string.regexp#53b0ae
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#88b04b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#efc050bold
variable.other.constant, variable.other.enummember#efc050bold
constant.character.escape#ac7877
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#d94f70italic
entity.name.type.parameter#d94f70italic
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#ddcdd2
variable.parameter#ddcdd2italic
variable.language, variable.language.this, variable.language.self, variable.language.super#a56d6citalic
variable.other.property, variable.other.object.property, meta.object-literal.key#ddcdd2
entity.name.class, entity.name.type.class, support.class#9c68b9bold italic
entity.other.inherited-class#9c68b9italic
entity.name.tag, punctuation.definition.tag#a56d6cbold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ac7877
punctuation, punctuation.separator, punctuation.terminator, meta.brace#854f5c
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#d94f70italic
support.type.property-name.css, support.type.vendored.property-name.css#d94f70
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9c68b9bold
support.constant.property-value.css, support.constant.color.css#efc050
keyword.other.unit.css#88b04b
support.type.property-name.json#d94f70
markup.heading, markup.heading entity.name, entity.name.section.markdown#a56d6cbold
markup.bold#efc050bold
markup.italic#d94f70italic
markup.inline.raw, markup.raw#53b0ae
markup.underline.link#e8d4e2
markup.quote#854f5citalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050