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#FF4D4D
  • activityBar.background#141518
  • activityBar.border#2D2422
  • activityBar.foreground#FBE9E7
  • activityBar.inactiveForeground#8D6E63
  • activityBarBadge.background#FF4D4D
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF4D4D
  • badge.foreground#FFFFFF
  • button.background#2A2221
  • button.foreground#FBE9E7
  • button.hoverBackground#3E2723
  • button.secondaryBackground#1A1514
  • button.secondaryForeground#FBE9E7
  • checkbox.background#1B1C1F
  • checkbox.border#2D2422
  • checkbox.foreground#FBE9E7
  • diffEditor.diagonalFill#2D2422
  • diffEditor.insertedLineBackground#3B7A5A99
  • diffEditor.insertedTextBackground#3B7A5A99
  • diffEditor.removedLineBackground#7A2B2B99
  • diffEditor.removedTextBackground#7A2B2B99
  • disabledForeground#8D6E63
  • dropdown.background#221A19
  • dropdown.border#2D2422
  • dropdown.foreground#FBE9E7
  • dropdown.listBackground#221A19
  • editor.background#1B1C1F
  • editor.findMatchBackground#FF4D4D
  • editor.findMatchForeground#1A1514
  • editor.findMatchHighlightBackground#3E2723
  • editor.foldBackground#221A19
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#3E2723
  • editor.lineHighlightBackground#261E1D
  • editor.rangeHighlightBackground#3E2723
  • editor.selectionBackground#4E342E
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#4E342E
  • editor.wordHighlightStrongBackground#4E342E
  • editorBracketHighlight.foreground1#FF4D4D
  • editorBracketHighlight.foreground2#DEEAC5FF
  • editorBracketHighlight.foreground3#FF5252
  • editorBracketHighlight.foreground4#FF80AB
  • editorBracketHighlight.foreground5#B39DDB
  • editorBracketHighlight.foreground6#FFB74D
  • editorBracketHighlight.unexpectedBracket.foreground#FF1744
  • editorBracketMatch.background#3E2723
  • editorBracketMatch.border#FF4D4D
  • editorCursor.foreground#FF4D4D
  • editorGroupHeader.noTabsBackground#161312
  • editorGroupHeader.tabsBackground#161312
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#FF1744
  • editorGutter.modifiedBackground#FF8A80
  • editorIndentGuide.activeBackground1#FF4D4D
  • editorIndentGuide.background1#2D2422
  • editorLineNumber.activeForeground#FF4D4D
  • editorLineNumber.foreground#795548
  • editorRuler.foreground#2D2422
  • editorWhitespace.foreground#2D2422
  • errorForeground#FF1744
  • extensionButton.prominentBackground#4E342E
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#3E2723
  • focusBorder#FF4D4D44
  • foreground#FBE9E7
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#FF4D4D
  • gitDecoration.deletedResourceForeground#FF1744
  • gitDecoration.ignoredResourceForeground#8D6E63
  • gitDecoration.modifiedResourceForeground#FF8A80
  • gitDecoration.submoduleResourceForeground#FFB74D
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#BCAAA4
  • input.background#1B1C1F
  • input.border#2D2422
  • input.foreground#FBE9E7
  • input.placeholderForeground#8D6E63
  • inputOption.activeBackground#4E342E
  • inputOption.activeBorder#FF4D4D
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#4E342E
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#4E342E
  • list.focusForeground#FFFFFF
  • list.highlightForeground#FF4D4D
  • list.hoverBackground#3E2723
  • list.inactiveFocusBackground#3E2723
  • list.inactiveSelectionBackground#3E2723
  • menu.background#221A19
  • menu.border#2D242233
  • menu.foreground#FBE9E7
  • menu.selectionBackground#4E342E
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2D2422
  • menubar.selectionBackground#3E2723
  • menubar.selectionForeground#FBE9E7
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#FF4D4D88
  • minimapSlider.background#1A151433
  • minimapSlider.hoverBackground#3E272355
  • notificationCenterHeader.background#161312
  • notifications.background#1C1716
  • notifications.border#2D2422
  • notifications.foreground#FBE9E7
  • panel.background#16171A
  • panel.border#2D2422
  • panelTitle.activeBorder#FF4D4D
  • panelTitle.activeForeground#FBE9E7
  • panelTitle.inactiveForeground#8D6E63
  • peekView.border#FF4D4D
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#3E2723
  • peekViewResult.background#1C1716
  • peekViewResult.matchHighlightBackground#3E2723
  • peekViewResult.selectionBackground#4E342E
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#161312
  • peekViewTitleDescription.foreground#8D6E63
  • peekViewTitleLabel.foreground#FBE9E7
  • pickerGroup.border#2D2422
  • pickerGroup.foreground#FF4D4D
  • progressBar.background#FF4D4D
  • quickInput.background#221A19
  • quickInput.foreground#FBE9E7
  • scrollbar.shadow#2D2422
  • scrollbarSlider.activeBackground#FF4D4D
  • scrollbarSlider.background#1A1514
  • scrollbarSlider.hoverBackground#3E2723
  • selection.background#4E342E
  • sideBar.background#16171A
  • sideBar.border#2D2422
  • sideBar.foreground#FBE9E7
  • sideBarSectionHeader.background#161312
  • sideBarSectionHeader.border#2D2422
  • sideBarSectionHeader.foreground#FBE9E7
  • sideBarTitle.foreground#FBE9E7
  • statusBar.background#161312
  • statusBar.border#2D2422
  • statusBar.debuggingBackground#4E342E
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FBE9E7
  • statusBar.noFolderBackground#161312
  • statusBarItem.activeBackground#3E2723
  • statusBarItem.hoverBackground#3E2723
  • statusBarItem.remoteBackground#FF4D4D
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#FF4D4D
  • tab.activeForeground#FBE9E7
  • tab.activeModifiedBorder#FF4D4D
  • tab.border#2D2422
  • tab.hoverBackground#3E2723
  • tab.inactiveBackground#261F1E
  • tab.inactiveForeground#8D6E63
  • tab.inactiveModifiedBorder#8D6E63
  • tab.unfocusedActiveForeground#8D6E63
  • tab.unfocusedInactiveForeground#8D6E63
  • 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#4E342E
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#FF4D4D
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#FF4D4D
  • textLink.foreground#FF4D4D
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#161312
  • titleBar.activeForeground#FBE9E7
  • titleBar.border#2D2422
  • titleBar.inactiveBackground#261F1E
  • titleBar.inactiveForeground#8D6E63
  • tree.indentGuidesStroke#2D2422
  • widget.shadow#2D2422

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