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#FFCC75
  • activityBar.background#141518
  • activityBar.border#2C2A3A
  • activityBar.foreground#EAE6FF
  • activityBar.inactiveForeground#7A738B
  • activityBarBadge.background#FFCC75
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FFCC75
  • badge.foreground#FFFFFF
  • button.background#2F2D3F
  • button.foreground#EAE6FF
  • button.hoverBackground#3D354A
  • button.secondaryBackground#2A2838
  • button.secondaryForeground#EAE6FF
  • checkbox.background#1B1C1F
  • checkbox.border#2C2A3A
  • checkbox.foreground#EAE6FF
  • diffEditor.diagonalFill#2C2A3A
  • diffEditor.insertedLineBackground#33887799
  • diffEditor.insertedTextBackground#33887799
  • diffEditor.removedLineBackground#66444499
  • diffEditor.removedTextBackground#66444499
  • disabledForeground#7A738B
  • dropdown.background#292738
  • dropdown.border#2C2A3A
  • dropdown.foreground#EAE6FF
  • dropdown.listBackground#292738
  • editor.background#1B1C1F
  • editor.findMatchBackground#BE88FF
  • editor.findMatchForeground#1E1C2A
  • editor.findMatchHighlightBackground#3D354A
  • editor.foldBackground#201E2C
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#4A3C63
  • editor.lineHighlightBackground#262433
  • editor.rangeHighlightBackground#3D354A
  • editor.selectionBackground#5A4A78
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#4F4463
  • editor.wordHighlightStrongBackground#4F4463
  • editorBracketHighlight.foreground1#FFCC75
  • editorBracketHighlight.foreground2#78D7FF
  • editorBracketHighlight.foreground3#BE88FF
  • editorBracketHighlight.foreground4#73C8F0
  • editorBracketHighlight.foreground5#F06BA2
  • editorBracketHighlight.foreground6#FF4F6D
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#3D354A
  • editorBracketMatch.border#FFCC75
  • editorCursor.foreground#FFCC75
  • editorGroupHeader.noTabsBackground#191824
  • editorGroupHeader.tabsBackground#191824
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#FF7EB5
  • editorIndentGuide.activeBackground1#FFCC75
  • editorIndentGuide.background1#2C2A3A
  • editorLineNumber.activeForeground#FFCC75
  • editorLineNumber.foreground#938CAA
  • editorRuler.foreground#2C2A3A
  • editorWhitespace.foreground#2C2A3A
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#5A4A78
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#3D354A
  • focusBorder#FFCC7544
  • foreground#EAE6FF
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#FFCC75
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#7A738B
  • gitDecoration.modifiedResourceForeground#FF7EB5
  • gitDecoration.submoduleResourceForeground#FF4F6D
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#C8C2E0
  • input.background#1B1C1F
  • input.border#2C2A3A
  • input.foreground#EAE6FF
  • input.placeholderForeground#7A738B
  • inputOption.activeBackground#5A4A78
  • inputOption.activeBorder#FFCC75
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#5A4A78
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#5A4A78
  • list.focusForeground#FFFFFF
  • list.highlightForeground#FFCC75
  • list.hoverBackground#3D354A
  • list.inactiveFocusBackground#4A3C63
  • list.inactiveSelectionBackground#4A3C63
  • menu.background#292738
  • menu.border#2C2A3A33
  • menu.foreground#EAE6FF
  • menu.selectionBackground#5A4A78
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2C2A3A
  • menubar.selectionBackground#3D354A
  • menubar.selectionForeground#EAE6FF
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#FFCC7588
  • minimapSlider.background#2A283833
  • minimapSlider.hoverBackground#3D354A55
  • notificationCenterHeader.background#191824
  • notifications.background#1A1826
  • notifications.border#2C2A3A
  • notifications.foreground#EAE6FF
  • panel.background#16171A
  • panel.border#2C2A3A
  • panelTitle.activeBorder#FFCC75
  • panelTitle.activeForeground#EAE6FF
  • panelTitle.inactiveForeground#7A738B
  • peekView.border#FFCC75
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#3D354A
  • peekViewResult.background#1A1826
  • peekViewResult.matchHighlightBackground#3D354A
  • peekViewResult.selectionBackground#5A4A78
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#191824
  • peekViewTitleDescription.foreground#7A738B
  • peekViewTitleLabel.foreground#EAE6FF
  • pickerGroup.border#2C2A3A
  • pickerGroup.foreground#FFCC75
  • progressBar.background#FFCC75
  • quickInput.background#292738
  • quickInput.foreground#EAE6FF
  • scrollbar.shadow#2C2A3A
  • scrollbarSlider.activeBackground#FFCC75
  • scrollbarSlider.background#2A2838
  • scrollbarSlider.hoverBackground#3D354A
  • selection.background#5A4A78
  • sideBar.background#16171A
  • sideBar.border#2C2A3A
  • sideBar.foreground#EAE6FF
  • sideBarSectionHeader.background#191824
  • sideBarSectionHeader.border#2C2A3A
  • sideBarSectionHeader.foreground#EAE6FF
  • sideBarTitle.foreground#EAE6FF
  • statusBar.background#191824
  • statusBar.border#2C2A3A
  • statusBar.debuggingBackground#5A4A78
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#EAE6FF
  • statusBar.noFolderBackground#191824
  • statusBarItem.activeBackground#3D354A
  • statusBarItem.hoverBackground#3D354A
  • statusBarItem.remoteBackground#FFCC75
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#FFCC75
  • tab.activeForeground#EAE6FF
  • tab.activeModifiedBorder#FFCC75
  • tab.border#2C2A3A
  • tab.hoverBackground#3D354A
  • tab.inactiveBackground#2C2A3A
  • tab.inactiveForeground#7A738B
  • tab.inactiveModifiedBorder#7A738B
  • tab.unfocusedActiveForeground#7A738B
  • tab.unfocusedInactiveForeground#7A738B
  • 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#5A4A78
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#FFCC75
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#FFCC75
  • textLink.foreground#FFCC75
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#191824
  • titleBar.activeForeground#EAE6FF
  • titleBar.border#2C2A3A
  • titleBar.inactiveBackground#2C2A3A
  • titleBar.inactiveForeground#7A738B
  • tree.indentGuidesStroke#2C2A3A
  • widget.shadow#2C2A3A

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