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#151624
  • activityBar.border#23233a
  • activityBar.foreground#6667ab
  • activityBar.inactiveForeground#555971
  • activityBarBadge.background#e8e835
  • activityBarBadge.foreground#f1f1f2
  • badge.background#6667ab
  • badge.foreground#f1f1f2
  • breadcrumb.activeSelectionForeground#cfd0d6
  • breadcrumb.focusForeground#cfd0d6
  • breadcrumb.foreground#555971
  • button.background#6667ab
  • button.foreground#f1f1f2
  • button.hoverBackground#7576b3
  • button.secondaryBackground#1b1b2c
  • button.secondaryForeground#cfd0d6
  • descriptionForeground#555971
  • dropdown.background#151624
  • dropdown.border#23233a
  • dropdown.foreground#cfd0d6
  • editor.background#10101b
  • editor.findMatchBackground#00b14066
  • editor.findMatchHighlightBackground#00b14033
  • editor.foreground#cfd0d6
  • editor.inactiveSelectionBackground#6667ab26
  • editor.lineHighlightBackground#6667ab1a
  • editor.lineHighlightBorder#6667ab00
  • editor.selectionBackground#6667ab4d
  • editor.wordHighlightBackground#6667ab33
  • editorBracketMatch.background#6667ab40
  • editorBracketMatch.border#6667ab99
  • editorCursor.foreground#6667ab
  • editorError.foreground#dd4132
  • editorGroup.border#23233a
  • editorGroupHeader.tabsBackground#151624
  • editorGroupHeader.tabsBorder#23233a
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#cfd0d633
  • editorIndentGuide.background#cfd0d614
  • editorInfo.foreground#e8e835
  • editorLineNumber.activeForeground#cfd0d6
  • editorLineNumber.foreground#555971
  • editorRuler.foreground#cfd0d614
  • editorSuggestWidget.selectedBackground#6667ab40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#cfd0d61a
  • editorWidget.background#151624
  • editorWidget.border#23233a
  • focusBorder#6667ab99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#555971
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#555971
  • input.background#151624
  • input.border#23233a
  • input.foreground#cfd0d6
  • input.placeholderForeground#555971
  • inputOption.activeBorder#6667ab
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#e8e835
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#6667ab4d
  • list.activeSelectionForeground#cfd0d6
  • list.focusBackground#6667ab33
  • list.highlightForeground#6667ab
  • list.hoverBackground#6667ab26
  • list.inactiveSelectionBackground#6667ab26
  • minimap.background#10101b
  • minimap.findMatchHighlight#00b14099
  • minimap.selectionHighlight#6667ab66
  • notificationLink.foreground#6667ab
  • notifications.background#1b1b2c
  • notifications.foreground#cfd0d6
  • panel.background#151624
  • panel.border#23233a
  • panelTitle.activeBorder#6667ab
  • panelTitle.activeForeground#cfd0d6
  • panelTitle.inactiveForeground#555971
  • peekView.border#6667ab
  • peekViewEditor.background#151624
  • peekViewResult.background#1b1b2c
  • peekViewTitle.background#151624
  • progressBar.background#6667ab
  • scrollbar.shadow#0a0a1145
  • scrollbarSlider.activeBackground#cfd0d659
  • scrollbarSlider.background#cfd0d61f
  • scrollbarSlider.hoverBackground#cfd0d640
  • selection.background#6667ab4d
  • sideBar.background#1b1b2c
  • sideBar.border#23233a
  • sideBar.foreground#cfd0d6
  • sideBarSectionHeader.background#6667ab26
  • sideBarSectionHeader.foreground#cfd0d6
  • sideBarTitle.foreground#cfd0d6
  • statusBar.background#3d3e67
  • statusBar.border#23233a
  • statusBar.debuggingBackground#e8e835
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#a3a4cd
  • statusBar.noFolderBackground#151624
  • statusBarItem.hoverBackground#6667ab4d
  • statusBarItem.remoteBackground#6667ab
  • statusBarItem.remoteForeground#f1f1f2
  • tab.activeBackground#10101b
  • tab.activeBorder#6667ab
  • tab.activeBorderTop#6667ab00
  • tab.activeForeground#cfd0d6
  • tab.border#23233a
  • tab.inactiveBackground#151624
  • tab.inactiveForeground#555971
  • terminal.ansiBlack#10101b
  • terminal.ansiBlue#3b5a96
  • terminal.ansiBrightBlack#555971
  • 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#cfd0d6
  • terminal.ansiYellow#efc050
  • terminal.background#151624
  • terminal.foreground#cfd0d6
  • terminalCursor.foreground#6667ab
  • textLink.activeForeground#ebeb53
  • textLink.foreground#e8e835
  • titleBar.activeBackground#151624
  • titleBar.activeForeground#cfd0d6
  • titleBar.border#23233a
  • titleBar.inactiveBackground#151624
  • titleBar.inactiveForeground#555971

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#555971italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#7d7eb8bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#7d7eb8bold
storage.type, storage.modifier#7d7eb8bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#e8e835
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#7d7eb8
string.regexp#e8e835
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#00b140
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7bc4e2bold
variable.other.constant, variable.other.enummember#7bc4e2bold
constant.character.escape#7d7eb8
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#8d7dacitalic
entity.name.type.parameter#8d7dacitalic
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#cfd0d6
variable.parameter#cfd0d6italic
variable.language, variable.language.this, variable.language.self, variable.language.super#7d7eb8italic
variable.other.property, variable.other.object.property, meta.object-literal.key#cfd0d6
entity.name.class, entity.name.type.class, support.class#ff3ca0bold italic
entity.other.inherited-class#ff3ca0italic
entity.name.tag, punctuation.definition.tag#7d7eb8bold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#7d7eb8
punctuation, punctuation.separator, punctuation.terminator, meta.brace#555971
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#8d7dacitalic
support.type.property-name.css, support.type.vendored.property-name.css#8d7dac
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff3ca0bold
support.constant.property-value.css, support.constant.color.css#7bc4e2
keyword.other.unit.css#00b140
support.type.property-name.json#8d7dac
markup.heading, markup.heading entity.name, entity.name.section.markdown#7d7eb8bold
markup.bold#7bc4e2bold
markup.italic#8d7dacitalic
markup.inline.raw, markup.raw#e8e835
markup.underline.link#f7cac9
markup.quote#555971italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050