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#D94A8C
  • activityBar.background#141518
  • activityBar.border#2D2830
  • activityBar.foreground#EAE6EC
  • activityBar.inactiveForeground#705C68
  • activityBarBadge.background#D94A8C
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D94A8C
  • badge.foreground#FFFFFF
  • button.background#322C36
  • button.foreground#F0EAF5
  • button.hoverBackground#402838
  • button.secondaryBackground#2E2A32
  • button.secondaryForeground#EAE6EC
  • checkbox.background#1B1C1F
  • checkbox.border#2D2830
  • checkbox.foreground#EAE6EC
  • diffEditor.diagonalFill#2D2830
  • diffEditor.insertedLineBackground#3A707099
  • diffEditor.insertedTextBackground#3A707099
  • diffEditor.removedLineBackground#58424E99
  • diffEditor.removedTextBackground#58424E99
  • disabledForeground#705C68
  • dropdown.background#26232A
  • dropdown.border#2D2830
  • dropdown.foreground#EAE6EC
  • dropdown.listBackground#26232A
  • editor.background#1B1C1F
  • editor.findMatchBackground#E87AAA
  • editor.findMatchForeground#181014
  • editor.findMatchHighlightBackground#402838
  • editor.foldBackground#201D24
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#503848
  • editor.lineHighlightBackground#232128
  • editor.rangeHighlightBackground#402838
  • editor.selectionBackground#683A64
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#453840
  • editor.wordHighlightStrongBackground#453840
  • editorBracketHighlight.foreground1#D94A8C
  • editorBracketHighlight.foreground2#FFAEAE
  • editorBracketHighlight.foreground3#3CA9A0
  • editorBracketHighlight.foreground4#D94A8C
  • editorBracketHighlight.foreground5#FA8AB6
  • editorBracketHighlight.foreground6#68AAA2
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#402838
  • editorBracketMatch.border#D94A8C
  • editorCursor.foreground#D94A8C
  • editorGroupHeader.noTabsBackground#141216
  • editorGroupHeader.tabsBackground#141216
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#D94A8C
  • editorIndentGuide.activeBackground1#D94A8C
  • editorIndentGuide.background1#2D2830
  • editorLineNumber.activeForeground#D94A8C
  • editorLineNumber.foreground#887884
  • editorRuler.foreground#2D2830
  • editorWhitespace.foreground#2D2830
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#683A64
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#402838
  • focusBorder#D94A8C44
  • foreground#EAE6EC
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#D94A8C
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#705C68
  • gitDecoration.modifiedResourceForeground#D94A8C
  • gitDecoration.submoduleResourceForeground#68AAA2
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#C0B8C8
  • input.background#1B1C1F
  • input.border#2D2830
  • input.foreground#EAE6EC
  • input.placeholderForeground#705C68
  • inputOption.activeBackground#683A64
  • inputOption.activeBorder#D94A8C
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#683A64
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#683A64
  • list.focusForeground#FFFFFF
  • list.highlightForeground#D94A8C
  • list.hoverBackground#402838
  • list.inactiveFocusBackground#503848
  • list.inactiveSelectionBackground#503848
  • menu.background#26232A
  • menu.border#2D283033
  • menu.foreground#EAE6EC
  • menu.selectionBackground#683A64
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2D2830
  • menubar.selectionBackground#402838
  • menubar.selectionForeground#EAE6EC
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#D94A8C88
  • minimapSlider.background#2E2A3233
  • minimapSlider.hoverBackground#40283855
  • notificationCenterHeader.background#141216
  • notifications.background#17151A
  • notifications.border#2D2830
  • notifications.foreground#EAE6EC
  • panel.background#16171A
  • panel.border#2D2830
  • panelTitle.activeBorder#D94A8C
  • panelTitle.activeForeground#EAE6EC
  • panelTitle.inactiveForeground#705C68
  • peekView.border#D94A8C
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#402838
  • peekViewResult.background#17151A
  • peekViewResult.matchHighlightBackground#402838
  • peekViewResult.selectionBackground#683A64
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#141216
  • peekViewTitleDescription.foreground#705C68
  • peekViewTitleLabel.foreground#EAE6EC
  • pickerGroup.border#2D2830
  • pickerGroup.foreground#D94A8C
  • progressBar.background#D94A8C
  • quickInput.background#26232A
  • quickInput.foreground#EAE6EC
  • scrollbar.shadow#2D2830
  • scrollbarSlider.activeBackground#D94A8C
  • scrollbarSlider.background#2E2A32
  • scrollbarSlider.hoverBackground#402838
  • selection.background#683A64
  • sideBar.background#16171A
  • sideBar.border#2D2830
  • sideBar.foreground#EAE6EC
  • sideBarSectionHeader.background#141216
  • sideBarSectionHeader.border#2D2830
  • sideBarSectionHeader.foreground#EAE6EC
  • sideBarTitle.foreground#EAE6EC
  • statusBar.background#141216
  • statusBar.border#2D2830
  • statusBar.debuggingBackground#683A64
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#EAE6EC
  • statusBar.noFolderBackground#141216
  • statusBarItem.activeBackground#402838
  • statusBarItem.hoverBackground#402838
  • statusBarItem.remoteBackground#D94A8C
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#D94A8C
  • tab.activeForeground#EAE6EC
  • tab.activeModifiedBorder#D94A8C
  • tab.border#2D2830
  • tab.hoverBackground#402838
  • tab.inactiveBackground#2C272E
  • tab.inactiveForeground#705C68
  • tab.inactiveModifiedBorder#705C68
  • tab.unfocusedActiveForeground#705C68
  • tab.unfocusedInactiveForeground#705C68
  • 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#683A64
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#D94A8C
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#D94A8C
  • textLink.foreground#D94A8C
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#141216
  • titleBar.activeForeground#EAE6EC
  • titleBar.border#2D2830
  • titleBar.inactiveBackground#2C272E
  • titleBar.inactiveForeground#705C68
  • tree.indentGuidesStroke#2D2830
  • widget.shadow#2D2830

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