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#5FBDB4
  • activityBar.background#141518
  • activityBar.border#2A2D33
  • activityBar.foreground#DCE1E8
  • activityBar.inactiveForeground#787880
  • activityBarBadge.background#5FBDB4
  • activityBarBadge.foreground#FFFFFF
  • badge.background#5FBDB4
  • badge.foreground#FFFFFF
  • button.background#2F3238
  • button.foreground#DCE1E8
  • button.hoverBackground#2E414A
  • button.secondaryBackground#282B30
  • button.secondaryForeground#DCE1E8
  • checkbox.background#1B1C1F
  • checkbox.border#2A2D33
  • checkbox.foreground#DCE1E8
  • diffEditor.diagonalFill#2A2D33
  • diffEditor.insertedLineBackground#33887799
  • diffEditor.insertedTextBackground#33887799
  • diffEditor.removedLineBackground#66444499
  • diffEditor.removedTextBackground#66444499
  • disabledForeground#787880
  • dropdown.background#25282D
  • dropdown.border#2A2D33
  • dropdown.foreground#DCE1E8
  • dropdown.listBackground#25282D
  • editor.background#1B1C1F
  • editor.findMatchBackground#DBC18F
  • editor.findMatchForeground#1A1C20
  • editor.findMatchHighlightBackground#2E414A
  • editor.foldBackground#1F2225
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#293D47
  • editor.lineHighlightBackground#23252A
  • editor.rangeHighlightBackground#2E414A
  • editor.selectionBackground#2E4650
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#3A505A
  • editor.wordHighlightStrongBackground#3A505A
  • editorBracketHighlight.foreground1#5FBDB4
  • editorBracketHighlight.foreground2#DBC18F
  • editorBracketHighlight.foreground3#3B99A8
  • editorBracketHighlight.foreground4#71B3E3
  • editorBracketHighlight.foreground5#A8D0F5
  • editorBracketHighlight.foreground6#DDD88E
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#2E414A
  • editorBracketMatch.border#5FBDB4
  • editorCursor.foreground#5FBDB4
  • editorGroupHeader.noTabsBackground#16171A
  • editorGroupHeader.tabsBackground#16171A
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#6BD1C9
  • editorIndentGuide.activeBackground1#5FBDB4
  • editorIndentGuide.background1#2A2D33
  • editorLineNumber.activeForeground#5FBDB4
  • editorLineNumber.foreground#8A8F9A
  • editorRuler.foreground#2A2D33
  • editorWhitespace.foreground#2A2D33
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#2E4650
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#2E414A
  • focusBorder#5FBDB444
  • foreground#DCE1E8
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#5FBDB4
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#787880
  • gitDecoration.modifiedResourceForeground#6BD1C9
  • gitDecoration.submoduleResourceForeground#DDD88E
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#C8CCD4
  • input.background#1B1C1F
  • input.border#2A2D33
  • input.foreground#DCE1E8
  • input.placeholderForeground#787880
  • inputOption.activeBackground#2E4650
  • inputOption.activeBorder#5FBDB4
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#2E4650
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#2E4650
  • list.focusForeground#FFFFFF
  • list.highlightForeground#5FBDB4
  • list.hoverBackground#2E414A
  • list.inactiveFocusBackground#293D47
  • list.inactiveSelectionBackground#293D47
  • menu.background#25282D
  • menu.border#2A2D3333
  • menu.foreground#DCE1E8
  • menu.selectionBackground#2E4650
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2A2D33
  • menubar.selectionBackground#2E414A
  • menubar.selectionForeground#DCE1E8
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#5FBDB488
  • minimapSlider.background#282B3033
  • minimapSlider.hoverBackground#2E414A55
  • notificationCenterHeader.background#16171A
  • notifications.background#17191C
  • notifications.border#2A2D33
  • notifications.foreground#DCE1E8
  • panel.background#16171A
  • panel.border#2A2D33
  • panelTitle.activeBorder#5FBDB4
  • panelTitle.activeForeground#DCE1E8
  • panelTitle.inactiveForeground#787880
  • peekView.border#5FBDB4
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#2E414A
  • peekViewResult.background#17191C
  • peekViewResult.matchHighlightBackground#2E414A
  • peekViewResult.selectionBackground#2E4650
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#16171A
  • peekViewTitleDescription.foreground#787880
  • peekViewTitleLabel.foreground#DCE1E8
  • pickerGroup.border#2A2D33
  • pickerGroup.foreground#5FBDB4
  • progressBar.background#5FBDB4
  • quickInput.background#25282D
  • quickInput.foreground#DCE1E8
  • scrollbar.shadow#2A2D33
  • scrollbarSlider.activeBackground#5FBDB4
  • scrollbarSlider.background#282B30
  • scrollbarSlider.hoverBackground#2E414A
  • selection.background#2E4650
  • sideBar.background#16171A
  • sideBar.border#2A2D33
  • sideBar.foreground#DCE1E8
  • sideBarSectionHeader.background#16171A
  • sideBarSectionHeader.border#2A2D33
  • sideBarSectionHeader.foreground#DCE1E8
  • sideBarTitle.foreground#DCE1E8
  • statusBar.background#16171A
  • statusBar.border#2A2D33
  • statusBar.debuggingBackground#2E4650
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#DCE1E8
  • statusBar.noFolderBackground#16171A
  • statusBarItem.activeBackground#2E414A
  • statusBarItem.hoverBackground#2E414A
  • statusBarItem.remoteBackground#5FBDB4
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#5FBDB4
  • tab.activeForeground#DCE1E8
  • tab.activeModifiedBorder#5FBDB4
  • tab.border#2A2D33
  • tab.hoverBackground#2E414A
  • tab.inactiveBackground#2A2D33
  • 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#2E4650
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#5FBDB4
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#5FBDB4
  • textLink.foreground#5FBDB4
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#16171A
  • titleBar.activeForeground#DCE1E8
  • titleBar.border#2A2D33
  • titleBar.inactiveBackground#2A2D33
  • titleBar.inactiveForeground#787880
  • tree.indentGuidesStroke#2A2D33
  • widget.shadow#2A2D33

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