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#D84C55
  • activityBar.background#141518
  • activityBar.border#2E2E34
  • activityBar.foreground#E8E6EC
  • activityBar.inactiveForeground#84828A
  • activityBarBadge.background#D84C55
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D84C55
  • badge.foreground#FFFFFF
  • button.background#303036
  • button.foreground#E8E6EC
  • button.hoverBackground#403C4A
  • button.secondaryBackground#26262A
  • button.secondaryForeground#E8E6EC
  • checkbox.background#1B1C1F
  • checkbox.border#2E2E34
  • checkbox.foreground#E8E6EC
  • diffEditor.diagonalFill#2E2E34
  • diffEditor.insertedLineBackground#3A707099
  • diffEditor.insertedTextBackground#3A707099
  • diffEditor.removedLineBackground#58424899
  • diffEditor.removedTextBackground#58424899
  • disabledForeground#84828A
  • dropdown.background#28282E
  • dropdown.border#2E2E34
  • dropdown.foreground#E8E6EC
  • dropdown.listBackground#28282E
  • editor.background#1B1C1F
  • editor.findMatchBackground#E0B468
  • editor.findMatchForeground#1A1A1E
  • editor.findMatchHighlightBackground#403C4A
  • editor.foldBackground#1D1D21
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#4C405C
  • editor.lineHighlightBackground#242428
  • editor.rangeHighlightBackground#403C4A
  • editor.selectionBackground#5A4A6E
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#504C5A
  • editor.wordHighlightStrongBackground#504C5A
  • editorBracketHighlight.foreground1#D84C55
  • editorBracketHighlight.foreground2#87DAB3
  • editorBracketHighlight.foreground3#B088CC
  • editorBracketHighlight.foreground4#C46156
  • editorBracketHighlight.foreground5#E8A090
  • editorBracketHighlight.foreground6#FFF3AB
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#403C4A
  • editorBracketMatch.border#D84C55
  • editorCursor.foreground#D84C55
  • editorGroupHeader.noTabsBackground#16161A
  • editorGroupHeader.tabsBackground#16161A
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#E8A090
  • editorIndentGuide.activeBackground1#D84C55
  • editorIndentGuide.background1#2E2E34
  • editorLineNumber.activeForeground#D84C55
  • editorLineNumber.foreground#8C8A92
  • editorRuler.foreground#2E2E34
  • editorWhitespace.foreground#2E2E34
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#5A4A6E
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#403C4A
  • focusBorder#D84C5544
  • foreground#E8E6EC
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#D84C55
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#84828A
  • gitDecoration.modifiedResourceForeground#E8A090
  • gitDecoration.submoduleResourceForeground#FFF3AB
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#CAC8D0
  • input.background#1B1C1F
  • input.border#2E2E34
  • input.foreground#E8E6EC
  • input.placeholderForeground#84828A
  • inputOption.activeBackground#5A4A6E
  • inputOption.activeBorder#D84C55
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#5A4A6E
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#5A4A6E
  • list.focusForeground#FFFFFF
  • list.highlightForeground#D84C55
  • list.hoverBackground#403C4A
  • list.inactiveFocusBackground#4C405C
  • list.inactiveSelectionBackground#4C405C
  • menu.background#28282E
  • menu.border#2E2E3433
  • menu.foreground#E8E6EC
  • menu.selectionBackground#5A4A6E
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2E2E34
  • menubar.selectionBackground#403C4A
  • menubar.selectionForeground#E8E6EC
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#D84C5588
  • minimapSlider.background#26262A33
  • minimapSlider.hoverBackground#403C4A55
  • notificationCenterHeader.background#16161A
  • notifications.background#18181C
  • notifications.border#2E2E34
  • notifications.foreground#E8E6EC
  • panel.background#16171A
  • panel.border#2E2E34
  • panelTitle.activeBorder#D84C55
  • panelTitle.activeForeground#E8E6EC
  • panelTitle.inactiveForeground#84828A
  • peekView.border#D84C55
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#403C4A
  • peekViewResult.background#18181C
  • peekViewResult.matchHighlightBackground#403C4A
  • peekViewResult.selectionBackground#5A4A6E
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#16161A
  • peekViewTitleDescription.foreground#84828A
  • peekViewTitleLabel.foreground#E8E6EC
  • pickerGroup.border#2E2E34
  • pickerGroup.foreground#D84C55
  • progressBar.background#D84C55
  • quickInput.background#28282E
  • quickInput.foreground#E8E6EC
  • scrollbar.shadow#2E2E34
  • scrollbarSlider.activeBackground#D84C55
  • scrollbarSlider.background#26262A
  • scrollbarSlider.hoverBackground#403C4A
  • selection.background#5A4A6E
  • sideBar.background#16171A
  • sideBar.border#2E2E34
  • sideBar.foreground#E8E6EC
  • sideBarSectionHeader.background#16161A
  • sideBarSectionHeader.border#2E2E34
  • sideBarSectionHeader.foreground#E8E6EC
  • sideBarTitle.foreground#E8E6EC
  • statusBar.background#16161A
  • statusBar.border#2E2E34
  • statusBar.debuggingBackground#5A4A6E
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#E8E6EC
  • statusBar.noFolderBackground#16161A
  • statusBarItem.activeBackground#403C4A
  • statusBarItem.hoverBackground#403C4A
  • statusBarItem.remoteBackground#D84C55
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#D84C55
  • tab.activeForeground#E8E6EC
  • tab.activeModifiedBorder#D84C55
  • tab.border#2E2E34
  • tab.hoverBackground#403C4A
  • tab.inactiveBackground#2E2E34
  • tab.inactiveForeground#84828A
  • tab.inactiveModifiedBorder#84828A
  • tab.unfocusedActiveForeground#84828A
  • tab.unfocusedInactiveForeground#84828A
  • 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#5A4A6E
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#D84C55
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#D84C55
  • textLink.foreground#D84C55
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#16161A
  • titleBar.activeForeground#E8E6EC
  • titleBar.border#2E2E34
  • titleBar.inactiveBackground#2E2E34
  • titleBar.inactiveForeground#84828A
  • tree.indentGuidesStroke#2E2E34
  • widget.shadow#2E2E34

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