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#C778DD
  • activityBar.background#141518
  • activityBar.border#2E2C3A
  • activityBar.foreground#DCD7EA
  • activityBar.inactiveForeground#5C586E
  • activityBarBadge.background#C778DD
  • activityBarBadge.foreground#FFFFFF
  • badge.background#C778DD
  • badge.foreground#FFFFFF
  • button.background#2A2834
  • button.foreground#DCD7EA
  • button.hoverBackground#3A364A
  • button.secondaryBackground#282632
  • button.secondaryForeground#DCD7EA
  • checkbox.background#1B1C1F
  • checkbox.border#2E2C3A
  • checkbox.foreground#DCD7EA
  • diffEditor.diagonalFill#2E2C3A
  • diffEditor.insertedLineBackground#98C37999
  • diffEditor.insertedTextBackground#98C37999
  • diffEditor.removedLineBackground#E06C7599
  • diffEditor.removedTextBackground#E06C7599
  • disabledForeground#5C586E
  • dropdown.background#25232F
  • dropdown.border#2E2C3A
  • dropdown.foreground#DCD7EA
  • dropdown.listBackground#25232F
  • editor.background#1B1C1F
  • editor.findMatchBackground#79B8FF
  • editor.findMatchForeground#1C1B24
  • editor.findMatchHighlightBackground#3A364A
  • editor.foldBackground#282632
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#403A59
  • editor.lineHighlightBackground#262430
  • editor.rangeHighlightBackground#3A364A
  • editor.selectionBackground#4A3F66
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#3D3852
  • editor.wordHighlightStrongBackground#3D3852
  • editorBracketHighlight.foreground1#C778DD
  • editorBracketHighlight.foreground2#C4B5FD
  • editorBracketHighlight.foreground3#9272F0
  • editorBracketHighlight.foreground4#5880F5
  • editorBracketHighlight.foreground5#79B8FF
  • editorBracketHighlight.foreground6#E1C59D
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#3A364A
  • editorBracketMatch.border#C778DD
  • editorCursor.foreground#C778DD
  • editorGroupHeader.noTabsBackground#18171F
  • editorGroupHeader.tabsBackground#18171F
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#A388D9
  • editorIndentGuide.activeBackground1#C778DD
  • editorIndentGuide.background1#2E2C3A
  • editorLineNumber.activeForeground#C778DD
  • editorLineNumber.foreground#5C586E
  • editorRuler.foreground#2E2C3A
  • editorWhitespace.foreground#2E2C3A
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#4A3F66
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#3A364A
  • focusBorder#C778DD44
  • foreground#DCD7EA
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#C778DD
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#5C586E
  • gitDecoration.modifiedResourceForeground#A388D9
  • gitDecoration.submoduleResourceForeground#E1C59D
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#C8C0D7
  • input.background#1B1C1F
  • input.border#2E2C3A
  • input.foreground#DCD7EA
  • input.placeholderForeground#5C586E
  • inputOption.activeBackground#4A3F66
  • inputOption.activeBorder#C778DD
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#4A3F66
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#4A3F66
  • list.focusForeground#FFFFFF
  • list.highlightForeground#C778DD
  • list.hoverBackground#3A364A
  • list.inactiveFocusBackground#403A59
  • list.inactiveSelectionBackground#403A59
  • menu.background#25232F
  • menu.border#2E2C3A33
  • menu.foreground#DCD7EA
  • menu.selectionBackground#4A3F66
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2E2C3A
  • menubar.selectionBackground#3A364A
  • menubar.selectionForeground#DCD7EA
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#C778DD88
  • minimapSlider.background#28263233
  • minimapSlider.hoverBackground#3A364A55
  • notificationCenterHeader.background#18171F
  • notifications.background#18171F
  • notifications.border#2E2C3A
  • notifications.foreground#DCD7EA
  • panel.background#16171A
  • panel.border#2E2C3A
  • panelTitle.activeBorder#C778DD
  • panelTitle.activeForeground#DCD7EA
  • panelTitle.inactiveForeground#5C586E
  • peekView.border#C778DD
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#3A364A
  • peekViewResult.background#18171F
  • peekViewResult.matchHighlightBackground#3A364A
  • peekViewResult.selectionBackground#4A3F66
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#18171F
  • peekViewTitleDescription.foreground#5C586E
  • peekViewTitleLabel.foreground#DCD7EA
  • pickerGroup.border#2E2C3A
  • pickerGroup.foreground#C778DD
  • progressBar.background#C778DD
  • quickInput.background#25232F
  • quickInput.foreground#DCD7EA
  • scrollbar.shadow#2E2C3A
  • scrollbarSlider.activeBackground#C778DD
  • scrollbarSlider.background#282632
  • scrollbarSlider.hoverBackground#3A364A
  • selection.background#4A3F66
  • sideBar.background#16171A
  • sideBar.border#2E2C3A
  • sideBar.foreground#DCD7EA
  • sideBarSectionHeader.background#18171F
  • sideBarSectionHeader.border#2E2C3A
  • sideBarSectionHeader.foreground#DCD7EA
  • sideBarTitle.foreground#DCD7EA
  • statusBar.background#18171F
  • statusBar.border#2E2C3A
  • statusBar.debuggingBackground#4A3F66
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#DCD7EA
  • statusBar.noFolderBackground#18171F
  • statusBarItem.activeBackground#3A364A
  • statusBarItem.hoverBackground#3A364A
  • statusBarItem.remoteBackground#C778DD
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#C778DD
  • tab.activeForeground#DCD7EA
  • tab.activeModifiedBorder#C778DD
  • tab.border#2E2C3A
  • tab.hoverBackground#3A364A
  • tab.inactiveBackground#282632
  • tab.inactiveForeground#5C586E
  • tab.inactiveModifiedBorder#5C586E
  • tab.unfocusedActiveForeground#5C586E
  • tab.unfocusedInactiveForeground#5C586E
  • 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#4A3F66
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#C778DD
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#C778DD
  • textLink.foreground#C778DD
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#18171F
  • titleBar.activeForeground#DCD7EA
  • titleBar.border#2E2C3A
  • titleBar.inactiveBackground#282632
  • titleBar.inactiveForeground#5C586E
  • tree.indentGuidesStroke#2E2C3A
  • widget.shadow#2E2C3A

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