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#FFE7C1
  • activityBar.background#141518
  • activityBar.border#283036
  • activityBar.foreground#C8D8E0
  • activityBar.inactiveForeground#586870
  • activityBarBadge.background#FFE7C1
  • activityBarBadge.foreground#161A1D
  • badge.background#FFE7C1
  • badge.foreground#161A1D
  • button.background#2D5F6C
  • button.foreground#C8D8E0
  • button.hoverBackground#223038
  • button.secondaryBackground#252D33
  • button.secondaryForeground#C8D8E0
  • checkbox.background#1B1C1F
  • checkbox.border#283036
  • checkbox.foreground#C8D8E0
  • diffEditor.diagonalFill#283036
  • diffEditor.insertedLineBackground#28504099
  • diffEditor.insertedTextBackground#28504099
  • diffEditor.removedLineBackground#38383899
  • diffEditor.removedTextBackground#38383899
  • disabledForeground#586870
  • dropdown.background#1D2226
  • dropdown.border#283036
  • dropdown.foreground#C8D8E0
  • dropdown.listBackground#1D2226
  • editor.background#1B1C1F
  • editor.findMatchBackground#3A7A8A
  • editor.findMatchForeground#E0D8CC
  • editor.findMatchHighlightBackground#223038
  • editor.foldBackground#223038
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#304A54
  • editor.lineHighlightBackground#202529
  • editor.rangeHighlightBackground#223038
  • editor.selectionBackground#2A505C
  • editor.selectionForeground#E0D8CC
  • editor.wordHighlightBackground#333C44
  • editor.wordHighlightStrongBackground#333C44
  • editorBracketHighlight.foreground1#FFE7C1
  • editorBracketHighlight.foreground2#E490B0
  • editorBracketHighlight.foreground3#488EAD
  • editorBracketHighlight.foreground4#FFD698
  • editorBracketHighlight.foreground5#E0D0B0
  • editorBracketHighlight.foreground6#FEBBDF
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#223038
  • editorBracketMatch.border#FFE7C1
  • editorCursor.foreground#FFE7C1
  • editorGroupHeader.noTabsBackground#161A1D
  • editorGroupHeader.tabsBackground#161A1D
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#E0D0B0
  • editorIndentGuide.activeBackground1#FFE7C1
  • editorIndentGuide.background1#283036
  • editorLineNumber.activeForeground#FFE7C1
  • editorLineNumber.foreground#788A99
  • editorRuler.foreground#283036
  • editorWhitespace.foreground#283036
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#2A505C
  • extensionButton.prominentForeground#E0D8CC
  • extensionButton.prominentHoverBackground#223038
  • focusBorder#FFE7C144
  • foreground#C8D8E0
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#FFE7C1
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#586870
  • gitDecoration.modifiedResourceForeground#E0D0B0
  • gitDecoration.submoduleResourceForeground#FEBBDF
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#A8BAC8
  • input.background#1B1C1F
  • input.border#283036
  • input.foreground#C8D8E0
  • input.placeholderForeground#586870
  • inputOption.activeBackground#2A505C
  • inputOption.activeBorder#FFE7C1
  • inputOption.activeForeground#E0D8CC
  • list.activeSelectionBackground#2A505C
  • list.activeSelectionForeground#E0D8CC
  • list.focusBackground#2A505C
  • list.focusForeground#E0D8CC
  • list.highlightForeground#FFE7C1
  • list.hoverBackground#223038
  • list.inactiveFocusBackground#304A54
  • list.inactiveSelectionBackground#304A54
  • menu.background#1D2226
  • menu.border#28303633
  • menu.foreground#C8D8E0
  • menu.selectionBackground#2A505C
  • menu.selectionForeground#E0D8CC
  • menu.separatorBackground#283036
  • menubar.selectionBackground#223038
  • menubar.selectionForeground#C8D8E0
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#FFE7C188
  • minimapSlider.background#252D3333
  • minimapSlider.hoverBackground#22303855
  • notificationCenterHeader.background#161A1D
  • notifications.background#1E2428
  • notifications.border#283036
  • notifications.foreground#C8D8E0
  • panel.background#16171A
  • panel.border#283036
  • panelTitle.activeBorder#FFE7C1
  • panelTitle.activeForeground#C8D8E0
  • panelTitle.inactiveForeground#586870
  • peekView.border#FFE7C1
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#223038
  • peekViewResult.background#1E2428
  • peekViewResult.matchHighlightBackground#223038
  • peekViewResult.selectionBackground#2A505C
  • peekViewResult.selectionForeground#E0D8CC
  • peekViewTitle.background#161A1D
  • peekViewTitleDescription.foreground#586870
  • peekViewTitleLabel.foreground#C8D8E0
  • pickerGroup.border#283036
  • pickerGroup.foreground#FFE7C1
  • progressBar.background#FFE7C1
  • quickInput.background#1D2226
  • quickInput.foreground#C8D8E0
  • scrollbar.shadow#283036
  • scrollbarSlider.activeBackground#FFE7C1
  • scrollbarSlider.background#252D33
  • scrollbarSlider.hoverBackground#223038
  • selection.background#2A505C
  • sideBar.background#16171A
  • sideBar.border#283036
  • sideBar.foreground#C8D8E0
  • sideBarSectionHeader.background#161A1D
  • sideBarSectionHeader.border#283036
  • sideBarSectionHeader.foreground#C8D8E0
  • sideBarTitle.foreground#C8D8E0
  • statusBar.background#161A1D
  • statusBar.border#283036
  • statusBar.debuggingBackground#2A505C
  • statusBar.debuggingForeground#E0D8CC
  • statusBar.foreground#C8D8E0
  • statusBar.noFolderBackground#161A1D
  • statusBarItem.activeBackground#223038
  • statusBarItem.hoverBackground#223038
  • statusBarItem.remoteBackground#FFE7C1
  • statusBarItem.remoteForeground#161A1D
  • tab.activeBackground#191A1C
  • tab.activeBorder#FFE7C1
  • tab.activeForeground#C8D8E0
  • tab.activeModifiedBorder#FFE7C1
  • tab.border#283036
  • tab.hoverBackground#223038
  • tab.inactiveBackground#242A2E
  • tab.inactiveForeground#586870
  • tab.inactiveModifiedBorder#586870
  • tab.unfocusedActiveForeground#586870
  • tab.unfocusedInactiveForeground#586870
  • 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#2A505C
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#FFE7C1
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#FFE7C1
  • textLink.foreground#FFE7C1
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#161A1D
  • titleBar.activeForeground#C8D8E0
  • titleBar.border#283036
  • titleBar.inactiveBackground#242A2E
  • titleBar.inactiveForeground#586870
  • tree.indentGuidesStroke#283036
  • widget.shadow#283036

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