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#63B1E6
  • activityBar.background#141518
  • activityBar.border#282A33
  • activityBar.foreground#EAEFF5
  • activityBar.inactiveForeground#586070
  • activityBarBadge.background#63B1E6
  • activityBarBadge.foreground#FFFFFF
  • badge.background#63B1E6
  • badge.foreground#FFFFFF
  • button.background#2A2D36
  • button.foreground#E8ECF0
  • button.hoverBackground#283040
  • button.secondaryBackground#2D2F35
  • button.secondaryForeground#EAEFF5
  • checkbox.background#1B1C1F
  • checkbox.border#282A33
  • checkbox.foreground#EAEFF5
  • diffEditor.diagonalFill#282A33
  • diffEditor.insertedLineBackground#3A707099
  • diffEditor.insertedTextBackground#3A707099
  • diffEditor.removedLineBackground#48425899
  • diffEditor.removedTextBackground#48425899
  • disabledForeground#586070
  • dropdown.background#23252A
  • dropdown.border#282A33
  • dropdown.foreground#EAEFF5
  • dropdown.listBackground#23252A
  • editor.background#1B1C1F
  • editor.findMatchBackground#A0C8F0
  • editor.findMatchForeground#101218
  • editor.findMatchHighlightBackground#283040
  • editor.foldBackground#1C1E25
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#384050
  • editor.lineHighlightBackground#202228
  • editor.rangeHighlightBackground#283040
  • editor.selectionBackground#406880
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#353A45
  • editor.wordHighlightStrongBackground#353A45
  • editorBracketHighlight.foreground1#63B1E6
  • editorBracketHighlight.foreground2#E5DCAB
  • editorBracketHighlight.foreground3#4C70B0
  • editorBracketHighlight.foreground4#3EA1E5
  • editorBracketHighlight.foreground5#79BBE8
  • editorBracketHighlight.foreground6#AA89F3FF
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#283040
  • editorBracketMatch.border#63B1E6
  • editorCursor.foreground#63B1E6
  • editorGroupHeader.noTabsBackground#14151A
  • editorGroupHeader.tabsBackground#14151A
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#63B1E6
  • editorIndentGuide.activeBackground1#63B1E6
  • editorIndentGuide.background1#282A33
  • editorLineNumber.activeForeground#63B1E6
  • editorLineNumber.foreground#707888
  • editorRuler.foreground#282A33
  • editorWhitespace.foreground#282A33
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#406880
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#283040
  • focusBorder#63B1E644
  • foreground#EAEFF5
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#63B1E6
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#586070
  • gitDecoration.modifiedResourceForeground#63B1E6
  • gitDecoration.submoduleResourceForeground#AA89F3FF
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#A0A8B8
  • input.background#1B1C1F
  • input.border#282A33
  • input.foreground#EAEFF5
  • input.placeholderForeground#586070
  • inputOption.activeBackground#406880
  • inputOption.activeBorder#63B1E6
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#406880
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#406880
  • list.focusForeground#FFFFFF
  • list.highlightForeground#63B1E6
  • list.hoverBackground#283040
  • list.inactiveFocusBackground#384050
  • list.inactiveSelectionBackground#384050
  • menu.background#23252A
  • menu.border#282A3333
  • menu.foreground#EAEFF5
  • menu.selectionBackground#406880
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#282A33
  • menubar.selectionBackground#283040
  • menubar.selectionForeground#EAEFF5
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#63B1E688
  • minimapSlider.background#2D2F3533
  • minimapSlider.hoverBackground#28304055
  • notificationCenterHeader.background#14151A
  • notifications.background#16171E
  • notifications.border#282A33
  • notifications.foreground#EAEFF5
  • panel.background#16171A
  • panel.border#282A33
  • panelTitle.activeBorder#63B1E6
  • panelTitle.activeForeground#EAEFF5
  • panelTitle.inactiveForeground#586070
  • peekView.border#63B1E6
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#283040
  • peekViewResult.background#16171E
  • peekViewResult.matchHighlightBackground#283040
  • peekViewResult.selectionBackground#406880
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#14151A
  • peekViewTitleDescription.foreground#586070
  • peekViewTitleLabel.foreground#EAEFF5
  • pickerGroup.border#282A33
  • pickerGroup.foreground#63B1E6
  • progressBar.background#63B1E6
  • quickInput.background#23252A
  • quickInput.foreground#EAEFF5
  • scrollbar.shadow#282A33
  • scrollbarSlider.activeBackground#63B1E6
  • scrollbarSlider.background#2D2F35
  • scrollbarSlider.hoverBackground#283040
  • selection.background#406880
  • sideBar.background#16171A
  • sideBar.border#282A33
  • sideBar.foreground#EAEFF5
  • sideBarSectionHeader.background#14151A
  • sideBarSectionHeader.border#282A33
  • sideBarSectionHeader.foreground#EAEFF5
  • sideBarTitle.foreground#EAEFF5
  • statusBar.background#14151A
  • statusBar.border#282A33
  • statusBar.debuggingBackground#406880
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#EAEFF5
  • statusBar.noFolderBackground#14151A
  • statusBarItem.activeBackground#283040
  • statusBarItem.hoverBackground#283040
  • statusBarItem.remoteBackground#63B1E6
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#63B1E6
  • tab.activeForeground#EAEFF5
  • tab.activeModifiedBorder#63B1E6
  • tab.border#282A33
  • tab.hoverBackground#283040
  • tab.inactiveBackground#252830
  • tab.inactiveForeground#586070
  • tab.inactiveModifiedBorder#586070
  • tab.unfocusedActiveForeground#586070
  • tab.unfocusedInactiveForeground#586070
  • 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#406880
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#63B1E6
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#63B1E6
  • textLink.foreground#63B1E6
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#14151A
  • titleBar.activeForeground#EAEFF5
  • titleBar.border#282A33
  • titleBar.inactiveBackground#252830
  • titleBar.inactiveForeground#586070
  • tree.indentGuidesStroke#282A33
  • widget.shadow#282A33

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