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.activeBorder#8A95E5
  • activityBar.background#141518
  • activityBar.border#2A2733
  • activityBar.foreground#E8E8F0
  • activityBar.inactiveForeground#605870
  • activityBarBadge.background#8A95E5
  • activityBarBadge.foreground#FFFFFF
  • badge.background#8A95E5
  • badge.foreground#FFFFFF
  • button.background#2C2936
  • button.foreground#E8E8F0
  • button.hoverBackground#302840
  • button.secondaryBackground#2D2A35
  • button.secondaryForeground#E8E8F0
  • checkbox.background#1B1C1F
  • checkbox.border#2A2733
  • checkbox.foreground#E8E8F0
  • diffEditor.diagonalFill#2A2733
  • diffEditor.insertedLineBackground#3A707099
  • diffEditor.insertedTextBackground#3A707099
  • diffEditor.removedLineBackground#48425899
  • diffEditor.removedTextBackground#48425899
  • disabledForeground#605870
  • dropdown.background#25232A
  • dropdown.border#2A2733
  • dropdown.foreground#E8E8F0
  • dropdown.listBackground#25232A
  • editor.background#1B1C1F
  • editor.findMatchBackground#A0B0F0
  • editor.findMatchForeground#101218
  • editor.findMatchHighlightBackground#302840
  • editor.foldBackground#1F1C25
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#403850
  • editor.lineHighlightBackground#222028
  • editor.rangeHighlightBackground#302840
  • editor.selectionBackground#404880
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#3A3545
  • editor.wordHighlightStrongBackground#3A3545
  • editorBracketHighlight.foreground1#8A95E5
  • editorBracketHighlight.foreground2#5058A0
  • editorBracketHighlight.foreground3#3B69CBFF
  • editorBracketHighlight.foreground4#7583E4
  • editorBracketHighlight.foreground5#8A95E5
  • editorBracketHighlight.foreground6#3AD7DBFF
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#302840
  • editorBracketMatch.border#8A95E5
  • editorCursor.foreground#8A95E5
  • editorGroupHeader.noTabsBackground#14121A
  • editorGroupHeader.tabsBackground#14121A
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#8A95E5
  • editorIndentGuide.activeBackground1#8A95E5
  • editorIndentGuide.background1#2A2733
  • editorLineNumber.activeForeground#8A95E5
  • editorLineNumber.foreground#787088
  • editorRuler.foreground#2A2733
  • editorWhitespace.foreground#2A2733
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#404880
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#302840
  • focusBorder#8A95E544
  • foreground#E8E8F0
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#8A95E5
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#605870
  • gitDecoration.modifiedResourceForeground#8A95E5
  • gitDecoration.submoduleResourceForeground#3AD7DBFF
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#A8A0B8
  • input.background#1B1C1F
  • input.border#2A2733
  • input.foreground#E8E8F0
  • input.placeholderForeground#605870
  • inputOption.activeBackground#404880
  • inputOption.activeBorder#8A95E5
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#404880
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#404880
  • list.focusForeground#FFFFFF
  • list.highlightForeground#8A95E5
  • list.hoverBackground#302840
  • list.inactiveFocusBackground#403850
  • list.inactiveSelectionBackground#403850
  • menu.background#25232A
  • menu.border#2A273333
  • menu.foreground#E8E8F0
  • menu.selectionBackground#404880
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2A2733
  • menubar.selectionBackground#302840
  • menubar.selectionForeground#E8E8F0
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#8A95E588
  • minimapSlider.background#2D2A3533
  • minimapSlider.hoverBackground#30284055
  • notificationCenterHeader.background#14121A
  • notifications.background#16141E
  • notifications.border#2A2733
  • notifications.foreground#E8E8F0
  • panel.background#16171A
  • panel.border#2A2733
  • panelTitle.activeBorder#8A95E5
  • panelTitle.activeForeground#E8E8F0
  • panelTitle.inactiveForeground#605870
  • peekView.border#8A95E5
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#302840
  • peekViewResult.background#16141E
  • peekViewResult.matchHighlightBackground#302840
  • peekViewResult.selectionBackground#404880
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#14121A
  • peekViewTitleDescription.foreground#605870
  • peekViewTitleLabel.foreground#E8E8F0
  • pickerGroup.border#2A2733
  • pickerGroup.foreground#8A95E5
  • progressBar.background#8A95E5
  • quickInput.background#25232A
  • quickInput.foreground#E8E8F0
  • scrollbar.shadow#2A2733
  • scrollbarSlider.activeBackground#8A95E5
  • scrollbarSlider.background#2D2A35
  • scrollbarSlider.hoverBackground#302840
  • selection.background#404880
  • sideBar.background#16171A
  • sideBar.border#2A2733
  • sideBar.foreground#E8E8F0
  • sideBarSectionHeader.background#14121A
  • sideBarSectionHeader.border#2A2733
  • sideBarSectionHeader.foreground#E8E8F0
  • sideBarTitle.foreground#E8E8F0
  • statusBar.background#14121A
  • statusBar.border#2A2733
  • statusBar.debuggingBackground#404880
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#E8E8F0
  • statusBar.noFolderBackground#14121A
  • statusBarItem.activeBackground#302840
  • statusBarItem.hoverBackground#302840
  • statusBarItem.remoteBackground#8A95E5
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#8A95E5
  • tab.activeForeground#E8E8F0
  • tab.activeModifiedBorder#8A95E5
  • tab.border#2A2733
  • tab.hoverBackground#302840
  • tab.inactiveBackground#1E1C23
  • tab.inactiveForeground#605870
  • tab.inactiveModifiedBorder#605870
  • tab.unfocusedActiveForeground#605870
  • tab.unfocusedInactiveForeground#605870
  • terminal.ansiBlue#9B6BDF
  • terminal.ansiBrightBlue#9B6BDF
  • terminal.ansiBrightCyan#75D7EC
  • terminal.ansiBrightGreen#42E66C
  • terminal.ansiBrightMagenta#E64747
  • terminal.ansiBrightRed#E356A7
  • terminal.ansiBrightYellow#EFA554
  • terminal.ansiCyan#75D7EC
  • terminal.ansiGreen#42E66C
  • terminal.ansiMagenta#E64747
  • terminal.ansiRed#E356A7
  • terminal.ansiYellow#EFA554
  • terminal.background#1B1C1F
  • terminal.foreground#F8F8F2
  • terminal.selectionBackground#404880
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#8A95E5
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#8A95E5
  • textLink.foreground#8A95E5
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#14121A
  • titleBar.activeForeground#E8E8F0
  • titleBar.border#2A2733
  • titleBar.inactiveBackground#1E1C23
  • titleBar.inactiveForeground#605870
  • tree.indentGuidesStroke#2A2733
  • widget.shadow#2A2733

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#F8F8F2
comment, punctuation.definition.comment, string.quoted.docstring#6272A4
storage.type.class.jsdoc, keyword.other.documentation, punctuation.definition.block.tag.jsdoc, entity.name.tag.yaml#8A95E5bold italic
variable.other.jsdoc, meta.other.type.phpdoc, variable.parameter.jsdoc#5058A0
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.other, keyword.declaration, storage.type, storage.modifier#3B69CBFF
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template#5058A0
constant.character.escape, constant.character.unicode#5058A0
invalid.illegal.escape#7583E4
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#5058A0
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, variable.other.constant, support.constant#5058A0
entity.name.class, entity.name.type.class, entity.name.type, entity.other.inherited-class, support.class, meta.class entity.name#7583E4
entity.name.type.instance, support.type, storage.type.generic, entity.name.type.parameter, meta.type.annotation entity.name.type#7583E4
entity.name.interface, entity.name.type.interface, entity.name.type.enum#8A95E5
entity.name.function, entity.name.function.constructor, entity.name.function.destructor#7583E4
meta.function-call, meta.function-call entity.name.function, variable.function, support.function#8A95E5
variable.parameter, meta.function.parameter variable, meta.parameter#B8C0F0
variable, variable.other, variable.other.readwrite, variable.other.object#F8F8F2
variable.other.object.property, variable.other.member, variable.other.property, support.variable.property, meta.object-literal.key#F8F8F2bold
variable.other.global, variable.other.static, support.variable, meta.property-access support.variable#5BB0E1
variable.language, variable.language.this, variable.language.self, variable.language.super#7583E4
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.type#8A95E5
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#8A95E5
entity.name.tag, meta.tag.sgml, punctuation.definition.tag#8A95E5
entity.other.attribute-name, entity.other.attribute-name.html, meta.tag entity.other.attribute-name#D39FF4
string.quoted.double.html, string.quoted.single.html, meta.attribute-with-value.html string#5058A0
constant.character.entity, punctuation.definition.entity.html#5058A0
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.decorator#8A95E5
support.type.property-name, support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, meta.property-name#8A95E5
support.constant.property-value, support.constant.color, support.constant.font-name, meta.property-value#5058A0
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.id, entity.other.attribute-name.class.css#7583E4
keyword.control.at-rule, keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import#3B69CBFF
string.regexp, string.regexp.character-class, constant.other.character-class.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp#5058A0
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, keyword.operator.or.regexp#8A95E5
support.type.property-name.json, meta.structure.dictionary.key.json string, meta.mapping.key string#8A95E5
entity.name.tag.yaml, meta.mapping.key.yaml string#8A95E5
punctuation.definition.function.kotlin, keyword.operator.arrow.kotlin#3B69CBFF
markup.heading, markup.heading.markdown, entity.name.section.markdown#3B69CBFFbold
markup.bold, punctuation.definition.bold#7583E4bold
markup.italic, punctuation.definition.italic#B8C0F0italic
markup.inline.raw, markup.raw.inline, markup.raw.block#5058A0
markup.underline.link, string.other.link, meta.link#8A95E5
markup.quote, markup.quote.markdown#6272A4
meta.import variable.other.readwrite.alias, meta.import variable.other.readwrite, meta.export variable.other.readwrite.alias, meta.export variable.other.readwrite, meta.statement.import variable, meta.import-from variable#7583E4
invalid, invalid.illegal#D85A8C