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#D9734E
  • activityBar.background#141518
  • activityBar.border#2E2B29
  • activityBar.foreground#EAE2D9
  • activityBar.inactiveForeground#6E6259
  • activityBarBadge.background#D9734E
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D9734E
  • badge.foreground#FFFFFF
  • button.background#2A2725
  • button.foreground#EAE2D9
  • button.hoverBackground#4A3F3A
  • button.secondaryBackground#292624
  • button.secondaryForeground#EAE2D9
  • checkbox.background#1B1C1F
  • checkbox.border#2E2B29
  • checkbox.foreground#EAE2D9
  • diffEditor.diagonalFill#2E2B29
  • diffEditor.insertedLineBackground#7E8A6699
  • diffEditor.insertedTextBackground#7E8A6699
  • diffEditor.removedLineBackground#9A534D99
  • diffEditor.removedTextBackground#9A534D99
  • disabledForeground#6E6259
  • dropdown.background#22201F
  • dropdown.border#2E2B29
  • dropdown.foreground#EAE2D9
  • dropdown.listBackground#22201F
  • editor.background#1B1C1F
  • editor.findMatchBackground#C8A870
  • editor.findMatchForeground#1A1918
  • editor.findMatchHighlightBackground#4A3F3A
  • editor.foldBackground#2C2826
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#4D433B
  • editor.lineHighlightBackground#252321
  • editor.rangeHighlightBackground#4A3F3A
  • editor.selectionBackground#52493D
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#4D433B
  • editor.wordHighlightStrongBackground#4D433B
  • editorBracketHighlight.foreground1#D9734E
  • editorBracketHighlight.foreground2#D4C4A9
  • editorBracketHighlight.foreground3#FF7F40
  • editorBracketHighlight.foreground4#F1BE69
  • editorBracketHighlight.foreground5#C8A870
  • editorBracketHighlight.foreground6#68AAA2
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#4A3F3A
  • editorBracketMatch.border#D9734E
  • editorCursor.foreground#D9734E
  • editorGroupHeader.noTabsBackground#161514
  • editorGroupHeader.tabsBackground#161514
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#B58A6F
  • editorIndentGuide.activeBackground1#D9734E
  • editorIndentGuide.background1#2E2B29
  • editorLineNumber.activeForeground#D9734E
  • editorLineNumber.foreground#6E6259
  • editorRuler.foreground#2E2B29
  • editorWhitespace.foreground#2E2B29
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#52493D
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#4A3F3A
  • focusBorder#D9734E44
  • foreground#EAE2D9
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#D9734E
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#6E6259
  • gitDecoration.modifiedResourceForeground#B58A6F
  • gitDecoration.submoduleResourceForeground#68AAA2
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#C8BDB3
  • input.background#1B1C1F
  • input.border#2E2B29
  • input.foreground#EAE2D9
  • input.placeholderForeground#6E6259
  • inputOption.activeBackground#52493D
  • inputOption.activeBorder#D9734E
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#52493D
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#52493D
  • list.focusForeground#FFFFFF
  • list.highlightForeground#D9734E
  • list.hoverBackground#4A3F3A
  • list.inactiveFocusBackground#4D433B
  • list.inactiveSelectionBackground#4D433B
  • menu.background#22201F
  • menu.border#2E2B2933
  • menu.foreground#EAE2D9
  • menu.selectionBackground#52493D
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2E2B29
  • menubar.selectionBackground#4A3F3A
  • menubar.selectionForeground#EAE2D9
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#D9734E88
  • minimapSlider.background#29262433
  • minimapSlider.hoverBackground#4A3F3A55
  • notificationCenterHeader.background#161514
  • notifications.background#161514
  • notifications.border#2E2B29
  • notifications.foreground#EAE2D9
  • panel.background#16171A
  • panel.border#2E2B29
  • panelTitle.activeBorder#D9734E
  • panelTitle.activeForeground#EAE2D9
  • panelTitle.inactiveForeground#6E6259
  • peekView.border#D9734E
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#4A3F3A
  • peekViewResult.background#161514
  • peekViewResult.matchHighlightBackground#4A3F3A
  • peekViewResult.selectionBackground#52493D
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#161514
  • peekViewTitleDescription.foreground#6E6259
  • peekViewTitleLabel.foreground#EAE2D9
  • pickerGroup.border#2E2B29
  • pickerGroup.foreground#D9734E
  • progressBar.background#D9734E
  • quickInput.background#22201F
  • quickInput.foreground#EAE2D9
  • scrollbar.shadow#2E2B29
  • scrollbarSlider.activeBackground#D9734E
  • scrollbarSlider.background#292624
  • scrollbarSlider.hoverBackground#4A3F3A
  • selection.background#52493D
  • sideBar.background#16171A
  • sideBar.border#2E2B29
  • sideBar.foreground#EAE2D9
  • sideBarSectionHeader.background#161514
  • sideBarSectionHeader.border#2E2B29
  • sideBarSectionHeader.foreground#EAE2D9
  • sideBarTitle.foreground#EAE2D9
  • statusBar.background#161514
  • statusBar.border#2E2B29
  • statusBar.debuggingBackground#52493D
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#EAE2D9
  • statusBar.noFolderBackground#161514
  • statusBarItem.activeBackground#4A3F3A
  • statusBarItem.hoverBackground#4A3F3A
  • statusBarItem.remoteBackground#D9734E
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#D9734E
  • tab.activeForeground#EAE2D9
  • tab.activeModifiedBorder#D9734E
  • tab.border#2E2B29
  • tab.hoverBackground#4A3F3A
  • tab.inactiveBackground#292624
  • tab.inactiveForeground#6E6259
  • tab.inactiveModifiedBorder#6E6259
  • tab.unfocusedActiveForeground#6E6259
  • tab.unfocusedInactiveForeground#6E6259
  • 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#52493D
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#D9734E
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#D9734E
  • textLink.foreground#D9734E
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#161514
  • titleBar.activeForeground#EAE2D9
  • titleBar.border#2E2B29
  • titleBar.inactiveBackground#292624
  • titleBar.inactiveForeground#6E6259
  • tree.indentGuidesStroke#2E2B29
  • widget.shadow#2E2B29

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