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#F4A3C6
  • activityBar.background#141518
  • activityBar.border#2D2E36
  • activityBar.foreground#ECECF2
  • activityBar.inactiveForeground#8A8C98
  • activityBarBadge.background#F4A3C6
  • activityBarBadge.foreground#1A1A1D
  • badge.background#F4A3C6
  • badge.foreground#1A1A1D
  • button.background#2A2B33
  • button.foreground#ECECF2
  • button.hoverBackground#343447
  • button.secondaryBackground#282830
  • button.secondaryForeground#ECECF2
  • checkbox.background#1B1C1F
  • checkbox.border#2D2E36
  • checkbox.foreground#ECECF2
  • diffEditor.diagonalFill#2D2E36
  • diffEditor.insertedLineBackground#3B6F7899
  • diffEditor.insertedTextBackground#3B6F7899
  • diffEditor.removedLineBackground#5A3C4A99
  • diffEditor.removedTextBackground#5A3C4A99
  • disabledForeground#8A8C98
  • dropdown.background#24252D
  • dropdown.border#2D2E36
  • dropdown.foreground#ECECF2
  • dropdown.listBackground#24252D
  • editor.background#1B1C1F
  • editor.findMatchBackground#8FD6F5
  • editor.findMatchForeground#1A1A1D
  • editor.findMatchHighlightBackground#343447
  • editor.foldBackground#20212A
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#3A3147
  • editor.lineHighlightBackground#23242B
  • editor.rangeHighlightBackground#343447
  • editor.selectionBackground#4A3D5A
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#3A3A4A
  • editor.wordHighlightStrongBackground#3A3A4A
  • editorBracketHighlight.foreground1#F4A3C6
  • editorBracketHighlight.foreground2#7FE3E8
  • editorBracketHighlight.foreground3#C989FF
  • editorBracketHighlight.foreground4#6EB3FE
  • editorBracketHighlight.foreground5#FCD0FA
  • editorBracketHighlight.foreground6#8093EC
  • editorBracketHighlight.unexpectedBracket.foreground#E69AB8
  • editorBracketMatch.background#343447
  • editorBracketMatch.border#F4A3C6
  • editorCursor.foreground#F4A3C6
  • editorGroupHeader.noTabsBackground#16171C
  • editorGroupHeader.tabsBackground#16171C
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#E69AB8
  • editorGutter.modifiedBackground#D7BFFF
  • editorIndentGuide.activeBackground1#F4A3C6
  • editorIndentGuide.background1#2D2E36
  • editorLineNumber.activeForeground#F4A3C6
  • editorLineNumber.foreground#8F91A3
  • editorRuler.foreground#2D2E36
  • editorWhitespace.foreground#2D2E36
  • errorForeground#E69AB8
  • extensionButton.prominentBackground#4A3D5A
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#343447
  • focusBorder#F4A3C644
  • foreground#ECECF2
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#F4A3C6
  • gitDecoration.deletedResourceForeground#E69AB8
  • gitDecoration.ignoredResourceForeground#8A8C98
  • gitDecoration.modifiedResourceForeground#D7BFFF
  • gitDecoration.submoduleResourceForeground#8093EC
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#D0D2DC
  • input.background#1B1C1F
  • input.border#2D2E36
  • input.foreground#ECECF2
  • input.placeholderForeground#8A8C98
  • inputOption.activeBackground#4A3D5A
  • inputOption.activeBorder#F4A3C6
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#4A3D5A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#4A3D5A
  • list.focusForeground#FFFFFF
  • list.highlightForeground#F4A3C6
  • list.hoverBackground#343447
  • list.inactiveFocusBackground#3A3147
  • list.inactiveSelectionBackground#3A3147
  • menu.background#24252D
  • menu.border#2D2E3633
  • menu.foreground#ECECF2
  • menu.selectionBackground#4A3D5A
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2D2E36
  • menubar.selectionBackground#343447
  • menubar.selectionForeground#ECECF2
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#F4A3C688
  • minimapSlider.background#28283033
  • minimapSlider.hoverBackground#34344755
  • notificationCenterHeader.background#16171C
  • notifications.background#17171C
  • notifications.border#2D2E36
  • notifications.foreground#ECECF2
  • panel.background#16171A
  • panel.border#2D2E36
  • panelTitle.activeBorder#F4A3C6
  • panelTitle.activeForeground#ECECF2
  • panelTitle.inactiveForeground#8A8C98
  • peekView.border#F4A3C6
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#343447
  • peekViewResult.background#17171C
  • peekViewResult.matchHighlightBackground#343447
  • peekViewResult.selectionBackground#4A3D5A
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#16171C
  • peekViewTitleDescription.foreground#8A8C98
  • peekViewTitleLabel.foreground#ECECF2
  • pickerGroup.border#2D2E36
  • pickerGroup.foreground#F4A3C6
  • progressBar.background#F4A3C6
  • quickInput.background#24252D
  • quickInput.foreground#ECECF2
  • scrollbar.shadow#2D2E36
  • scrollbarSlider.activeBackground#F4A3C6
  • scrollbarSlider.background#282830
  • scrollbarSlider.hoverBackground#343447
  • selection.background#4A3D5A
  • sideBar.background#16171A
  • sideBar.border#2D2E36
  • sideBar.foreground#ECECF2
  • sideBarSectionHeader.background#16171C
  • sideBarSectionHeader.border#2D2E36
  • sideBarSectionHeader.foreground#ECECF2
  • sideBarTitle.foreground#ECECF2
  • statusBar.background#16171C
  • statusBar.border#2D2E36
  • statusBar.debuggingBackground#4A3D5A
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#ECECF2
  • statusBar.noFolderBackground#16171C
  • statusBarItem.activeBackground#343447
  • statusBarItem.hoverBackground#343447
  • statusBarItem.remoteBackground#F4A3C6
  • statusBarItem.remoteForeground#1A1A1D
  • tab.activeBackground#191A1C
  • tab.activeBorder#F4A3C6
  • tab.activeForeground#ECECF2
  • tab.activeModifiedBorder#F4A3C6
  • tab.border#2D2E36
  • tab.hoverBackground#343447
  • tab.inactiveBackground#2D2E36
  • tab.inactiveForeground#8A8C98
  • tab.inactiveModifiedBorder#8A8C98
  • tab.unfocusedActiveForeground#8A8C98
  • tab.unfocusedInactiveForeground#8A8C98
  • 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#4A3D5A
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#F4A3C6
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#F4A3C6
  • textLink.foreground#F4A3C6
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#16171C
  • titleBar.activeForeground#ECECF2
  • titleBar.border#2D2E36
  • titleBar.inactiveBackground#2D2E36
  • titleBar.inactiveForeground#8A8C98
  • tree.indentGuidesStroke#2D2E36
  • widget.shadow#2D2E36

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#D7BFFFbold italic
variable.other.jsdoc, meta.other.type.phpdoc, variable.parameter.jsdoc#7FE3E8
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.other, keyword.declaration, storage.type, storage.modifier#C989FF
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template#7FE3E8
constant.character.escape, constant.character.unicode#7FE3E8
invalid.illegal.escape#6EB3FE
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#D7BFFF
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, variable.other.constant, support.constant#D7BFFF
entity.name.class, entity.name.type.class, entity.name.type, entity.other.inherited-class, support.class, meta.class entity.name#6EB3FE
entity.name.type.instance, support.type, storage.type.generic, entity.name.type.parameter, meta.type.annotation entity.name.type#6EB3FE
entity.name.interface, entity.name.type.interface, entity.name.type.enum#FCD0FA
entity.name.function, entity.name.function.constructor, entity.name.function.destructor#6EB3FE
meta.function-call, meta.function-call entity.name.function, variable.function, support.function#F4A3C6
variable.parameter, meta.function.parameter variable, meta.parameter#E0CFFF
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#FFD6A8
variable.language, variable.language.this, variable.language.self, variable.language.super#6EB3FE
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.type#FFD6A8
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#FFD6A8
entity.name.tag, meta.tag.sgml, punctuation.definition.tag#FFD6A8
entity.other.attribute-name, entity.other.attribute-name.html, meta.tag entity.other.attribute-name#F4A3C6
string.quoted.double.html, string.quoted.single.html, meta.attribute-with-value.html string#7FE3E8
constant.character.entity, punctuation.definition.entity.html#D7BFFF
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.decorator#F4A3C6
support.type.property-name, support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, meta.property-name#D7BFFF
support.constant.property-value, support.constant.color, support.constant.font-name, meta.property-value#7FE3E8
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.id, entity.other.attribute-name.class.css#6EB3FE
keyword.control.at-rule, keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import#C989FF
string.regexp, string.regexp.character-class, constant.other.character-class.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp#7FE3E8
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, keyword.operator.or.regexp#FFD6A8
support.type.property-name.json, meta.structure.dictionary.key.json string, meta.mapping.key string#F4A3C6
entity.name.tag.yaml, meta.mapping.key.yaml string#F4A3C6
punctuation.definition.function.kotlin, keyword.operator.arrow.kotlin#C989FF
markup.heading, markup.heading.markdown, entity.name.section.markdown#C989FFbold
markup.bold, punctuation.definition.bold#6EB3FEbold
markup.italic, punctuation.definition.italic#E0CFFFitalic
markup.inline.raw, markup.raw.inline, markup.raw.block#7FE3E8
markup.underline.link, string.other.link, meta.link#F4A3C6
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#6EB3FE
invalid, invalid.illegal#E69AB8