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#82AAFF
  • activityBar.background#141518
  • activityBar.border#303950
  • activityBar.foreground#D8DEE9
  • activityBar.inactiveForeground#4C566A
  • activityBarBadge.background#82AAFF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#82AAFF
  • badge.foreground#FFFFFF
  • button.background#2A3145
  • button.foreground#D8DEE9
  • button.hoverBackground#3E4C66
  • button.secondaryBackground#292E39
  • button.secondaryForeground#D8DEE9
  • checkbox.background#1B1C1F
  • checkbox.border#303950
  • checkbox.foreground#D8DEE9
  • diffEditor.diagonalFill#303950
  • diffEditor.insertedLineBackground#A3BE8C99
  • diffEditor.insertedTextBackground#A3BE8C99
  • diffEditor.removedLineBackground#BF616A99
  • diffEditor.removedTextBackground#BF616A99
  • disabledForeground#4C566A
  • dropdown.background#232832
  • dropdown.border#303950
  • dropdown.foreground#D8DEE9
  • dropdown.listBackground#232832
  • editor.background#1B1C1F
  • editor.findMatchBackground#EBCB8B
  • editor.findMatchForeground#2E3440
  • editor.findMatchHighlightBackground#3E4C66
  • editor.foldBackground#282E3A
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#353C4A
  • editor.lineHighlightBackground#2A3145
  • editor.rangeHighlightBackground#3E4C66
  • editor.selectionBackground#405C8A
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#3A4356
  • editor.wordHighlightStrongBackground#3A4356
  • editorBracketHighlight.foreground1#82AAFF
  • editorBracketHighlight.foreground2#B4CDFF
  • editorBracketHighlight.foreground3#82AAFF
  • editorBracketHighlight.foreground4#FFCC75
  • editorBracketHighlight.foreground5#EBCB8B
  • editorBracketHighlight.foreground6#68AAA2
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#3E4C66
  • editorBracketMatch.border#82AAFF
  • editorCursor.foreground#82AAFF
  • editorGroupHeader.noTabsBackground#1A1F2C
  • editorGroupHeader.tabsBackground#1A1F2C
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#B48EAD
  • editorIndentGuide.activeBackground1#82AAFF
  • editorIndentGuide.background1#303950
  • editorLineNumber.activeForeground#82AAFF
  • editorLineNumber.foreground#4C566A
  • editorRuler.foreground#303950
  • editorWhitespace.foreground#303950
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#405C8A
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#3E4C66
  • focusBorder#82AAFF44
  • foreground#D8DEE9
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#82AAFF
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#4C566A
  • gitDecoration.modifiedResourceForeground#B48EAD
  • gitDecoration.submoduleResourceForeground#68AAA2
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#C0C5CE
  • input.background#1B1C1F
  • input.border#303950
  • input.foreground#D8DEE9
  • input.placeholderForeground#4C566A
  • inputOption.activeBackground#405C8A
  • inputOption.activeBorder#82AAFF
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#405C8A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#405C8A
  • list.focusForeground#FFFFFF
  • list.highlightForeground#82AAFF
  • list.hoverBackground#3E4C66
  • list.inactiveFocusBackground#353C4A
  • list.inactiveSelectionBackground#353C4A
  • menu.background#232832
  • menu.border#30395033
  • menu.foreground#D8DEE9
  • menu.selectionBackground#405C8A
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#303950
  • menubar.selectionBackground#3E4C66
  • menubar.selectionForeground#D8DEE9
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#82AAFF88
  • minimapSlider.background#292E3933
  • minimapSlider.hoverBackground#3E4C6655
  • notificationCenterHeader.background#1A1F2C
  • notifications.background#1A1F2C
  • notifications.border#303950
  • notifications.foreground#D8DEE9
  • panel.background#16171A
  • panel.border#303950
  • panelTitle.activeBorder#82AAFF
  • panelTitle.activeForeground#D8DEE9
  • panelTitle.inactiveForeground#4C566A
  • peekView.border#82AAFF
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#3E4C66
  • peekViewResult.background#1A1F2C
  • peekViewResult.matchHighlightBackground#3E4C66
  • peekViewResult.selectionBackground#405C8A
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#1A1F2C
  • peekViewTitleDescription.foreground#4C566A
  • peekViewTitleLabel.foreground#D8DEE9
  • pickerGroup.border#303950
  • pickerGroup.foreground#82AAFF
  • progressBar.background#82AAFF
  • quickInput.background#232832
  • quickInput.foreground#D8DEE9
  • scrollbar.shadow#303950
  • scrollbarSlider.activeBackground#82AAFF
  • scrollbarSlider.background#292E39
  • scrollbarSlider.hoverBackground#3E4C66
  • selection.background#405C8A
  • sideBar.background#16171A
  • sideBar.border#303950
  • sideBar.foreground#D8DEE9
  • sideBarSectionHeader.background#1A1F2C
  • sideBarSectionHeader.border#303950
  • sideBarSectionHeader.foreground#D8DEE9
  • sideBarTitle.foreground#D8DEE9
  • statusBar.background#1A1F2C
  • statusBar.border#303950
  • statusBar.debuggingBackground#405C8A
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#D8DEE9
  • statusBar.noFolderBackground#1A1F2C
  • statusBarItem.activeBackground#3E4C66
  • statusBarItem.hoverBackground#3E4C66
  • statusBarItem.remoteBackground#82AAFF
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#82AAFF
  • tab.activeForeground#D8DEE9
  • tab.activeModifiedBorder#82AAFF
  • tab.border#303950
  • tab.hoverBackground#3E4C66
  • tab.inactiveBackground#292E39
  • tab.inactiveForeground#4C566A
  • tab.inactiveModifiedBorder#4C566A
  • tab.unfocusedActiveForeground#4C566A
  • tab.unfocusedInactiveForeground#4C566A
  • 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#405C8A
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#82AAFF
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#82AAFF
  • textLink.foreground#82AAFF
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#1A1F2C
  • titleBar.activeForeground#D8DEE9
  • titleBar.border#303950
  • titleBar.inactiveBackground#292E39
  • titleBar.inactiveForeground#4C566A
  • tree.indentGuidesStroke#303950
  • widget.shadow#303950

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