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#5FD1F5
  • activityBar.background#141518
  • activityBar.border#2C2F38
  • activityBar.foreground#E4E6EE
  • activityBar.inactiveForeground#7C8199
  • activityBarBadge.background#5FD1F5
  • activityBarBadge.foreground#0F1116
  • badge.background#5FD1F5
  • badge.foreground#0F1116
  • button.background#2A2D38
  • button.foreground#E6E8F0
  • button.hoverBackground#2D3144
  • button.secondaryBackground#282B36
  • button.secondaryForeground#E4E6EE
  • checkbox.background#1B1C1F
  • checkbox.border#2C2F38
  • checkbox.foreground#E4E6EE
  • diffEditor.diagonalFill#2C2F38
  • diffEditor.insertedLineBackground#2E6C6699
  • diffEditor.insertedTextBackground#2E6C6699
  • diffEditor.removedLineBackground#4E3A4699
  • diffEditor.removedTextBackground#4E3A4699
  • disabledForeground#7C8199
  • dropdown.background#232630
  • dropdown.border#2C2F38
  • dropdown.foreground#E4E6EE
  • dropdown.listBackground#232630
  • editor.background#1B1C1F
  • editor.findMatchBackground#5FD1F5
  • editor.findMatchForeground#101217
  • editor.findMatchHighlightBackground#2D3144
  • editor.foldBackground#1F2230
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#2F3450
  • editor.lineHighlightBackground#222531
  • editor.rangeHighlightBackground#2D3144
  • editor.selectionBackground#3A3F55
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#3A3E52
  • editor.wordHighlightStrongBackground#3A3E52
  • editorBracketHighlight.foreground1#5FD1F5
  • editorBracketHighlight.foreground2#6CE6E6
  • editorBracketHighlight.foreground3#5D7DFF
  • editorBracketHighlight.foreground4#7A8CFF
  • editorBracketHighlight.foreground5#A6C3FD
  • editorBracketHighlight.foreground6#BA55DA
  • editorBracketHighlight.unexpectedBracket.foreground#E38FB5
  • editorBracketMatch.background#2D3144
  • editorBracketMatch.border#5FD1F5
  • editorCursor.foreground#5FD1F5
  • editorGroupHeader.noTabsBackground#16181F
  • editorGroupHeader.tabsBackground#16181F
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#E38FB5
  • editorGutter.modifiedBackground#BFAEFF
  • editorIndentGuide.activeBackground1#5FD1F5
  • editorIndentGuide.background1#2C2F38
  • editorLineNumber.activeForeground#5FD1F5
  • editorLineNumber.foreground#8A8FA6
  • editorRuler.foreground#2C2F38
  • editorWhitespace.foreground#2C2F38
  • errorForeground#E38FB5
  • extensionButton.prominentBackground#3A3F55
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#2D3144
  • focusBorder#5FD1F544
  • foreground#E4E6EE
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#5FD1F5
  • gitDecoration.deletedResourceForeground#E38FB5
  • gitDecoration.ignoredResourceForeground#7C8199
  • gitDecoration.modifiedResourceForeground#BFAEFF
  • gitDecoration.submoduleResourceForeground#BA55DA
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#C4C8D4
  • input.background#1B1C1F
  • input.border#2C2F38
  • input.foreground#E4E6EE
  • input.placeholderForeground#7C8199
  • inputOption.activeBackground#3A3F55
  • inputOption.activeBorder#5FD1F5
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#3A3F55
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#3A3F55
  • list.focusForeground#FFFFFF
  • list.highlightForeground#5FD1F5
  • list.hoverBackground#2D3144
  • list.inactiveFocusBackground#2F3450
  • list.inactiveSelectionBackground#2F3450
  • menu.background#232630
  • menu.border#2C2F3833
  • menu.foreground#E4E6EE
  • menu.selectionBackground#3A3F55
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2C2F38
  • menubar.selectionBackground#2D3144
  • menubar.selectionForeground#E4E6EE
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#5FD1F588
  • minimapSlider.background#282B3633
  • minimapSlider.hoverBackground#2D314455
  • notificationCenterHeader.background#16181F
  • notifications.background#171923
  • notifications.border#2C2F38
  • notifications.foreground#E4E6EE
  • panel.background#16171A
  • panel.border#2C2F38
  • panelTitle.activeBorder#5FD1F5
  • panelTitle.activeForeground#E4E6EE
  • panelTitle.inactiveForeground#7C8199
  • peekView.border#5FD1F5
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#2D3144
  • peekViewResult.background#171923
  • peekViewResult.matchHighlightBackground#2D3144
  • peekViewResult.selectionBackground#3A3F55
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#16181F
  • peekViewTitleDescription.foreground#7C8199
  • peekViewTitleLabel.foreground#E4E6EE
  • pickerGroup.border#2C2F38
  • pickerGroup.foreground#5FD1F5
  • progressBar.background#5FD1F5
  • quickInput.background#232630
  • quickInput.foreground#E4E6EE
  • scrollbar.shadow#2C2F38
  • scrollbarSlider.activeBackground#5FD1F5
  • scrollbarSlider.background#282B36
  • scrollbarSlider.hoverBackground#2D3144
  • selection.background#3A3F55
  • sideBar.background#16171A
  • sideBar.border#2C2F38
  • sideBar.foreground#E4E6EE
  • sideBarSectionHeader.background#16181F
  • sideBarSectionHeader.border#2C2F38
  • sideBarSectionHeader.foreground#E4E6EE
  • sideBarTitle.foreground#E4E6EE
  • statusBar.background#16181F
  • statusBar.border#2C2F38
  • statusBar.debuggingBackground#3A3F55
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#E4E6EE
  • statusBar.noFolderBackground#16181F
  • statusBarItem.activeBackground#2D3144
  • statusBarItem.hoverBackground#2D3144
  • statusBarItem.remoteBackground#5FD1F5
  • statusBarItem.remoteForeground#0F1116
  • tab.activeBackground#191A1C
  • tab.activeBorder#5FD1F5
  • tab.activeForeground#E4E6EE
  • tab.activeModifiedBorder#5FD1F5
  • tab.border#2C2F38
  • tab.hoverBackground#2D3144
  • tab.inactiveBackground#2C2F38
  • tab.inactiveForeground#7C8199
  • tab.inactiveModifiedBorder#7C8199
  • tab.unfocusedActiveForeground#7C8199
  • tab.unfocusedInactiveForeground#7C8199
  • 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#3A3F55
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#5FD1F5
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#5FD1F5
  • textLink.foreground#5FD1F5
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#16181F
  • titleBar.activeForeground#E4E6EE
  • titleBar.border#2C2F38
  • titleBar.inactiveBackground#2C2F38
  • titleBar.inactiveForeground#7C8199
  • tree.indentGuidesStroke#2C2F38
  • widget.shadow#2C2F38

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