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#F060B0
  • activityBar.background#141518
  • activityBar.border#2A2733
  • activityBar.foreground#ECE8F5
  • activityBar.inactiveForeground#605870
  • activityBarBadge.background#F060B0
  • activityBarBadge.foreground#1A0810
  • badge.background#F060B0
  • badge.foreground#1A0810
  • button.background#25222C
  • button.foreground#C8C0D8
  • button.hoverBackground#302840
  • button.secondaryBackground#2D2A35
  • button.secondaryForeground#ECE8F5
  • checkbox.background#1B1C1F
  • checkbox.border#2A2733
  • checkbox.foreground#ECE8F5
  • diffEditor.diagonalFill#2A2733
  • diffEditor.insertedLineBackground#365C3699
  • diffEditor.insertedTextBackground#365C3699
  • diffEditor.removedLineBackground#4A4A4F99
  • diffEditor.removedTextBackground#4A4A4F99
  • disabledForeground#605870
  • dropdown.background#282530
  • dropdown.border#2A2733
  • dropdown.foreground#ECE8F5
  • dropdown.listBackground#282530
  • editor.background#1B1C1F
  • editor.findMatchBackground#E0C070
  • editor.findMatchForeground#251E10
  • editor.findMatchHighlightBackground#302840
  • editor.foldBackground#1F1C25
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#483860
  • editor.lineHighlightBackground#222028
  • editor.rangeHighlightBackground#302840
  • editor.selectionBackground#503878
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#3A3545
  • editor.wordHighlightStrongBackground#3A3545
  • editorBracketHighlight.foreground1#F060B0
  • editorBracketHighlight.foreground2#F98FC3
  • editorBracketHighlight.foreground3#4A68D8
  • editorBracketHighlight.foreground4#E0C070
  • editorBracketHighlight.foreground5#E2CD97
  • editorBracketHighlight.foreground6#71C1E8
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#302840
  • editorBracketMatch.border#F060B0
  • editorCursor.foreground#F060B0
  • editorGroupHeader.noTabsBackground#121015
  • editorGroupHeader.tabsBackground#121015
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#E3A6FF
  • editorIndentGuide.activeBackground1#F060B0
  • editorIndentGuide.background1#2A2733
  • editorLineNumber.activeForeground#F060B0
  • editorLineNumber.foreground#787088
  • editorRuler.foreground#2A2733
  • editorWhitespace.foreground#2A2733
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#503878
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#302840
  • focusBorder#F060B044
  • foreground#ECE8F5
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#F060B0
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#605870
  • gitDecoration.modifiedResourceForeground#E3A6FF
  • gitDecoration.submoduleResourceForeground#71C1E8
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#A8A0B8
  • input.background#1B1C1F
  • input.border#2A2733
  • input.foreground#ECE8F5
  • input.placeholderForeground#605870
  • inputOption.activeBackground#503878
  • inputOption.activeBorder#F060B0
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#503878
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#503878
  • list.focusForeground#FFFFFF
  • list.highlightForeground#F060B0
  • list.hoverBackground#302840
  • list.inactiveFocusBackground#483860
  • list.inactiveSelectionBackground#483860
  • menu.background#282530
  • menu.border#2A273333
  • menu.foreground#ECE8F5
  • menu.selectionBackground#503878
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2A2733
  • menubar.selectionBackground#302840
  • menubar.selectionForeground#ECE8F5
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#F060B088
  • minimapSlider.background#2D2A3533
  • minimapSlider.hoverBackground#30284055
  • notificationCenterHeader.background#121015
  • notifications.background#15131A
  • notifications.border#2A2733
  • notifications.foreground#ECE8F5
  • panel.background#16171A
  • panel.border#2A2733
  • panelTitle.activeBorder#F060B0
  • panelTitle.activeForeground#ECE8F5
  • panelTitle.inactiveForeground#605870
  • peekView.border#F060B0
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#302840
  • peekViewResult.background#15131A
  • peekViewResult.matchHighlightBackground#302840
  • peekViewResult.selectionBackground#503878
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#121015
  • peekViewTitleDescription.foreground#605870
  • peekViewTitleLabel.foreground#ECE8F5
  • pickerGroup.border#2A2733
  • pickerGroup.foreground#F060B0
  • progressBar.background#F060B0
  • quickInput.background#282530
  • quickInput.foreground#ECE8F5
  • scrollbar.shadow#2A2733
  • scrollbarSlider.activeBackground#F060B0
  • scrollbarSlider.background#2D2A35
  • scrollbarSlider.hoverBackground#302840
  • selection.background#503878
  • sideBar.background#16171A
  • sideBar.border#2A2733
  • sideBar.foreground#ECE8F5
  • sideBarSectionHeader.background#121015
  • sideBarSectionHeader.border#2A2733
  • sideBarSectionHeader.foreground#ECE8F5
  • sideBarTitle.foreground#ECE8F5
  • statusBar.background#121015
  • statusBar.border#2A2733
  • statusBar.debuggingBackground#503878
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#ECE8F5
  • statusBar.noFolderBackground#121015
  • statusBarItem.activeBackground#302840
  • statusBarItem.hoverBackground#302840
  • statusBarItem.remoteBackground#F060B0
  • statusBarItem.remoteForeground#1A0810
  • tab.activeBackground#191A1C
  • tab.activeBorder#F060B0
  • tab.activeForeground#ECE8F5
  • tab.activeModifiedBorder#F060B0
  • tab.border#2A2733
  • tab.hoverBackground#302840
  • tab.inactiveBackground#26232E
  • 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#503878
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#F060B0
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#F060B0
  • textLink.foreground#F060B0
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#121015
  • titleBar.activeForeground#ECE8F5
  • titleBar.border#2A2733
  • titleBar.inactiveBackground#26232E
  • 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#E3A6FFbold italic
