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#DFCA98
  • activityBar.background#141518
  • activityBar.border#302C33
  • activityBar.foreground#D8D2D6
  • activityBar.inactiveForeground#666068
  • activityBarBadge.background#DFCA98
  • activityBarBadge.foreground#1A181B
  • badge.background#DFCA98
  • badge.foreground#1A181B
  • button.background#523A47
  • button.foreground#D8D2D6
  • button.hoverBackground#382D33
  • button.secondaryBackground#2C282F
  • button.secondaryForeground#D8D2D6
  • checkbox.background#1B1C1F
  • checkbox.border#302C33
  • checkbox.foreground#D8D2D6
  • diffEditor.diagonalFill#302C33
  • diffEditor.insertedLineBackground#30584A99
  • diffEditor.insertedTextBackground#30584A99
  • diffEditor.removedLineBackground#3D3D3D99
  • diffEditor.removedTextBackground#3D3D3D99
  • disabledForeground#666068
  • dropdown.background#221F25
  • dropdown.border#302C33
  • dropdown.foreground#D8D2D6
  • dropdown.listBackground#221F25
  • editor.background#1B1C1F
  • editor.findMatchBackground#7E3F5A
  • editor.findMatchForeground#F0EFF2
  • editor.findMatchHighlightBackground#382D33
  • editor.foldBackground#382D33
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#4D3843
  • editor.lineHighlightBackground#252228
  • editor.rangeHighlightBackground#382D33
  • editor.selectionBackground#6B2A47
  • editor.selectionForeground#F0EFF2
  • editor.wordHighlightBackground#3D3840
  • editor.wordHighlightStrongBackground#3D3840
  • editorBracketHighlight.foreground1#DFCA98
  • editorBracketHighlight.foreground2#B8A070
  • editorBracketHighlight.foreground3#C75C8F
  • editorBracketHighlight.foreground4#FED48B
  • editorBracketHighlight.foreground5#EED9BF
  • editorBracketHighlight.foreground6#68AAA2
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#382D33
  • editorBracketMatch.border#DFCA98
  • editorCursor.foreground#DFCA98
  • editorGroupHeader.noTabsBackground#1A181B
  • editorGroupHeader.tabsBackground#1A181B
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#DDC8A0
  • editorIndentGuide.activeBackground1#DFCA98
  • editorIndentGuide.background1#302C33
  • editorLineNumber.activeForeground#DFCA98
  • editorLineNumber.foreground#7A707C
  • editorRuler.foreground#302C33
  • editorWhitespace.foreground#302C33
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#6B2A47
  • extensionButton.prominentForeground#F0EFF2
  • extensionButton.prominentHoverBackground#382D33
  • focusBorder#DFCA9844
  • foreground#D8D2D6
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#DFCA98
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#666068
  • gitDecoration.modifiedResourceForeground#DDC8A0
  • gitDecoration.submoduleResourceForeground#68AAA2
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#B8AEC0
  • input.background#1B1C1F
  • input.border#302C33
  • input.foreground#D8D2D6
  • input.placeholderForeground#666068
  • inputOption.activeBackground#6B2A47
  • inputOption.activeBorder#DFCA98
  • inputOption.activeForeground#F0EFF2
  • list.activeSelectionBackground#6B2A47
  • list.activeSelectionForeground#F0EFF2
  • list.focusBackground#6B2A47
  • list.focusForeground#F0EFF2
  • list.highlightForeground#DFCA98
  • list.hoverBackground#382D33
  • list.inactiveFocusBackground#4D3843
  • list.inactiveSelectionBackground#4D3843
  • menu.background#221F25
  • menu.border#302C3333
  • menu.foreground#D8D2D6
  • menu.selectionBackground#6B2A47
  • menu.selectionForeground#F0EFF2
  • menu.separatorBackground#302C33
  • menubar.selectionBackground#382D33
  • menubar.selectionForeground#D8D2D6
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#DFCA9888
  • minimapSlider.background#2C282F33
  • minimapSlider.hoverBackground#382D3355
  • notificationCenterHeader.background#1A181B
  • notifications.background#1F1C22
  • notifications.border#302C33
  • notifications.foreground#D8D2D6
  • panel.background#16171A
  • panel.border#302C33
  • panelTitle.activeBorder#DFCA98
  • panelTitle.activeForeground#D8D2D6
  • panelTitle.inactiveForeground#666068
  • peekView.border#DFCA98
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#382D33
  • peekViewResult.background#1F1C22
  • peekViewResult.matchHighlightBackground#382D33
  • peekViewResult.selectionBackground#6B2A47
  • peekViewResult.selectionForeground#F0EFF2
  • peekViewTitle.background#1A181B
  • peekViewTitleDescription.foreground#666068
  • peekViewTitleLabel.foreground#D8D2D6
  • pickerGroup.border#302C33
  • pickerGroup.foreground#DFCA98
  • progressBar.background#DFCA98
  • quickInput.background#221F25
  • quickInput.foreground#D8D2D6
  • scrollbar.shadow#302C33
  • scrollbarSlider.activeBackground#DFCA98
  • scrollbarSlider.background#2C282F
  • scrollbarSlider.hoverBackground#382D33
  • selection.background#6B2A47
  • sideBar.background#16171A
  • sideBar.border#302C33
  • sideBar.foreground#D8D2D6
  • sideBarSectionHeader.background#1A181B
  • sideBarSectionHeader.border#302C33
  • sideBarSectionHeader.foreground#D8D2D6
  • sideBarTitle.foreground#D8D2D6
  • statusBar.background#1A181B
  • statusBar.border#302C33
  • statusBar.debuggingBackground#6B2A47
  • statusBar.debuggingForeground#F0EFF2
  • statusBar.foreground#D8D2D6
  • statusBar.noFolderBackground#1A181B
  • statusBarItem.activeBackground#382D33
  • statusBarItem.hoverBackground#382D33
  • statusBarItem.remoteBackground#DFCA98
  • statusBarItem.remoteForeground#1A181B
  • tab.activeBackground#191A1C
  • tab.activeBorder#DFCA98
  • tab.activeForeground#D8D2D6
  • tab.activeModifiedBorder#DFCA98
  • tab.border#302C33
  • tab.hoverBackground#382D33
  • tab.inactiveBackground#2A262D
  • tab.inactiveForeground#666068
  • tab.inactiveModifiedBorder#666068
  • tab.unfocusedActiveForeground#666068
  • tab.unfocusedInactiveForeground#666068
  • 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#6B2A47
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#DFCA98
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#DFCA98
  • textLink.foreground#DFCA98
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#1A181B
  • titleBar.activeForeground#D8D2D6
  • titleBar.border#302C33
  • titleBar.inactiveBackground#2A262D
  • titleBar.inactiveForeground#666068
  • tree.indentGuidesStroke#302C33
  • widget.shadow#302C33

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