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#80B8F9
  • editorBracketHighlight.foreground3#5058A0
  • editorBracketHighlight.foreground4#7A86E2
  • editorBracketHighlight.foreground5#B0BAFD
  • editorBracketHighlight.foreground6#6BEBA6FF
  • 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#6BEBA6FF
  • 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#80B8F9
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.other, keyword.declaration, storage.type, storage.modifier#5058A0
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template#80B8F9
constant.character.escape, constant.character.unicode#80B8F9
invalid.illegal.escape#7A86E2
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#7A86E2
entity.name.type.instance, support.type, storage.type.generic, entity.name.type.parameter, meta.type.annotation entity.name.type#7A86E2
entity.name.interface, entity.name.type.interface, entity.name.type.enum#B0BAFD
entity.name.function, entity.name.function.constructor, entity.name.function.destructor#7A86E2
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#7A86E2
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.type#6A5FCDFF
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#6A5FCDFF
entity.name.tag, meta.tag.sgml, punctuation.definition.tag#6A5FCDFF
entity.other.attribute-name, entity.other.attribute-name.html, meta.tag entity.other.attribute-name#8A95E5
string.quoted.double.html, string.quoted.single.html, meta.attribute-with-value.html string#80B8F9
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#80B8F9
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.id, entity.other.attribute-name.class.css#7A86E2
keyword.control.at-rule, keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import#5058A0
string.regexp, string.regexp.character-class, constant.other.character-class.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp#80B8F9
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, keyword.operator.or.regexp#6A5FCDFF
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#5058A0
markup.heading, markup.heading.markdown, entity.name.section.markdown#5058A0bold
markup.bold, punctuation.definition.bold#7A86E2bold
markup.italic, punctuation.definition.italic#B8C0F0italic
markup.inline.raw, markup.raw.inline, markup.raw.block#80B8F9
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#7A86E2
invalid, invalid.illegal#D85A8C