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#E8B858
  • activityBar.background#141518
  • activityBar.border#2A2C38
  • activityBar.foreground#E8E2D8
  • activityBar.inactiveForeground#687080
  • activityBarBadge.background#E8B858
  • activityBarBadge.foreground#1A1C22
  • badge.background#E8B858
  • badge.foreground#1A1C22
  • button.background#2A3048
  • button.foreground#C8D0E0
  • button.hoverBackground#202430
  • button.secondaryBackground#1A1C22
  • button.secondaryForeground#E8E2D8
  • checkbox.background#1B1C1F
  • checkbox.border#2A2C38
  • checkbox.foreground#E8E2D8
  • diffEditor.diagonalFill#2A2C38
  • diffEditor.insertedLineBackground#28585099
  • diffEditor.insertedTextBackground#28585099
  • diffEditor.removedLineBackground#48484899
  • diffEditor.removedTextBackground#48484899
  • disabledForeground#687080
  • dropdown.background#1E2028
  • dropdown.border#2A2C38
  • dropdown.foreground#E8E2D8
  • dropdown.listBackground#1E2028
  • editor.background#1B1C1F
  • editor.findMatchBackground#E8B858
  • editor.findMatchForeground#403010
  • editor.findMatchHighlightBackground#202430
  • editor.foldBackground#202430
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#284880
  • editor.lineHighlightBackground#242630
  • editor.rangeHighlightBackground#202430
  • editor.selectionBackground#3860A8
  • editor.selectionForeground#E8F0F8
  • editor.wordHighlightBackground#303850
  • editor.wordHighlightStrongBackground#303850
  • editorBracketHighlight.foreground1#E8B858
  • editorBracketHighlight.foreground2#7DA8E5
  • editorBracketHighlight.foreground3#4B5681
  • editorBracketHighlight.foreground4#F8CE72
  • editorBracketHighlight.foreground5#FFEFB6
  • editorBracketHighlight.foreground6#71A7B8
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#202430
  • editorBracketMatch.border#E8B858
  • editorCursor.foreground#E8B858
  • editorGroupHeader.noTabsBackground#1A1C22
  • editorGroupHeader.tabsBackground#1A1C22
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#E8E2D8
  • editorIndentGuide.activeBackground1#E8B858
  • editorIndentGuide.background1#2A2C38
  • editorLineNumber.activeForeground#E8B858
  • editorLineNumber.foreground#788098
  • editorRuler.foreground#2A2C38
  • editorWhitespace.foreground#2A2C38
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#3860A8
  • extensionButton.prominentForeground#E8F0F8
  • extensionButton.prominentHoverBackground#202430
  • focusBorder#E8B85844
  • foreground#E8E2D8
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#E8B858
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#687080
  • gitDecoration.modifiedResourceForeground#E8E2D8
  • gitDecoration.submoduleResourceForeground#71A7B8
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#A8B0C0
  • input.background#1B1C1F
  • input.border#2A2C38
  • input.foreground#E8E2D8
  • input.placeholderForeground#687080
  • inputOption.activeBackground#3860A8
  • inputOption.activeBorder#E8B858
  • inputOption.activeForeground#E8F0F8
  • list.activeSelectionBackground#3860A8
  • list.activeSelectionForeground#E8F0F8
  • list.focusBackground#3860A8
  • list.focusForeground#E8F0F8
  • list.highlightForeground#E8B858
  • list.hoverBackground#202430
  • list.inactiveFocusBackground#284880
  • list.inactiveSelectionBackground#284880
  • menu.background#1E2028
  • menu.border#2A2C3833
  • menu.foreground#E8E2D8
  • menu.selectionBackground#3860A8
  • menu.selectionForeground#E8F0F8
  • menu.separatorBackground#2A2C38
  • menubar.selectionBackground#202430
  • menubar.selectionForeground#E8E2D8
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#E8B85888
  • minimapSlider.background#1A1C2233
  • minimapSlider.hoverBackground#20243055
  • notificationCenterHeader.background#1A1C22
  • notifications.background#1E2028
  • notifications.border#2A2C38
  • notifications.foreground#E8E2D8
  • panel.background#16171A
  • panel.border#2A2C38
  • panelTitle.activeBorder#E8B858
  • panelTitle.activeForeground#E8E2D8
  • panelTitle.inactiveForeground#687080
  • peekView.border#E8B858
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#202430
  • peekViewResult.background#1E2028
  • peekViewResult.matchHighlightBackground#202430
  • peekViewResult.selectionBackground#3860A8
  • peekViewResult.selectionForeground#E8F0F8
  • peekViewTitle.background#1A1C22
  • peekViewTitleDescription.foreground#687080
  • peekViewTitleLabel.foreground#E8E2D8
  • pickerGroup.border#2A2C38
  • pickerGroup.foreground#E8B858
  • progressBar.background#E8B858
  • quickInput.background#1E2028
  • quickInput.foreground#E8E2D8
  • scrollbar.shadow#2A2C38
  • scrollbarSlider.activeBackground#E8B858
  • scrollbarSlider.background#1A1C22
  • scrollbarSlider.hoverBackground#202430
  • selection.background#3860A8
  • sideBar.background#16171A
  • sideBar.border#2A2C38
  • sideBar.foreground#E8E2D8
  • sideBarSectionHeader.background#1A1C22
  • sideBarSectionHeader.border#2A2C38
  • sideBarSectionHeader.foreground#E8E2D8
  • sideBarTitle.foreground#E8E2D8
  • statusBar.background#1A1C22
  • statusBar.border#2A2C38
  • statusBar.debuggingBackground#3860A8
  • statusBar.debuggingForeground#E8F0F8
  • statusBar.foreground#E8E2D8
  • statusBar.noFolderBackground#1A1C22
  • statusBarItem.activeBackground#202430
  • statusBarItem.hoverBackground#202430
  • statusBarItem.remoteBackground#E8B858
  • statusBarItem.remoteForeground#1A1C22
  • tab.activeBackground#191A1C
  • tab.activeBorder#E8B858
  • tab.activeForeground#E8E2D8
  • tab.activeModifiedBorder#E8B858
  • tab.border#2A2C38
  • tab.hoverBackground#202430
  • tab.inactiveBackground#1A1C22
  • tab.inactiveForeground#687080
  • tab.inactiveModifiedBorder#687080
  • tab.unfocusedActiveForeground#687080
  • tab.unfocusedInactiveForeground#687080
  • 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#3860A8
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#E8B858
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#E8B858
  • textLink.foreground#E8B858
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#1A1C22
  • titleBar.activeForeground#E8E2D8
  • titleBar.border#2A2C38
  • titleBar.inactiveBackground#1A1C22
  • titleBar.inactiveForeground#687080
  • tree.indentGuidesStroke#2A2C38
  • widget.shadow#2A2C38

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