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#1d0b13
  • activityBar.border#30111e
  • activityBar.foreground#8c3359
  • activityBar.inactiveForeground#82455f
  • activityBarBadge.background#86d0bf
  • activityBarBadge.foreground#f5f1f2
  • badge.background#8c3359
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#dccbd2
  • breadcrumb.focusForeground#dccbd2
  • breadcrumb.foreground#82455f
  • button.background#8c3359
  • button.foreground#f5f1f2
  • button.hoverBackground#98476a
  • button.secondaryBackground#240d17
  • button.secondaryForeground#dccbd2
  • descriptionForeground#82455f
  • dropdown.background#1d0b13
  • dropdown.border#30111e
  • dropdown.foreground#dccbd2
  • editor.background#16080e
  • editor.findMatchBackground#6667ab66
  • editor.findMatchHighlightBackground#6667ab33
  • editor.foreground#dccbd2
  • editor.inactiveSelectionBackground#8c335926
  • editor.lineHighlightBackground#8c33591a
  • editor.lineHighlightBorder#8c335900
  • editor.selectionBackground#8c33594d
  • editor.wordHighlightBackground#8c335933
  • editorBracketMatch.background#8c335940
  • editorBracketMatch.border#8c335999
  • editorCursor.foreground#8c3359
  • editorError.foreground#dd4132
  • editorGroup.border#30111e
  • editorGroupHeader.tabsBackground#1d0b13
  • editorGroupHeader.tabsBorder#30111e
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#dccbd233
  • editorIndentGuide.background#dccbd214
  • editorInfo.foreground#86d0bf
  • editorLineNumber.activeForeground#dccbd2
  • editorLineNumber.foreground#82455f
  • editorRuler.foreground#dccbd214
  • editorSuggestWidget.selectedBackground#8c335940
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#dccbd21a
  • editorWidget.background#1d0b13
  • editorWidget.border#30111e
  • focusBorder#8c335999
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#82455f
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#82455f
  • input.background#1d0b13
  • input.border#30111e
  • input.foreground#dccbd2
  • input.placeholderForeground#82455f
  • inputOption.activeBorder#8c3359
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#86d0bf
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#8c33594d
  • list.activeSelectionForeground#dccbd2
  • list.focusBackground#8c335933
  • list.highlightForeground#8c3359
  • list.hoverBackground#8c335926
  • list.inactiveSelectionBackground#8c335926
  • minimap.background#16080e
  • minimap.findMatchHighlight#6667ab99
  • minimap.selectionHighlight#8c335966
  • notificationLink.foreground#8c3359
  • notifications.background#240d17
  • notifications.foreground#dccbd2
  • panel.background#1d0b13
  • panel.border#30111e
  • panelTitle.activeBorder#8c3359
  • panelTitle.activeForeground#dccbd2
  • panelTitle.inactiveForeground#82455f
  • peekView.border#8c3359
  • peekViewEditor.background#1d0b13
  • peekViewResult.background#240d17
  • peekViewTitle.background#1d0b13
  • progressBar.background#8c3359
  • scrollbar.shadow#0e050945
  • scrollbarSlider.activeBackground#dccbd259
  • scrollbarSlider.background#dccbd21f
  • scrollbarSlider.hoverBackground#dccbd240
  • selection.background#8c33594d
  • sideBar.background#240d17
  • sideBar.border#30111e
  • sideBar.foreground#dccbd2
  • sideBarSectionHeader.background#8c335926
  • sideBarSectionHeader.foreground#dccbd2
  • sideBarTitle.foreground#dccbd2
  • statusBar.background#541f35
  • statusBar.border#30111e
  • statusBar.debuggingBackground#86d0bf
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#ba859b
  • statusBar.noFolderBackground#1d0b13
  • statusBarItem.hoverBackground#8c33594d
  • statusBarItem.remoteBackground#8c3359
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#16080e
  • tab.activeBorder#8c3359
  • tab.activeBorderTop#8c335900
  • tab.activeForeground#dccbd2
  • tab.border#30111e
  • tab.inactiveBackground#1d0b13
  • tab.inactiveForeground#82455f
  • terminal.ansiBlack#16080e
  • terminal.ansiBlue#4e406d
  • terminal.ansiBrightBlack#82455f
  • 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#dccbd2
  • terminal.ansiYellow#efc050
  • terminal.background#1d0b13
  • terminal.foreground#dccbd2
  • terminalCursor.foreground#8c3359
  • textLink.activeForeground#98d7c9
  • textLink.foreground#86d0bf
  • titleBar.activeBackground#1d0b13
  • titleBar.activeForeground#dccbd2
  • titleBar.border#30111e
  • titleBar.inactiveBackground#1d0b13
  • titleBar.inactiveForeground#82455f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#82455fitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#ac6d87bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#ac6d87bold
storage.type, storage.modifier#ac6d87bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#86d0bf
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#ac6d87
string.regexp#86d0bf
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#7d7eb8
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#ff7b43bold
variable.other.constant, variable.other.enummember#ff7b43bold
constant.character.escape#ac6d87
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#c06878italic
entity.name.type.parameter#c06878italic
entity.name.function, meta.function entity.name.function#b0d7e1bold
meta.function-call entity.name.function, support.function#b0d7e1
meta.method-call entity.name.function, entity.name.function.member#b0d7e1
variable, variable.other, variable.other.readwrite#dccbd2
variable.parameter#dccbd2italic
variable.language, variable.language.this, variable.language.self, variable.language.super#ac6d87italic
variable.other.property, variable.other.object.property, meta.object-literal.key#dccbd2
entity.name.class, entity.name.type.class, support.class#e8e835bold italic
entity.other.inherited-class#e8e835italic
entity.name.tag, punctuation.definition.tag#ac6d87bold
entity.other.attribute-name#b0d7e1italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ac6d87
punctuation, punctuation.separator, punctuation.terminator, meta.brace#82455f
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#c06878italic
support.type.property-name.css, support.type.vendored.property-name.css#c06878
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#e8e835bold
support.constant.property-value.css, support.constant.color.css#ff7b43
keyword.other.unit.css#7d7eb8
support.type.property-name.json#c06878
markup.heading, markup.heading entity.name, entity.name.section.markdown#ac6d87bold
markup.bold#ff7b43bold
markup.italic#c06878italic
markup.inline.raw, markup.raw#86d0bf
markup.underline.link#b0d7e1
markup.quote#82455fitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050