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#EC8C82
  • activityBar.background#141518
  • activityBar.border#27252A
  • activityBar.foreground#EAEAEA
  • activityBar.inactiveForeground#66646B
  • activityBarBadge.background#EC8C82
  • activityBarBadge.foreground#20100E
  • badge.background#EC8C82
  • badge.foreground#20100E
  • button.background#252328
  • button.foreground#C0BCC5
  • button.hoverBackground#3A2E30
  • button.secondaryBackground#2F2D32
  • button.secondaryForeground#EAEAEA
  • checkbox.background#1B1C1F
  • checkbox.border#27252A
  • checkbox.foreground#EAEAEA
  • diffEditor.diagonalFill#27252A
  • diffEditor.insertedLineBackground#365C3699
  • diffEditor.insertedTextBackground#365C3699
  • diffEditor.removedLineBackground#4A4A4F99
  • diffEditor.removedTextBackground#4A4A4F99
  • disabledForeground#66646B
  • dropdown.background#2A282D
  • dropdown.border#27252A
  • dropdown.foreground#EAEAEA
  • dropdown.listBackground#2A282D
  • editor.background#1B1C1F
  • editor.findMatchBackground#D4A26A
  • editor.findMatchForeground#1A120B
  • editor.findMatchHighlightBackground#3A2E30
  • editor.foldBackground#232125
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#4A3A3F
  • editor.lineHighlightBackground#222023
  • editor.rangeHighlightBackground#3A2E30
  • editor.selectionBackground#A93737
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#3D3842
  • editor.wordHighlightStrongBackground#3D3842
  • editorBracketHighlight.foreground1#EC8C82
  • editorBracketHighlight.foreground2#A93737
  • editorBracketHighlight.foreground3#EC8C82
  • editorBracketHighlight.foreground4#E15C4B
  • editorBracketHighlight.foreground5#F2B0A8
  • editorBracketHighlight.foreground6#CC2E3C
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#3A2E30
  • editorBracketMatch.border#EC8C82
  • editorCursor.foreground#EC8C82
  • editorGroupHeader.noTabsBackground#161518
  • editorGroupHeader.tabsBackground#161518
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#D4A26A
  • editorIndentGuide.activeBackground1#EC8C82
  • editorIndentGuide.background1#27252A
  • editorLineNumber.activeForeground#EC8C82
  • editorLineNumber.foreground#8A888D
  • editorRuler.foreground#27252A
  • editorWhitespace.foreground#27252A
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#A93737
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#3A2E30
  • focusBorder#EC8C8244
  • foreground#EAEAEA
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#EC8C82
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#66646B
  • gitDecoration.modifiedResourceForeground#D4A26A
  • gitDecoration.submoduleResourceForeground#CC2E3C
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#B0AEB3
  • input.background#1B1C1F
  • input.border#27252A
  • input.foreground#EAEAEA
  • input.placeholderForeground#66646B
  • inputOption.activeBackground#A93737
  • inputOption.activeBorder#EC8C82
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#A93737
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#A93737
  • list.focusForeground#FFFFFF
  • list.highlightForeground#EC8C82
  • list.hoverBackground#3A2E30
  • list.inactiveFocusBackground#4A3A3F
  • list.inactiveSelectionBackground#4A3A3F
  • menu.background#2A282D
  • menu.border#27252A33
  • menu.foreground#EAEAEA
  • menu.selectionBackground#A93737
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#27252A
  • menubar.selectionBackground#3A2E30
  • menubar.selectionForeground#EAEAEA
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#EC8C8288
  • minimapSlider.background#2F2D3233
  • minimapSlider.hoverBackground#3A2E3055
  • notificationCenterHeader.background#161518
  • notifications.background#18171A
  • notifications.border#27252A
  • notifications.foreground#EAEAEA
  • panel.background#16171A
  • panel.border#27252A
  • panelTitle.activeBorder#EC8C82
  • panelTitle.activeForeground#EAEAEA
  • panelTitle.inactiveForeground#66646B
  • peekView.border#EC8C82
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#3A2E30
  • peekViewResult.background#18171A
  • peekViewResult.matchHighlightBackground#3A2E30
  • peekViewResult.selectionBackground#A93737
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#161518
  • peekViewTitleDescription.foreground#66646B
  • peekViewTitleLabel.foreground#EAEAEA
  • pickerGroup.border#27252A
  • pickerGroup.foreground#EC8C82
  • progressBar.background#EC8C82
  • quickInput.background#2A282D
  • quickInput.foreground#EAEAEA
  • scrollbar.shadow#27252A
  • scrollbarSlider.activeBackground#EC8C82
  • scrollbarSlider.background#2F2D32
  • scrollbarSlider.hoverBackground#3A2E30
  • selection.background#A93737
  • sideBar.background#16171A
  • sideBar.border#27252A
  • sideBar.foreground#EAEAEA
  • sideBarSectionHeader.background#161518
  • sideBarSectionHeader.border#27252A
  • sideBarSectionHeader.foreground#EAEAEA
  • sideBarTitle.foreground#EAEAEA
  • statusBar.background#161518
  • statusBar.border#27252A
  • statusBar.debuggingBackground#A93737
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#EAEAEA
  • statusBar.noFolderBackground#161518
  • statusBarItem.activeBackground#3A2E30
  • statusBarItem.hoverBackground#3A2E30
  • statusBarItem.remoteBackground#EC8C82
  • statusBarItem.remoteForeground#20100E
  • tab.activeBackground#191A1C
  • tab.activeBorder#EC8C82
  • tab.activeForeground#EAEAEA
  • tab.activeModifiedBorder#EC8C82
  • tab.border#27252A
  • tab.hoverBackground#3A2E30
  • tab.inactiveBackground#1E1C23
  • tab.inactiveForeground#66646B
  • tab.inactiveModifiedBorder#66646B
  • tab.unfocusedActiveForeground#66646B
  • tab.unfocusedInactiveForeground#66646B
  • 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#A93737
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#EC8C82
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#EC8C82
  • textLink.foreground#EC8C82
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#161518
  • titleBar.activeForeground#EAEAEA
  • titleBar.border#27252A
  • titleBar.inactiveBackground#1E1C23
  • titleBar.inactiveForeground#66646B
  • tree.indentGuidesStroke#27252A
  • widget.shadow#27252A

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