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#14101d
  • activityBar.border#20192f
  • activityBar.foreground#5f4b8b
  • activityBar.inactiveForeground#535167
  • activityBarBadge.background#97d700
  • activityBarBadge.foreground#f1f1f2
  • badge.background#5f4b8b
  • badge.foreground#f1f1f2
  • breadcrumb.activeSelectionForeground#cfced4
  • breadcrumb.focusForeground#cfced4
  • breadcrumb.foreground#535167
  • button.background#5f4b8b
  • button.foreground#f1f1f2
  • button.hoverBackground#6f5d97
  • button.secondaryBackground#191424
  • button.secondaryForeground#cfced4
  • descriptionForeground#535167
  • dropdown.background#14101d
  • dropdown.border#20192f
  • dropdown.foreground#cfced4
  • editor.background#0f0c16
  • editor.findMatchBackground#00b14066
  • editor.findMatchHighlightBackground#00b14033
  • editor.foreground#cfced4
  • editor.inactiveSelectionBackground#5f4b8b26
  • editor.lineHighlightBackground#5f4b8b1a
  • editor.lineHighlightBorder#5f4b8b00
  • editor.selectionBackground#5f4b8b4d
  • editor.wordHighlightBackground#5f4b8b33
  • editorBracketMatch.background#5f4b8b40
  • editorBracketMatch.border#5f4b8b99
  • editorCursor.foreground#5f4b8b
  • editorError.foreground#dd4132
  • editorGroup.border#20192f
  • editorGroupHeader.tabsBackground#14101d
  • editorGroupHeader.tabsBorder#20192f
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#cfced433
  • editorIndentGuide.background#cfced414
  • editorInfo.foreground#97d700
  • editorLineNumber.activeForeground#cfced4
  • editorLineNumber.foreground#535167
  • editorRuler.foreground#cfced414
  • editorSuggestWidget.selectedBackground#5f4b8b40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#cfced41a
  • editorWidget.background#14101d
  • editorWidget.border#20192f
  • focusBorder#5f4b8b99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#535167
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#535167
  • input.background#14101d
  • input.border#20192f
  • input.foreground#cfced4
  • input.placeholderForeground#535167
  • inputOption.activeBorder#5f4b8b
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#97d700
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#5f4b8b4d
  • list.activeSelectionForeground#cfced4
  • list.focusBackground#5f4b8b33
  • list.highlightForeground#5f4b8b
  • list.hoverBackground#5f4b8b26
  • list.inactiveSelectionBackground#5f4b8b26
  • minimap.background#0f0c16
  • minimap.findMatchHighlight#00b14099
  • minimap.selectionHighlight#5f4b8b66
  • notificationLink.foreground#5f4b8b
  • notifications.background#191424
  • notifications.foreground#cfced4
  • panel.background#14101d
  • panel.border#20192f
  • panelTitle.activeBorder#5f4b8b
  • panelTitle.activeForeground#cfced4
  • panelTitle.inactiveForeground#535167
  • peekView.border#5f4b8b
  • peekViewEditor.background#14101d
  • peekViewResult.background#191424
  • peekViewTitle.background#14101d
  • progressBar.background#5f4b8b
  • scrollbar.shadow#09070e45
  • scrollbarSlider.activeBackground#cfced459
  • scrollbarSlider.background#cfced41f
  • scrollbarSlider.hoverBackground#cfced440
  • selection.background#5f4b8b4d
  • sideBar.background#191424
  • sideBar.border#20192f
  • sideBar.foreground#cfced4
  • sideBarSectionHeader.background#5f4b8b26
  • sideBarSectionHeader.foreground#cfced4
  • sideBarTitle.foreground#cfced4
  • statusBar.background#392d53
  • statusBar.border#20192f
  • statusBar.debuggingBackground#97d700
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#9f93b9
  • statusBar.noFolderBackground#14101d
  • statusBarItem.hoverBackground#5f4b8b4d
  • statusBarItem.remoteBackground#5f4b8b
  • statusBarItem.remoteForeground#f1f1f2
  • tab.activeBackground#0f0c16
  • tab.activeBorder#5f4b8b
  • tab.activeBorderTop#5f4b8b00
  • tab.activeForeground#cfced4
  • tab.border#20192f
  • tab.inactiveBackground#14101d
  • tab.inactiveForeground#535167
  • terminal.ansiBlack#0f0c16
  • terminal.ansiBlue#374c86
  • terminal.ansiBrightBlack#535167
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f1f1f2
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#cfced4
  • terminal.ansiYellow#efc050
  • terminal.background#14101d
  • terminal.foreground#cfced4
  • terminalCursor.foreground#5f4b8b
  • textLink.activeForeground#a7dd26
  • textLink.foreground#97d700
  • titleBar.activeBackground#14101d
  • titleBar.activeForeground#cfced4
  • titleBar.border#20192f
  • titleBar.inactiveBackground#14101d
  • titleBar.inactiveForeground#535167

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#535167italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#8372a5bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#8372a5bold
storage.type, storage.modifier#8372a5bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#97d700
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#8372a5
string.regexp#97d700
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#00b140
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#577fc4bold
variable.other.constant, variable.other.enummember#577fc4bold
constant.character.escape#8272a4
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#7d7eb8italic
entity.name.type.parameter#7d7eb8italic
entity.name.function, meta.function entity.name.function#f7cac9bold
meta.function-call entity.name.function, support.function#f7cac9
meta.method-call entity.name.function, entity.name.function.member#f7cac9
variable, variable.other, variable.other.readwrite#cfced4
variable.parameter#cfced4italic
variable.language, variable.language.this, variable.language.self, variable.language.super#8372a5italic
variable.other.property, variable.other.object.property, meta.object-literal.key#cfced4
entity.name.class, entity.name.type.class, support.class#53b0aebold italic
entity.other.inherited-class#53b0aeitalic
entity.name.tag, punctuation.definition.tag#8372a5bold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#8272a4
punctuation, punctuation.separator, punctuation.terminator, meta.brace#535167
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#7d7eb8italic
support.type.property-name.css, support.type.vendored.property-name.css#7d7eb8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#53b0aebold
support.constant.property-value.css, support.constant.color.css#577fc4
keyword.other.unit.css#00b140
support.type.property-name.json#7d7eb8
markup.heading, markup.heading entity.name, entity.name.section.markdown#8372a5bold
markup.bold#577fc4bold
markup.italic#7d7eb8italic
markup.inline.raw, markup.raw#97d700
markup.underline.link#f7cac9
markup.quote#535167italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050