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#6FFFE9
  • activityBar.background#141518
  • activityBar.border#33313A
  • activityBar.foreground#F0F2F5
  • activityBar.inactiveForeground#6B7280
  • activityBarBadge.background#6FFFE9
  • activityBarBadge.foreground#191A1C
  • badge.background#6FFFE9
  • badge.foreground#191A1C
  • button.background#252830
  • button.foreground#E8E6EE
  • button.hoverBackground#45383C
  • button.secondaryBackground#29282F
  • button.secondaryForeground#F0F2F5
  • checkbox.background#1B1C1F
  • checkbox.border#33313A
  • checkbox.foreground#F0F2F5
  • diffEditor.diagonalFill#33313A
  • diffEditor.insertedLineBackground#2A4B4599
  • diffEditor.insertedTextBackground#2A4B4599
  • diffEditor.removedLineBackground#58384099
  • diffEditor.removedTextBackground#58384099
  • disabledForeground#6B7280
  • dropdown.background#252830
  • dropdown.border#33313A
  • dropdown.foreground#F0F2F5
  • dropdown.listBackground#252830
  • editor.background#1B1C1F
  • editor.findMatchBackground#C470E8
  • editor.findMatchForeground#1F1E24
  • editor.findMatchHighlightBackground#45383C
  • editor.foldBackground#23222A
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#352840
  • editor.lineHighlightBackground#27262D
  • editor.rangeHighlightBackground#45383C
  • editor.selectionBackground#463055
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#354A50
  • editor.wordHighlightStrongBackground#354A50
  • editorBracketHighlight.foreground1#6FFFE9
  • editorBracketHighlight.foreground2#7FE4FFFF
  • editorBracketHighlight.foreground3#A5EB7BFF
  • editorBracketHighlight.foreground4#C470E8FF
  • editorBracketHighlight.foreground5#E29DFFFF
  • editorBracketHighlight.foreground6#FF5AEEFF
  • editorBracketHighlight.unexpectedBracket.foreground#FF577A
  • editorBracketMatch.background#45383C
  • editorBracketMatch.border#6FFFE9
  • editorCursor.foreground#6FFFE9
  • editorGroupHeader.noTabsBackground#202226
  • editorGroupHeader.tabsBackground#202226
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#FF577A
  • editorGutter.modifiedBackground#6FFFE9
  • editorIndentGuide.activeBackground1#6FFFE9
  • editorIndentGuide.background1#33313A
  • editorLineNumber.activeForeground#6FFFE9
  • editorLineNumber.foreground#6B7280
  • editorRuler.foreground#33313A
  • editorWhitespace.foreground#33313A
  • errorForeground#FF577A
  • extensionButton.prominentBackground#463055
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#45383C
  • focusBorder#6FFFE944
  • foreground#F0F2F5
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#6FFFE9
  • gitDecoration.deletedResourceForeground#FF577A
  • gitDecoration.ignoredResourceForeground#6B7280
  • gitDecoration.modifiedResourceForeground#6FFFE9
  • gitDecoration.submoduleResourceForeground#FF5AEEFF
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#C8C4D0
  • input.background#1B1C1F
  • input.border#33313A
  • input.foreground#F0F2F5
  • input.placeholderForeground#6B7280
  • inputOption.activeBackground#463055
  • inputOption.activeBorder#6FFFE9
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#463055
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#463055
  • list.focusForeground#FFFFFF
  • list.highlightForeground#6FFFE9
  • list.hoverBackground#45383C
  • list.inactiveFocusBackground#352840
  • list.inactiveSelectionBackground#352840
  • menu.background#252830
  • menu.border#33313A33
  • menu.foreground#F0F2F5
  • menu.selectionBackground#463055
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#33313A
  • menubar.selectionBackground#45383C
  • menubar.selectionForeground#F0F2F5
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#6FFFE988
  • minimapSlider.background#29282F33
  • minimapSlider.hoverBackground#45383C55
  • notificationCenterHeader.background#202226
  • notifications.background#202226
  • notifications.border#33313A
  • notifications.foreground#F0F2F5
  • panel.background#16171A
  • panel.border#33313A
  • panelTitle.activeBorder#6FFFE9
  • panelTitle.activeForeground#F0F2F5
  • panelTitle.inactiveForeground#6B7280
  • peekView.border#6FFFE9
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#45383C
  • peekViewResult.background#202226
  • peekViewResult.matchHighlightBackground#45383C
  • peekViewResult.selectionBackground#463055
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#202226
  • peekViewTitleDescription.foreground#6B7280
  • peekViewTitleLabel.foreground#F0F2F5
  • pickerGroup.border#33313A
  • pickerGroup.foreground#6FFFE9
  • progressBar.background#6FFFE9
  • quickInput.background#252830
  • quickInput.foreground#F0F2F5
  • scrollbar.shadow#33313A
  • scrollbarSlider.activeBackground#6FFFE9
  • scrollbarSlider.background#29282F
  • scrollbarSlider.hoverBackground#45383C
  • selection.background#463055
  • sideBar.background#16171A
  • sideBar.border#33313A
  • sideBar.foreground#F0F2F5
  • sideBarSectionHeader.background#202226
  • sideBarSectionHeader.border#33313A
  • sideBarSectionHeader.foreground#F0F2F5
  • sideBarTitle.foreground#F0F2F5
  • statusBar.background#202226
  • statusBar.border#33313A
  • statusBar.debuggingBackground#463055
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#F0F2F5
  • statusBar.noFolderBackground#202226
  • statusBarItem.activeBackground#45383C
  • statusBarItem.hoverBackground#45383C
  • statusBarItem.remoteBackground#6FFFE9
  • statusBarItem.remoteForeground#191A1C
  • tab.activeBackground#191A1C
  • tab.activeBorder#6FFFE9
  • tab.activeForeground#F0F2F5
  • tab.activeModifiedBorder#6FFFE9
  • tab.border#33313A
  • tab.hoverBackground#45383C
  • tab.inactiveBackground#33313A
  • tab.inactiveForeground#6B7280
  • tab.inactiveModifiedBorder#6B7280
  • tab.unfocusedActiveForeground#6B7280
  • tab.unfocusedInactiveForeground#6B7280
  • 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#463055
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#6FFFE9
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#6FFFE9
  • textLink.foreground#6FFFE9
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#202226
  • titleBar.activeForeground#F0F2F5
  • titleBar.border#33313A
  • titleBar.inactiveBackground#33313A
  • titleBar.inactiveForeground#6B7280
  • tree.indentGuidesStroke#33313A
  • widget.shadow#33313A

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