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#D8AA5A
  • activityBar.background#141518
  • activityBar.border#302A26
  • activityBar.foreground#EDEAE6
  • activityBar.inactiveForeground#706058
  • activityBarBadge.background#D8AA5A
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D8AA5A
  • badge.foreground#FFFFFF
  • button.background#2E2824
  • button.foreground#F0EDE8
  • button.hoverBackground#403028
  • button.secondaryBackground#2F2B28
  • button.secondaryForeground#EDEAE6
  • checkbox.background#1B1C1F
  • checkbox.border#302A26
  • checkbox.foreground#EDEAE6
  • diffEditor.diagonalFill#302A26
  • diffEditor.insertedLineBackground#3A707099
  • diffEditor.insertedTextBackground#3A707099
  • diffEditor.removedLineBackground#58484299
  • diffEditor.removedTextBackground#58484299
  • disabledForeground#706058
  • dropdown.background#282522
  • dropdown.border#302A26
  • dropdown.foreground#EDEAE6
  • dropdown.listBackground#282522
  • editor.background#1B1C1F
  • editor.findMatchBackground#F2C888
  • editor.findMatchForeground#181210
  • editor.findMatchHighlightBackground#403028
  • editor.foldBackground#211E1B
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#504038
  • editor.lineHighlightBackground#24211E
  • editor.rangeHighlightBackground#403028
  • editor.selectionBackground#685A42
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#453A35
  • editor.wordHighlightStrongBackground#453A35
  • editorBracketHighlight.foreground1#D8AA5A
  • editorBracketHighlight.foreground2#9EC7E4
  • editorBracketHighlight.foreground3#BF4C4C
  • editorBracketHighlight.foreground4#D8AA5A
  • editorBracketHighlight.foreground5#FFE5A6
  • editorBracketHighlight.foreground6#FF9B56
  • editorBracketHighlight.unexpectedBracket.foreground#D65A5A
  • editorBracketMatch.background#403028
  • editorBracketMatch.border#D8AA5A
  • editorCursor.foreground#D8AA5A
  • editorGroupHeader.noTabsBackground#161412
  • editorGroupHeader.tabsBackground#161412
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D65A5A
  • editorGutter.modifiedBackground#D8AA5A
  • editorIndentGuide.activeBackground1#D8AA5A
  • editorIndentGuide.background1#302A26
  • editorLineNumber.activeForeground#D8AA5A
  • editorLineNumber.foreground#887870
  • editorRuler.foreground#302A26
  • editorWhitespace.foreground#302A26
  • errorForeground#D65A5A
  • extensionButton.prominentBackground#685A42
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#403028
  • focusBorder#D8AA5A44
  • foreground#EDEAE6
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#D8AA5A
  • gitDecoration.deletedResourceForeground#D65A5A
  • gitDecoration.ignoredResourceForeground#706058
  • gitDecoration.modifiedResourceForeground#D8AA5A
  • gitDecoration.submoduleResourceForeground#FF9B56
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#D0B8A0
  • input.background#1B1C1F
  • input.border#302A26
  • input.foreground#EDEAE6
  • input.placeholderForeground#706058
  • inputOption.activeBackground#685A42
  • inputOption.activeBorder#D8AA5A
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#685A42
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#685A42
  • list.focusForeground#FFFFFF
  • list.highlightForeground#D8AA5A
  • list.hoverBackground#403028
  • list.inactiveFocusBackground#504038
  • list.inactiveSelectionBackground#504038
  • menu.background#282522
  • menu.border#302A2633
  • menu.foreground#EDEAE6
  • menu.selectionBackground#685A42
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#302A26
  • menubar.selectionBackground#403028
  • menubar.selectionForeground#EDEAE6
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#D8AA5A88
  • minimapSlider.background#2F2B2833
  • minimapSlider.hoverBackground#40302855
  • notificationCenterHeader.background#161412
  • notifications.background#181614
  • notifications.border#302A26
  • notifications.foreground#EDEAE6
  • panel.background#16171A
  • panel.border#302A26
  • panelTitle.activeBorder#D8AA5A
  • panelTitle.activeForeground#EDEAE6
  • panelTitle.inactiveForeground#706058
  • peekView.border#D8AA5A
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#403028
  • peekViewResult.background#181614
  • peekViewResult.matchHighlightBackground#403028
  • peekViewResult.selectionBackground#685A42
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#161412
  • peekViewTitleDescription.foreground#706058
  • peekViewTitleLabel.foreground#EDEAE6
  • pickerGroup.border#302A26
  • pickerGroup.foreground#D8AA5A
  • progressBar.background#D8AA5A
  • quickInput.background#282522
  • quickInput.foreground#EDEAE6
  • scrollbar.shadow#302A26
  • scrollbarSlider.activeBackground#D8AA5A
  • scrollbarSlider.background#2F2B28
  • scrollbarSlider.hoverBackground#403028
  • selection.background#685A42
  • sideBar.background#16171A
  • sideBar.border#302A26
  • sideBar.foreground#EDEAE6
  • sideBarSectionHeader.background#161412
  • sideBarSectionHeader.border#302A26
  • sideBarSectionHeader.foreground#EDEAE6
  • sideBarTitle.foreground#EDEAE6
  • statusBar.background#161412
  • statusBar.border#302A26
  • statusBar.debuggingBackground#685A42
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#EDEAE6
  • statusBar.noFolderBackground#161412
  • statusBarItem.activeBackground#403028
  • statusBarItem.hoverBackground#403028
  • statusBarItem.remoteBackground#D8AA5A
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#D8AA5A
  • tab.activeForeground#EDEAE6
  • tab.activeModifiedBorder#D8AA5A
  • tab.border#302A26
  • tab.hoverBackground#403028
  • tab.inactiveBackground#2A2623
  • tab.inactiveForeground#706058
  • tab.inactiveModifiedBorder#706058
  • tab.unfocusedActiveForeground#706058
  • tab.unfocusedInactiveForeground#706058
  • 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#685A42
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#D8AA5A
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#D8AA5A
  • textLink.foreground#D8AA5A
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#161412
  • titleBar.activeForeground#EDEAE6
  • titleBar.border#302A26
  • titleBar.inactiveBackground#2A2623
  • titleBar.inactiveForeground#706058
  • tree.indentGuidesStroke#302A26
  • widget.shadow#302A26

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