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#D1487B
  • activityBar.background#141518
  • activityBar.border#2F2D33
  • activityBar.foreground#EAE6EE
  • activityBar.inactiveForeground#84808A
  • activityBarBadge.background#D1487B
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D1487B
  • badge.foreground#FFFFFF
  • button.background#312F36
  • button.foreground#EAE6EE
  • button.hoverBackground#4A3E48
  • button.secondaryBackground#28262C
  • button.secondaryForeground#EAE6EE
  • checkbox.background#1B1C1F
  • checkbox.border#2F2D33
  • checkbox.foreground#EAE6EE
  • diffEditor.diagonalFill#2F2D33
  • diffEditor.insertedLineBackground#3A707099
  • diffEditor.insertedTextBackground#3A707099
  • diffEditor.removedLineBackground#58424899
  • diffEditor.removedTextBackground#58424899
  • disabledForeground#84808A
  • dropdown.background#2A282E
  • dropdown.border#2F2D33
  • dropdown.foreground#EAE6EE
  • dropdown.listBackground#2A282E
  • editor.background#1B1C1F
  • editor.findMatchBackground#D8B068
  • editor.findMatchForeground#1B1A1E
  • editor.findMatchHighlightBackground#4A3E48
  • editor.foldBackground#201E23
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#583850
  • editor.lineHighlightBackground#252329
  • editor.rangeHighlightBackground#4A3E48
  • editor.selectionBackground#6A4060
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#5A4E58
  • editor.wordHighlightStrongBackground#5A4E58
  • editorBracketHighlight.foreground1#D1487B
  • editorBracketHighlight.foreground2#D1B5F3
  • editorBracketHighlight.foreground3#B44389
  • editorBracketHighlight.foreground4#FFCC75
  • editorBracketHighlight.foreground5#FFD9AB
  • editorBracketHighlight.foreground6#A273B5
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#4A3E48
  • editorBracketMatch.border#D1487B
  • editorCursor.foreground#D1487B
  • editorGroupHeader.noTabsBackground#17161A
  • editorGroupHeader.tabsBackground#17161A
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#D8D0E0
  • editorIndentGuide.activeBackground1#D1487B
  • editorIndentGuide.background1#2F2D33
  • editorLineNumber.activeForeground#D1487B
  • editorLineNumber.foreground#8C8892
  • editorRuler.foreground#2F2D33
  • editorWhitespace.foreground#2F2D33
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#6A4060
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#4A3E48
  • focusBorder#D1487B44
  • foreground#EAE6EE
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#D1487B
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#84808A
  • gitDecoration.modifiedResourceForeground#D8D0E0
  • gitDecoration.submoduleResourceForeground#A273B5
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#C8C4D0
  • input.background#1B1C1F
  • input.border#2F2D33
  • input.foreground#EAE6EE
  • input.placeholderForeground#84808A
  • inputOption.activeBackground#6A4060
  • inputOption.activeBorder#D1487B
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#6A4060
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#6A4060
  • list.focusForeground#FFFFFF
  • list.highlightForeground#D1487B
  • list.hoverBackground#4A3E48
  • list.inactiveFocusBackground#583850
  • list.inactiveSelectionBackground#583850
  • menu.background#2A282E
  • menu.border#2F2D3333
  • menu.foreground#EAE6EE
  • menu.selectionBackground#6A4060
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2F2D33
  • menubar.selectionBackground#4A3E48
  • menubar.selectionForeground#EAE6EE
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#D1487B88
  • minimapSlider.background#28262C33
  • minimapSlider.hoverBackground#4A3E4855
  • notificationCenterHeader.background#17161A
  • notifications.background#19181C
  • notifications.border#2F2D33
  • notifications.foreground#EAE6EE
  • panel.background#16171A
  • panel.border#2F2D33
  • panelTitle.activeBorder#D1487B
  • panelTitle.activeForeground#EAE6EE
  • panelTitle.inactiveForeground#84808A
  • peekView.border#D1487B
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#4A3E48
  • peekViewResult.background#19181C
  • peekViewResult.matchHighlightBackground#4A3E48
  • peekViewResult.selectionBackground#6A4060
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#17161A
  • peekViewTitleDescription.foreground#84808A
  • peekViewTitleLabel.foreground#EAE6EE
  • pickerGroup.border#2F2D33
  • pickerGroup.foreground#D1487B
  • progressBar.background#D1487B
  • quickInput.background#2A282E
  • quickInput.foreground#EAE6EE
  • scrollbar.shadow#2F2D33
  • scrollbarSlider.activeBackground#D1487B
  • scrollbarSlider.background#28262C
  • scrollbarSlider.hoverBackground#4A3E48
  • selection.background#6A4060
  • sideBar.background#16171A
  • sideBar.border#2F2D33
  • sideBar.foreground#EAE6EE
  • sideBarSectionHeader.background#17161A
  • sideBarSectionHeader.border#2F2D33
  • sideBarSectionHeader.foreground#EAE6EE
  • sideBarTitle.foreground#EAE6EE
  • statusBar.background#17161A
  • statusBar.border#2F2D33
  • statusBar.debuggingBackground#6A4060
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#EAE6EE
  • statusBar.noFolderBackground#17161A
  • statusBarItem.activeBackground#4A3E48
  • statusBarItem.hoverBackground#4A3E48
  • statusBarItem.remoteBackground#D1487B
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#D1487B
  • tab.activeForeground#EAE6EE
  • tab.activeModifiedBorder#D1487B
  • tab.border#2F2D33
  • tab.hoverBackground#4A3E48
  • tab.inactiveBackground#2F2D33
  • tab.inactiveForeground#84808A
  • tab.inactiveModifiedBorder#84808A
  • tab.unfocusedActiveForeground#84808A
  • tab.unfocusedInactiveForeground#84808A
  • 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#6A4060
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#D1487B
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#D1487B
  • textLink.foreground#D1487B
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#17161A
  • titleBar.activeForeground#EAE6EE
  • titleBar.border#2F2D33
  • titleBar.inactiveBackground#2F2D33
  • titleBar.inactiveForeground#84808A
  • tree.indentGuidesStroke#2F2D33
  • widget.shadow#2F2D33

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#D8D0E0bold italic
variable.other.jsdoc, meta.other.type.phpdoc, variable.parameter.jsdoc#D1B5F3
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.other, keyword.declaration, storage.type, storage.modifier#B44389
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template#D1B5F3
constant.character.escape, constant.character.unicode#D1B5F3
invalid.illegal.escape#FFCC75
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#D8D0E0
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, variable.other.constant, support.constant#D8D0E0
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#FFD9AB
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#D1487B
variable.parameter, meta.function.parameter variable, meta.parameter#F0C0D8
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#D8B068
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#FFCC75
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#FFCC75
entity.name.tag, meta.tag.sgml, punctuation.definition.tag#FFCC75
entity.other.attribute-name, entity.other.attribute-name.html, meta.tag entity.other.attribute-name#D1487B
string.quoted.double.html, string.quoted.single.html, meta.attribute-with-value.html string#D1B5F3
constant.character.entity, punctuation.definition.entity.html#D8D0E0
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.decorator#D1487B
support.type.property-name, support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, meta.property-name#D8D0E0
support.constant.property-value, support.constant.color, support.constant.font-name, meta.property-value#D1B5F3
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#B44389
string.regexp, string.regexp.character-class, constant.other.character-class.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp#D1B5F3
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, keyword.operator.or.regexp#FFCC75
support.type.property-name.json, meta.structure.dictionary.key.json string, meta.mapping.key string#D1487B
entity.name.tag.yaml, meta.mapping.key.yaml string#D1487B
punctuation.definition.function.kotlin, keyword.operator.arrow.kotlin#B44389
markup.heading, markup.heading.markdown, entity.name.section.markdown#B44389bold
markup.bold, punctuation.definition.bold#FFCC75bold
markup.italic, punctuation.definition.italic#F0C0D8italic
markup.inline.raw, markup.raw.inline, markup.raw.block#D1B5F3
markup.underline.link, string.other.link, meta.link#D1487B
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
Nanahoshi Theme Suite by Nanahoshi - VS Code Theme