variable.other.jsdoc, meta.other.type.phpdoc, variable.parameter.jsdoc#F98FC3
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.other, keyword.declaration, storage.type, storage.modifier#4A68D8
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template#F98FC3
constant.character.escape, constant.character.unicode#F98FC3
invalid.illegal.escape#E0C070
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#D858A0
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, variable.other.constant, support.constant#D858A0
entity.name.class, entity.name.type.class, entity.name.type, entity.other.inherited-class, support.class, meta.class entity.name#E0C070
entity.name.type.instance, support.type, storage.type.generic, entity.name.type.parameter, meta.type.annotation entity.name.type#E0C070
entity.name.interface, entity.name.type.interface, entity.name.type.enum#E2CD97
entity.name.function, entity.name.function.constructor, entity.name.function.destructor#E0C070
meta.function-call, meta.function-call entity.name.function, variable.function, support.function#E3A6FF
variable.parameter, meta.function.parameter variable, meta.parameter#B05090
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#9AB9F8
variable.language, variable.language.this, variable.language.self, variable.language.super#E0C070
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.type#6080E0
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#6080E0
entity.name.tag, meta.tag.sgml, punctuation.definition.tag#6080E0
entity.other.attribute-name, entity.other.attribute-name.html, meta.tag entity.other.attribute-name#F060B0
string.quoted.double.html, string.quoted.single.html, meta.attribute-with-value.html string#F98FC3
constant.character.entity, punctuation.definition.entity.html#D858A0
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.decorator#E3A6FF
support.type.property-name, support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, meta.property-name#E3A6FF
support.constant.property-value, support.constant.color, support.constant.font-name, meta.property-value#F98FC3
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.id, entity.other.attribute-name.class.css#E0C070
keyword.control.at-rule, keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import#4A68D8
string.regexp, string.regexp.character-class, constant.other.character-class.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp#F98FC3
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, keyword.operator.or.regexp#6080E0
support.type.property-name.json, meta.structure.dictionary.key.json string, meta.mapping.key string#E3A6FF
entity.name.tag.yaml, meta.mapping.key.yaml string#E3A6FF
punctuation.definition.function.kotlin, keyword.operator.arrow.kotlin#4A68D8
markup.heading, markup.heading.markdown, entity.name.section.markdown#4A68D8bold
markup.bold, punctuation.definition.bold#E0C070bold
markup.italic, punctuation.definition.italic#B05090italic
markup.inline.raw, markup.raw.inline, markup.raw.block#F98FC3
markup.underline.link, string.other.link, meta.link#F060B0
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#E0C070
invalid, invalid.illegal#D85A8C
Nanahoshi Theme Suite by Nanahoshi - VS Code Theme