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#E58A95
  • activityBar.background#141518
  • activityBar.border#33272A
  • activityBar.foreground#F0E8E8
  • activityBar.inactiveForeground#705860
  • activityBarBadge.background#E58A95
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E58A95
  • badge.foreground#FFFFFF
  • button.background#36292C
  • button.foreground#F0E8E8
  • button.hoverBackground#402830
  • button.secondaryBackground#352A2D
  • button.secondaryForeground#F0E8E8
  • checkbox.background#1B1C1F
  • checkbox.border#33272A
  • checkbox.foreground#F0E8E8
  • diffEditor.diagonalFill#33272A
  • diffEditor.insertedLineBackground#3A707099
  • diffEditor.insertedTextBackground#3A707099
  • diffEditor.removedLineBackground#58424899
  • diffEditor.removedTextBackground#58424899
  • disabledForeground#705860
  • dropdown.background#2A2325
  • dropdown.border#33272A
  • dropdown.foreground#F0E8E8
  • dropdown.listBackground#2A2325
  • editor.background#1B1C1F
  • editor.findMatchBackground#F0A0B0
  • editor.findMatchForeground#181012
  • editor.findMatchHighlightBackground#402830
  • editor.foldBackground#251C1F
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#503840
  • editor.lineHighlightBackground#282022
  • editor.rangeHighlightBackground#402830
  • editor.selectionBackground#804048
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#45353A
  • editor.wordHighlightStrongBackground#45353A
  • editorBracketHighlight.foreground1#E58A95
  • editorBracketHighlight.foreground2#C3AF9C
  • editorBracketHighlight.foreground3#FF546C
  • editorBracketHighlight.foreground4#C53C61
  • editorBracketHighlight.foreground5#F5BAC5
  • editorBracketHighlight.foreground6#E13E7E
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#402830
  • editorBracketMatch.border#E58A95
  • editorCursor.foreground#E58A95
  • editorGroupHeader.noTabsBackground#1A1214
  • editorGroupHeader.tabsBackground#1A1214
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#E58A95
  • editorIndentGuide.activeBackground1#E58A95
  • editorIndentGuide.background1#33272A
  • editorLineNumber.activeForeground#E58A95
  • editorLineNumber.foreground#887078
  • editorRuler.foreground#33272A
  • editorWhitespace.foreground#33272A
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#804048
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#402830
  • focusBorder#E58A9544
  • foreground#F0E8E8
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#E58A95
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#705860
  • gitDecoration.modifiedResourceForeground#E58A95
  • gitDecoration.submoduleResourceForeground#E13E7E
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#B8A0A8
  • input.background#1B1C1F
  • input.border#33272A
  • input.foreground#F0E8E8
  • input.placeholderForeground#705860
  • inputOption.activeBackground#804048
  • inputOption.activeBorder#E58A95
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#804048
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#804048
  • list.focusForeground#FFFFFF
  • list.highlightForeground#E58A95
  • list.hoverBackground#402830
  • list.inactiveFocusBackground#503840
  • list.inactiveSelectionBackground#503840
  • menu.background#2A2325
  • menu.border#33272A33
  • menu.foreground#F0E8E8
  • menu.selectionBackground#804048
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#33272A
  • menubar.selectionBackground#402830
  • menubar.selectionForeground#F0E8E8
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#E58A9588
  • minimapSlider.background#352A2D33
  • minimapSlider.hoverBackground#40283055
  • notificationCenterHeader.background#1A1214
  • notifications.background#161414
  • notifications.border#33272A
  • notifications.foreground#F0E8E8
  • panel.background#16171A
  • panel.border#33272A
  • panelTitle.activeBorder#E58A95
  • panelTitle.activeForeground#F0E8E8
  • panelTitle.inactiveForeground#705860
  • peekView.border#E58A95
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#402830
  • peekViewResult.background#161414
  • peekViewResult.matchHighlightBackground#402830
  • peekViewResult.selectionBackground#804048
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#1A1214
  • peekViewTitleDescription.foreground#705860
  • peekViewTitleLabel.foreground#F0E8E8
  • pickerGroup.border#33272A
  • pickerGroup.foreground#E58A95
  • progressBar.background#E58A95
  • quickInput.background#2A2325
  • quickInput.foreground#F0E8E8
  • scrollbar.shadow#33272A
  • scrollbarSlider.activeBackground#E58A95
  • scrollbarSlider.background#352A2D
  • scrollbarSlider.hoverBackground#402830
  • selection.background#804048
  • sideBar.background#16171A
  • sideBar.border#33272A
  • sideBar.foreground#F0E8E8
  • sideBarSectionHeader.background#1A1214
  • sideBarSectionHeader.border#33272A
  • sideBarSectionHeader.foreground#F0E8E8
  • sideBarTitle.foreground#F0E8E8
  • statusBar.background#1A1214
  • statusBar.border#33272A
  • statusBar.debuggingBackground#804048
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#F0E8E8
  • statusBar.noFolderBackground#1A1214
  • statusBarItem.activeBackground#402830
  • statusBarItem.hoverBackground#402830
  • statusBarItem.remoteBackground#E58A95
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#E58A95
  • tab.activeForeground#F0E8E8
  • tab.activeModifiedBorder#E58A95
  • tab.border#33272A
  • tab.hoverBackground#402830
  • tab.inactiveBackground#2C272E
  • tab.inactiveForeground#705860
  • tab.inactiveModifiedBorder#705860
  • tab.unfocusedActiveForeground#705860
  • tab.unfocusedInactiveForeground#705860
  • 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#804048
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#E58A95
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#E58A95
  • textLink.foreground#E58A95
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#1A1214
  • titleBar.activeForeground#F0E8E8
  • titleBar.border#33272A
  • titleBar.inactiveBackground#2C272E
  • titleBar.inactiveForeground#705860
  • tree.indentGuidesStroke#33272A
  • widget.shadow#33272A

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