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#170d0d
  • activityBar.border#211212
  • activityBar.foreground#4c2a2b
  • activityBar.inactiveForeground#6f4351
  • activityBarBadge.background#53b0ae
  • activityBarBadge.foreground#f5f1f2
  • badge.background#4c2a2b
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#d8cbcf
  • breadcrumb.focusForeground#d8cbcf
  • breadcrumb.foreground#6f4351
  • button.background#4c2a2b
  • button.foreground#f5f1f2
  • button.hoverBackground#5e3f40
  • button.secondaryBackground#1b0f0f
  • button.secondaryForeground#d8cbcf
  • descriptionForeground#6f4351
  • dropdown.background#170d0d
  • dropdown.border#211212
  • dropdown.foreground#d8cbcf
  • editor.background#130b0b
  • editor.findMatchBackground#9063cd66
  • editor.findMatchHighlightBackground#9063cd33
  • editor.foreground#d8cbcf
  • editor.inactiveSelectionBackground#4c2a2b26
  • editor.lineHighlightBackground#4c2a2b1a
  • editor.lineHighlightBorder#4c2a2b00
  • editor.selectionBackground#4c2a2b4d
  • editor.wordHighlightBackground#4c2a2b33
  • editorBracketMatch.background#4c2a2b40
  • editorBracketMatch.border#4c2a2b99
  • editorCursor.foreground#4c2a2b
  • editorError.foreground#dd4132
  • editorGroup.border#211212
  • editorGroupHeader.tabsBackground#170d0d
  • editorGroupHeader.tabsBorder#211212
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#d8cbcf33
  • editorIndentGuide.background#d8cbcf14
  • editorInfo.foreground#53b0ae
  • editorLineNumber.activeForeground#d8cbcf
  • editorLineNumber.foreground#6f4351
  • editorRuler.foreground#d8cbcf14
  • editorSuggestWidget.selectedBackground#4c2a2b40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#d8cbcf1a
  • editorWidget.background#170d0d
  • editorWidget.border#211212
  • focusBorder#4c2a2b99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#6f4351
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#6f4351
  • input.background#170d0d
  • input.border#211212
  • input.foreground#d8cbcf
  • input.placeholderForeground#6f4351
  • inputOption.activeBorder#4c2a2b
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#53b0ae
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#4c2a2b4d
  • list.activeSelectionForeground#d8cbcf
  • list.focusBackground#4c2a2b33
  • list.highlightForeground#4c2a2b
  • list.hoverBackground#4c2a2b26
  • list.inactiveSelectionBackground#4c2a2b26
  • minimap.background#130b0b
  • minimap.findMatchHighlight#9063cd99
  • minimap.selectionHighlight#4c2a2b66
  • notificationLink.foreground#4c2a2b
  • notifications.background#1b0f0f
  • notifications.foreground#d8cbcf
  • panel.background#170d0d
  • panel.border#211212
  • panelTitle.activeBorder#4c2a2b
  • panelTitle.activeForeground#d8cbcf
  • panelTitle.inactiveForeground#6f4351
  • peekView.border#4c2a2b
  • peekViewEditor.background#170d0d
  • peekViewResult.background#1b0f0f
  • peekViewTitle.background#170d0d
  • progressBar.background#4c2a2b
  • scrollbar.shadow#08040445
  • scrollbarSlider.activeBackground#d8cbcf59
  • scrollbarSlider.background#d8cbcf1f
  • scrollbarSlider.hoverBackground#d8cbcf40
  • selection.background#4c2a2b4d
  • sideBar.background#1b0f0f
  • sideBar.border#211212
  • sideBar.foreground#d8cbcf
  • sideBarSectionHeader.background#4c2a2b26
  • sideBarSectionHeader.foreground#d8cbcf
  • sideBarTitle.foreground#d8cbcf
  • statusBar.background#2e191a
  • statusBar.border#211212
  • statusBar.debuggingBackground#53b0ae
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#947f80
  • statusBar.noFolderBackground#170d0d
  • statusBarItem.hoverBackground#4c2a2b4d
  • statusBarItem.remoteBackground#4c2a2b
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#130b0b
  • tab.activeBorder#4c2a2b
  • tab.activeBorderTop#4c2a2b00
  • tab.activeForeground#d8cbcf
  • tab.border#211212
  • tab.inactiveBackground#170d0d
  • tab.inactiveForeground#6f4351
  • terminal.ansiBlack#130b0b
  • terminal.ansiBlue#2e3b56
  • terminal.ansiBrightBlack#6f4351
  • 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#d8cbcf
  • terminal.ansiYellow#efc050
  • terminal.background#170d0d
  • terminal.foreground#d8cbcf
  • terminalCursor.foreground#4c2a2b
  • textLink.activeForeground#6dbcba
  • textLink.foreground#53b0ae
  • titleBar.activeBackground#170d0d
  • titleBar.activeForeground#d8cbcf
  • titleBar.border#211212
  • titleBar.inactiveBackground#170d0d
  • titleBar.inactiveForeground#6f4351

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#6f4351italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#927d7ebold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#927d7ebold
storage.type, storage.modifier#927d7ebold
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#927d7e
string.regexp#53b0ae
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#996fd1
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#e8d4e2bold
variable.other.constant, variable.other.enummember#e8d4e2bold
constant.character.escape#927c7d
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#f5b5c8italic
entity.name.type.parameter#f5b5c8italic
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#d8cbcf
variable.parameter#d8cbcfitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#927d7eitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#d8cbcf
entity.name.class, entity.name.type.class, support.class#88b04bbold italic
entity.other.inherited-class#88b04bitalic
entity.name.tag, punctuation.definition.tag#927d7ebold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#927c7d
punctuation, punctuation.separator, punctuation.terminator, meta.brace#6f4351
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#f5b5c8italic
support.type.property-name.css, support.type.vendored.property-name.css#f5b5c8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#88b04bbold
support.constant.property-value.css, support.constant.color.css#e8d4e2
keyword.other.unit.css#996fd1
support.type.property-name.json#f5b5c8
markup.heading, markup.heading entity.name, entity.name.section.markdown#927d7ebold
markup.bold#e8d4e2bold
markup.italic#f5b5c8italic
markup.inline.raw, markup.raw#53b0ae
markup.underline.link#76ff7b
markup.quote#6f4351italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050