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#A02C68
  • activityBar.background#141518
  • activityBar.border#2A2733
  • activityBar.foreground#E8E8F0
  • activityBar.inactiveForeground#605870
  • activityBarBadge.background#A02C68
  • activityBarBadge.foreground#FFFFFF
  • badge.background#A02C68
  • badge.foreground#FFFFFF
  • button.background#506080
  • button.foreground#FFFFFF
  • button.hoverBackground#302840
  • button.secondaryBackground#2D2A35
  • button.secondaryForeground#E8E8F0
  • checkbox.background#1B1C1F
  • checkbox.border#2A2733
  • checkbox.foreground#E8E8F0
  • diffEditor.diagonalFill#2A2733
  • diffEditor.insertedLineBackground#3A707099
  • diffEditor.insertedTextBackground#3A707099
  • diffEditor.removedLineBackground#4A3F5A99
  • diffEditor.removedTextBackground#4A3F5A99
  • disabledForeground#605870
  • dropdown.background#242430
  • dropdown.border#2A2733
  • dropdown.foreground#E8E8F0
  • dropdown.listBackground#242430
  • editor.background#1B1C1F
  • editor.findMatchBackground#A8F1FF
  • editor.findMatchForeground#0D0F1A
  • editor.findMatchHighlightBackground#302840
  • editor.foldBackground#1F1C25
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#403850
  • editor.lineHighlightBackground#161620
  • editor.rangeHighlightBackground#302840
  • editor.selectionBackground#5C3B5A
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#3A3545
  • editor.wordHighlightStrongBackground#3A3545
  • editorBracketHighlight.foreground1#A02C68
  • editorBracketHighlight.foreground2#60A0E0
  • editorBracketHighlight.foreground3#AC4187
  • editorBracketHighlight.foreground4#686AC2
  • editorBracketHighlight.foreground5#808AE3
  • editorBracketHighlight.foreground6#68AAA2
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#302840
  • editorBracketMatch.border#A02C68
  • editorCursor.foreground#A02C68
  • editorGroupHeader.noTabsBackground#14121A
  • editorGroupHeader.tabsBackground#14121A
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#A02C68
  • editorIndentGuide.activeBackground1#A02C68
  • editorIndentGuide.background1#2A2733
  • editorLineNumber.activeForeground#A02C68
  • editorLineNumber.foreground#5C5C6A
  • editorRuler.foreground#2A2733
  • editorWhitespace.foreground#2A2733
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#5C3B5A
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#302840
  • focusBorder#A02C6844
  • foreground#E8E8F0
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#A02C68
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#605870
  • gitDecoration.modifiedResourceForeground#A02C68
  • gitDecoration.submoduleResourceForeground#68AAA2
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#8888AA
  • input.background#1B1C1F
  • input.border#2A2733
  • input.foreground#E8E8F0
  • input.placeholderForeground#605870
  • inputOption.activeBackground#5C3B5A
  • inputOption.activeBorder#A02C68
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#5C3B5A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#5C3B5A
  • list.focusForeground#FFFFFF
  • list.highlightForeground#A02C68
  • list.hoverBackground#302840
  • list.inactiveFocusBackground#403850
  • list.inactiveSelectionBackground#403850
  • menu.background#242430
  • menu.border#2A273333
  • menu.foreground#E8E8F0
  • menu.selectionBackground#5C3B5A
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2A2733
  • menubar.selectionBackground#302840
  • menubar.selectionForeground#E8E8F0
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#A02C6888
  • minimapSlider.background#2D2A3533
  • minimapSlider.hoverBackground#30284055
  • notificationCenterHeader.background#14121A
  • notifications.background#161620
  • notifications.border#2A2733
  • notifications.foreground#E8E8F0
  • panel.background#16171A
  • panel.border#2A2733
  • panelTitle.activeBorder#A02C68
  • panelTitle.activeForeground#E8E8F0
  • panelTitle.inactiveForeground#605870
  • peekView.border#A02C68
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#302840
  • peekViewResult.background#161620
  • peekViewResult.matchHighlightBackground#302840
  • peekViewResult.selectionBackground#5C3B5A
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#14121A
  • peekViewTitleDescription.foreground#605870
  • peekViewTitleLabel.foreground#E8E8F0
  • pickerGroup.border#2A2733
  • pickerGroup.foreground#A02C68
  • progressBar.background#A02C68
  • quickInput.background#242430
  • quickInput.foreground#E8E8F0
  • scrollbar.shadow#2A2733
  • scrollbarSlider.activeBackground#A02C68
  • scrollbarSlider.background#2D2A35
  • scrollbarSlider.hoverBackground#302840
  • selection.background#5C3B5A
  • sideBar.background#16171A
  • sideBar.border#2A2733
  • sideBar.foreground#E8E8F0
  • sideBarSectionHeader.background#14121A
  • sideBarSectionHeader.border#2A2733
  • sideBarSectionHeader.foreground#E8E8F0
  • sideBarTitle.foreground#E8E8F0
  • statusBar.background#14121A
  • statusBar.border#2A2733
  • statusBar.debuggingBackground#5C3B5A
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#E8E8F0
  • statusBar.noFolderBackground#14121A
  • statusBarItem.activeBackground#302840
  • statusBarItem.hoverBackground#302840
  • statusBarItem.remoteBackground#A02C68
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#A02C68
  • tab.activeForeground#E8E8F0
  • tab.activeModifiedBorder#A02C68
  • tab.border#2A2733
  • tab.hoverBackground#302840
  • tab.inactiveBackground#1E1C23
  • tab.inactiveForeground#605870
  • tab.inactiveModifiedBorder#605870
  • tab.unfocusedActiveForeground#605870
  • tab.unfocusedInactiveForeground#605870
  • 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#5C3B5A
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#A02C68
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#A02C68
  • textLink.foreground#A02C68
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#14121A
  • titleBar.activeForeground#E8E8F0
  • titleBar.border#2A2733
  • titleBar.inactiveBackground#1E1C23
  • titleBar.inactiveForeground#605870
  • tree.indentGuidesStroke#2A2733
  • widget.shadow#2A2733

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#A02C68bold italic
variable.other.jsdoc, meta.other.type.phpdoc, variable.parameter.jsdoc#60A0E0
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.other, keyword.declaration, storage.type, storage.modifier#AC4187
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template#60A0E0
constant.character.escape, constant.character.unicode#60A0E0
invalid.illegal.escape#686AC2
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#9590FF
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, variable.other.constant, support.constant#9590FF
entity.name.class, entity.name.type.class, entity.name.type, entity.other.inherited-class, support.class, meta.class entity.name#686AC2
entity.name.type.instance, support.type, storage.type.generic, entity.name.type.parameter, meta.type.annotation entity.name.type#686AC2
entity.name.interface, entity.name.type.interface, entity.name.type.enum#808AE3
entity.name.function, entity.name.function.constructor, entity.name.function.destructor#686AC2
meta.function-call, meta.function-call entity.name.function, variable.function, support.function#A02C68
variable.parameter, meta.function.parameter variable, meta.parameter#B0A0D8
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#E1A8FF
variable.language, variable.language.this, variable.language.self, variable.language.super#686AC2
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.type#AC4187
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#AC4187
entity.name.tag, meta.tag.sgml, punctuation.definition.tag#AC4187
entity.other.attribute-name, entity.other.attribute-name.html, meta.tag entity.other.attribute-name#A02C68
string.quoted.double.html, string.quoted.single.html, meta.attribute-with-value.html string#60A0E0
constant.character.entity, punctuation.definition.entity.html#9590FF
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.decorator#A02C68
support.type.property-name, support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, meta.property-name#A02C68
support.constant.property-value, support.constant.color, support.constant.font-name, meta.property-value#60A0E0
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.id, entity.other.attribute-name.class.css#686AC2
keyword.control.at-rule, keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import#AC4187
string.regexp, string.regexp.character-class, constant.other.character-class.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp#60A0E0
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, keyword.operator.or.regexp#AC4187
support.type.property-name.json, meta.structure.dictionary.key.json string, meta.mapping.key string#A02C68
entity.name.tag.yaml, meta.mapping.key.yaml string#A02C68
punctuation.definition.function.kotlin, keyword.operator.arrow.kotlin#AC4187
markup.heading, markup.heading.markdown, entity.name.section.markdown#AC4187bold
markup.bold, punctuation.definition.bold#686AC2bold
markup.italic, punctuation.definition.italic#B0A0D8italic
markup.inline.raw, markup.raw.inline, markup.raw.block#60A0E0
markup.underline.link, string.other.link, meta.link#A02C68
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#686AC2
invalid, invalid.illegal#D85A8C
Nanahoshi Theme Suite by Nanahoshi - VS Code Theme