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#E5B35C
  • activityBar.background#141518
  • activityBar.border#2A2B33
  • activityBar.foreground#EAEAF0
  • activityBar.inactiveForeground#787880
  • activityBarBadge.background#E5B35C
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E5B35C
  • badge.foreground#FFFFFF
  • button.background#2F303A
  • button.foreground#EAEAF0
  • button.hoverBackground#3D3A34
  • button.secondaryBackground#282931
  • button.secondaryForeground#EAEAF0
  • checkbox.background#1B1C1F
  • checkbox.border#2A2B33
  • checkbox.foreground#EAEAF0
  • diffEditor.diagonalFill#2A2B33
  • diffEditor.insertedLineBackground#33887799
  • diffEditor.insertedTextBackground#33887799
  • diffEditor.removedLineBackground#66444499
  • diffEditor.removedTextBackground#66444499
  • disabledForeground#787880
  • dropdown.background#25262F
  • dropdown.border#2A2B33
  • dropdown.foreground#EAEAF0
  • dropdown.listBackground#25262F
  • editor.background#1B1C1F
  • editor.findMatchBackground#E5B35C
  • editor.findMatchForeground#1A1B22
  • editor.findMatchHighlightBackground#3D3A34
  • editor.foldBackground#1F2028
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#28324E
  • editor.lineHighlightBackground#24252E
  • editor.rangeHighlightBackground#3D3A34
  • editor.selectionBackground#2D3959
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#4F483A
  • editor.wordHighlightStrongBackground#4F483A
  • editorBracketHighlight.foreground1#E5B35C
  • editorBracketHighlight.foreground2#D99C6C
  • editorBracketHighlight.foreground3#F0C986
  • editorBracketHighlight.foreground4#536EA6
  • editorBracketHighlight.foreground5#88A9F2
  • editorBracketHighlight.foreground6#6F8EB4
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#3D3A34
  • editorBracketMatch.border#E5B35C
  • editorCursor.foreground#E5B35C
  • editorGroupHeader.noTabsBackground#16171C
  • editorGroupHeader.tabsBackground#16171C
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#A0B8F0
  • editorIndentGuide.activeBackground1#E5B35C
  • editorIndentGuide.background1#2A2B33
  • editorLineNumber.activeForeground#E5B35C
  • editorLineNumber.foreground#8A8A93
  • editorRuler.foreground#2A2B33
  • editorWhitespace.foreground#2A2B33
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#2D3959
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#3D3A34
  • focusBorder#E5B35C44
  • foreground#EAEAF0
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#E5B35C
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#787880
  • gitDecoration.modifiedResourceForeground#A0B8F0
  • gitDecoration.submoduleResourceForeground#6F8EB4
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#C8C9D2
  • input.background#1B1C1F
  • input.border#2A2B33
  • input.foreground#EAEAF0
  • input.placeholderForeground#787880
  • inputOption.activeBackground#2D3959
  • inputOption.activeBorder#E5B35C
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#2D3959
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#2D3959
  • list.focusForeground#FFFFFF
  • list.highlightForeground#E5B35C
  • list.hoverBackground#3D3A34
  • list.inactiveFocusBackground#28324E
  • list.inactiveSelectionBackground#28324E
  • menu.background#25262F
  • menu.border#2A2B3333
  • menu.foreground#EAEAF0
  • menu.selectionBackground#2D3959
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2A2B33
  • menubar.selectionBackground#3D3A34
  • menubar.selectionForeground#EAEAF0
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#E5B35C88
  • minimapSlider.background#28293133
  • minimapSlider.hoverBackground#3D3A3455
  • notificationCenterHeader.background#16171C
  • notifications.background#17181D
  • notifications.border#2A2B33
  • notifications.foreground#EAEAF0
  • panel.background#16171A
  • panel.border#2A2B33
  • panelTitle.activeBorder#E5B35C
  • panelTitle.activeForeground#EAEAF0
  • panelTitle.inactiveForeground#787880
  • peekView.border#E5B35C
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#3D3A34
  • peekViewResult.background#17181D
  • peekViewResult.matchHighlightBackground#3D3A34
  • peekViewResult.selectionBackground#2D3959
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#16171C
  • peekViewTitleDescription.foreground#787880
  • peekViewTitleLabel.foreground#EAEAF0
  • pickerGroup.border#2A2B33
  • pickerGroup.foreground#E5B35C
  • progressBar.background#E5B35C
  • quickInput.background#25262F
  • quickInput.foreground#EAEAF0
  • scrollbar.shadow#2A2B33
  • scrollbarSlider.activeBackground#E5B35C
  • scrollbarSlider.background#282931
  • scrollbarSlider.hoverBackground#3D3A34
  • selection.background#2D3959
  • sideBar.background#16171A
  • sideBar.border#2A2B33
  • sideBar.foreground#EAEAF0
  • sideBarSectionHeader.background#16171C
  • sideBarSectionHeader.border#2A2B33
  • sideBarSectionHeader.foreground#EAEAF0
  • sideBarTitle.foreground#EAEAF0
  • statusBar.background#16171C
  • statusBar.border#2A2B33
  • statusBar.debuggingBackground#2D3959
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#EAEAF0
  • statusBar.noFolderBackground#16171C
  • statusBarItem.activeBackground#3D3A34
  • statusBarItem.hoverBackground#3D3A34
  • statusBarItem.remoteBackground#E5B35C
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#E5B35C
  • tab.activeForeground#EAEAF0
  • tab.activeModifiedBorder#E5B35C
  • tab.border#2A2B33
  • tab.hoverBackground#3D3A34
  • tab.inactiveBackground#2E2E33
  • tab.inactiveForeground#787880
  • tab.inactiveModifiedBorder#787880
  • tab.unfocusedActiveForeground#787880
  • tab.unfocusedInactiveForeground#787880
  • 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#2D3959
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#E5B35C
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#E5B35C
  • textLink.foreground#E5B35C
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#16171C
  • titleBar.activeForeground#EAEAF0
  • titleBar.border#2A2B33
  • titleBar.inactiveBackground#2E2E33
  • titleBar.inactiveForeground#787880
  • tree.indentGuidesStroke#2A2B33
  • widget.shadow#2A2B33

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