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#B591FF
  • activityBar.background#141518
  • activityBar.border#2A2830
  • activityBar.foreground#EAE6FF
  • activityBar.inactiveForeground#787680
  • activityBarBadge.background#B591FF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#B591FF
  • badge.foreground#FFFFFF
  • button.background#2F2D35
  • button.foreground#E8E6EE
  • button.hoverBackground#3D2E34
  • button.secondaryBackground#28262E
  • button.secondaryForeground#EAE6FF
  • checkbox.background#1B1C1F
  • checkbox.border#2A2830
  • checkbox.foreground#EAE6FF
  • diffEditor.diagonalFill#2A2830
  • diffEditor.insertedLineBackground#33887799
  • diffEditor.insertedTextBackground#33887799
  • diffEditor.removedLineBackground#66444499
  • diffEditor.removedTextBackground#66444499
  • disabledForeground#787680
  • dropdown.background#25232B
  • dropdown.border#2A2830
  • dropdown.foreground#EAE6FF
  • dropdown.listBackground#25232B
  • editor.background#1B1C1F
  • editor.findMatchBackground#FF8CC1
  • editor.findMatchForeground#1A1A1D
  • editor.findMatchHighlightBackground#3D2E34
  • editor.foldBackground#1F1E25
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#3A2B4A
  • editor.lineHighlightBackground#23212A
  • editor.rangeHighlightBackground#3D2E34
  • editor.selectionBackground#3C2F55
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#4F4448
  • editor.wordHighlightStrongBackground#4F4448
  • editorBracketHighlight.foreground1#B591FF
  • editorBracketHighlight.foreground2#82ACE6
  • editorBracketHighlight.foreground3#7F48B3
  • editorBracketHighlight.foreground4#FF7FD4
  • editorBracketHighlight.foreground5#FFB2E8
  • editorBracketHighlight.foreground6#E699FF
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#3D2E34
  • editorBracketMatch.border#B591FF
  • editorCursor.foreground#B591FF
  • editorGroupHeader.noTabsBackground#16151A
  • editorGroupHeader.tabsBackground#16151A
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#C9AFFF
  • editorIndentGuide.activeBackground1#B591FF
  • editorIndentGuide.background1#2A2830
  • editorLineNumber.activeForeground#B591FF
  • editorLineNumber.foreground#8A8893
  • editorRuler.foreground#2A2830
  • editorWhitespace.foreground#2A2830
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#3C2F55
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#3D2E34
  • focusBorder#B591FF44
  • foreground#EAE6FF
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#B591FF
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#787680
  • gitDecoration.modifiedResourceForeground#C9AFFF
  • gitDecoration.submoduleResourceForeground#E699FF
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#C4C2CC
  • input.background#1B1C1F
  • input.border#2A2830
  • input.foreground#EAE6FF
  • input.placeholderForeground#787680
  • inputOption.activeBackground#3C2F55
  • inputOption.activeBorder#B591FF
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#3C2F55
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#3C2F55
  • list.focusForeground#FFFFFF
  • list.highlightForeground#B591FF
  • list.hoverBackground#3D2E34
  • list.inactiveFocusBackground#3A2B4A
  • list.inactiveSelectionBackground#3A2B4A
  • menu.background#25232B
  • menu.border#2A283033
  • menu.foreground#EAE6FF
  • menu.selectionBackground#3C2F55
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2A2830
  • menubar.selectionBackground#3D2E34
  • menubar.selectionForeground#EAE6FF
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#B591FF88
  • minimapSlider.background#28262E33
  • minimapSlider.hoverBackground#3D2E3455
  • notificationCenterHeader.background#16151A
  • notifications.background#17161B
  • notifications.border#2A2830
  • notifications.foreground#EAE6FF
  • panel.background#16171A
  • panel.border#2A2830
  • panelTitle.activeBorder#B591FF
  • panelTitle.activeForeground#EAE6FF
  • panelTitle.inactiveForeground#787680
  • peekView.border#B591FF
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#3D2E34
  • peekViewResult.background#17161B
  • peekViewResult.matchHighlightBackground#3D2E34
  • peekViewResult.selectionBackground#3C2F55
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#16151A
  • peekViewTitleDescription.foreground#787680
  • peekViewTitleLabel.foreground#EAE6FF
  • pickerGroup.border#2A2830
  • pickerGroup.foreground#B591FF
  • progressBar.background#B591FF
  • quickInput.background#25232B
  • quickInput.foreground#EAE6FF
  • scrollbar.shadow#2A2830
  • scrollbarSlider.activeBackground#B591FF
  • scrollbarSlider.background#28262E
  • scrollbarSlider.hoverBackground#3D2E34
  • selection.background#3C2F55
  • sideBar.background#16171A
  • sideBar.border#2A2830
  • sideBar.foreground#EAE6FF
  • sideBarSectionHeader.background#16151A
  • sideBarSectionHeader.border#2A2830
  • sideBarSectionHeader.foreground#EAE6FF
  • sideBarTitle.foreground#EAE6FF
  • statusBar.background#16151A
  • statusBar.border#2A2830
  • statusBar.debuggingBackground#3C2F55
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#EAE6FF
  • statusBar.noFolderBackground#16151A
  • statusBarItem.activeBackground#3D2E34
  • statusBarItem.hoverBackground#3D2E34
  • statusBarItem.remoteBackground#B591FF
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#B591FF
  • tab.activeForeground#EAE6FF
  • tab.activeModifiedBorder#B591FF
  • tab.border#2A2830
  • tab.hoverBackground#3D2E34
  • tab.inactiveBackground#2E2C34
  • tab.inactiveForeground#787680
  • tab.inactiveModifiedBorder#787680
  • tab.unfocusedActiveForeground#787680
  • tab.unfocusedInactiveForeground#787680
  • 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#3C2F55
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#B591FF
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#B591FF
  • textLink.foreground#B591FF
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#16151A
  • titleBar.activeForeground#EAE6FF
  • titleBar.border#2A2830
  • titleBar.inactiveBackground#2E2C34
  • titleBar.inactiveForeground#787680
  • tree.indentGuidesStroke#2A2830
  • widget.shadow#2A2830

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#C9AFFFbold italic
variable.other.jsdoc, meta.other.type.phpdoc, variable.parameter.jsdoc#82ACE6
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.other, keyword.declaration, storage.type, storage.modifier#7F48B3
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template#82ACE6
constant.character.escape, constant.character.unicode#82ACE6
invalid.illegal.escape#FF7FD4
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#7C7DFA
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, variable.other.constant, support.constant#7C7DFA
entity.name.class, entity.name.type.class, entity.name.type, entity.other.inherited-class, support.class, meta.class entity.name#FF7FD4
entity.name.type.instance, support.type, storage.type.generic, entity.name.type.parameter, meta.type.annotation entity.name.type#FF7FD4
entity.name.interface, entity.name.type.interface, entity.name.type.enum#FFB2E8
entity.name.function, entity.name.function.constructor, entity.name.function.destructor#FF7FD4
meta.function-call, meta.function-call entity.name.function, variable.function, support.function#B591FF
variable.parameter, meta.function.parameter variable, meta.parameter#E8BFFF
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#DDC6FF
variable.language, variable.language.this, variable.language.self, variable.language.super#FF7FD4
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.type#7F48B3
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#7F48B3
entity.name.tag, meta.tag.sgml, punctuation.definition.tag#7F48B3
entity.other.attribute-name, entity.other.attribute-name.html, meta.tag entity.other.attribute-name#B591FF
string.quoted.double.html, string.quoted.single.html, meta.attribute-with-value.html string#82ACE6
constant.character.entity, punctuation.definition.entity.html#7C7DFA
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.decorator#B591FF
support.type.property-name, support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, meta.property-name#C9AFFF
support.constant.property-value, support.constant.color, support.constant.font-name, meta.property-value#82ACE6
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.id, entity.other.attribute-name.class.css#FF7FD4
keyword.control.at-rule, keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import#7F48B3
string.regexp, string.regexp.character-class, constant.other.character-class.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp#82ACE6
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, keyword.operator.or.regexp#7F48B3
support.type.property-name.json, meta.structure.dictionary.key.json string, meta.mapping.key string#B591FF
entity.name.tag.yaml, meta.mapping.key.yaml string#B591FF
punctuation.definition.function.kotlin, keyword.operator.arrow.kotlin#7F48B3
markup.heading, markup.heading.markdown, entity.name.section.markdown#7F48B3bold
markup.bold, punctuation.definition.bold#FF7FD4bold
markup.italic, punctuation.definition.italic#E8BFFFitalic
markup.inline.raw, markup.raw.inline, markup.raw.block#82ACE6
markup.underline.link, string.other.link, meta.link#B591FF
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#FF7FD4
invalid, invalid.illegal#D85A8C