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#FFD0D6
  • activityBar.background#141518
  • activityBar.border#31383F
  • activityBar.foreground#D8DEE9
  • activityBar.inactiveForeground#5C6A77
  • activityBarBadge.background#FFD0D6
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FFD0D6
  • badge.foreground#FFFFFF
  • button.background#2A3036
  • button.foreground#D8DEE9
  • button.hoverBackground#3A444F
  • button.secondaryBackground#292E33
  • button.secondaryForeground#D8DEE9
  • checkbox.background#1B1C1F
  • checkbox.border#31383F
  • checkbox.foreground#D8DEE9
  • diffEditor.diagonalFill#31383F
  • diffEditor.insertedLineBackground#98C37999
  • diffEditor.insertedTextBackground#98C37999
  • diffEditor.removedLineBackground#D87C8599
  • diffEditor.removedTextBackground#D87C8599
  • disabledForeground#5C6A77
  • dropdown.background#262B30
  • dropdown.border#31383F
  • dropdown.foreground#D8DEE9
  • dropdown.listBackground#262B30
  • editor.background#1B1C1F
  • editor.findMatchBackground#D89BA7
  • editor.findMatchForeground#202428
  • editor.findMatchHighlightBackground#3A444F
  • editor.foldBackground#292E33
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#3A4652
  • editor.lineHighlightBackground#282D32
  • editor.rangeHighlightBackground#3A444F
  • editor.selectionBackground#405263
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#3D4854
  • editor.wordHighlightStrongBackground#3D4854
  • editorBracketHighlight.foreground1#FFD0D6
  • editorBracketHighlight.foreground2#D1D7A6
  • editorBracketHighlight.foreground3#5EB7C4
  • editorBracketHighlight.foreground4#88C0D0
  • editorBracketHighlight.foreground5#4F8FAF
  • editorBracketHighlight.foreground6#68AAA2
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#3A444F
  • editorBracketMatch.border#FFD0D6
  • editorCursor.foreground#FFD0D6
  • editorGroupHeader.noTabsBackground#1C2023
  • editorGroupHeader.tabsBackground#1C2023
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#B48EAD
  • editorIndentGuide.activeBackground1#FFD0D6
  • editorIndentGuide.background1#31383F
  • editorLineNumber.activeForeground#FFD0D6
  • editorLineNumber.foreground#5C6A77
  • editorRuler.foreground#31383F
  • editorWhitespace.foreground#31383F
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#405263
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#3A444F
  • focusBorder#FFD0D644
  • foreground#D8DEE9
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#FFD0D6
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#5C6A77
  • gitDecoration.modifiedResourceForeground#B48EAD
  • gitDecoration.submoduleResourceForeground#68AAA2
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#B8C0C8
  • input.background#1B1C1F
  • input.border#31383F
  • input.foreground#D8DEE9
  • input.placeholderForeground#5C6A77
  • inputOption.activeBackground#405263
  • inputOption.activeBorder#FFD0D6
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#405263
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#405263
  • list.focusForeground#FFFFFF
  • list.highlightForeground#FFD0D6
  • list.hoverBackground#3A444F
  • list.inactiveFocusBackground#3A4652
  • list.inactiveSelectionBackground#3A4652
  • menu.background#262B30
  • menu.border#31383F33
  • menu.foreground#D8DEE9
  • menu.selectionBackground#405263
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#31383F
  • menubar.selectionBackground#3A444F
  • menubar.selectionForeground#D8DEE9
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#FFD0D688
  • minimapSlider.background#292E3333
  • minimapSlider.hoverBackground#3A444F55
  • notificationCenterHeader.background#1C2023
  • notifications.background#1C2023
  • notifications.border#31383F
  • notifications.foreground#D8DEE9
  • panel.background#16171A
  • panel.border#31383F
  • panelTitle.activeBorder#FFD0D6
  • panelTitle.activeForeground#D8DEE9
  • panelTitle.inactiveForeground#5C6A77
  • peekView.border#FFD0D6
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#3A444F
  • peekViewResult.background#1C2023
  • peekViewResult.matchHighlightBackground#3A444F
  • peekViewResult.selectionBackground#405263
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#1C2023
  • peekViewTitleDescription.foreground#5C6A77
  • peekViewTitleLabel.foreground#D8DEE9
  • pickerGroup.border#31383F
  • pickerGroup.foreground#FFD0D6
  • progressBar.background#FFD0D6
  • quickInput.background#262B30
  • quickInput.foreground#D8DEE9
  • scrollbar.shadow#31383F
  • scrollbarSlider.activeBackground#FFD0D6
  • scrollbarSlider.background#292E33
  • scrollbarSlider.hoverBackground#3A444F
  • selection.background#405263
  • sideBar.background#16171A
  • sideBar.border#31383F
  • sideBar.foreground#D8DEE9
  • sideBarSectionHeader.background#1C2023
  • sideBarSectionHeader.border#31383F
  • sideBarSectionHeader.foreground#D8DEE9
  • sideBarTitle.foreground#D8DEE9
  • statusBar.background#1C2023
  • statusBar.border#31383F
  • statusBar.debuggingBackground#405263
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#D8DEE9
  • statusBar.noFolderBackground#1C2023
  • statusBarItem.activeBackground#3A444F
  • statusBarItem.hoverBackground#3A444F
  • statusBarItem.remoteBackground#FFD0D6
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#FFD0D6
  • tab.activeForeground#D8DEE9
  • tab.activeModifiedBorder#FFD0D6
  • tab.border#31383F
  • tab.hoverBackground#3A444F
  • tab.inactiveBackground#292E33
  • tab.inactiveForeground#5C6A77
  • tab.inactiveModifiedBorder#5C6A77
  • tab.unfocusedActiveForeground#5C6A77
  • tab.unfocusedInactiveForeground#5C6A77
  • 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#405263
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#FFD0D6
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#FFD0D6
  • textLink.foreground#FFD0D6
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#1C2023
  • titleBar.activeForeground#D8DEE9
  • titleBar.border#31383F
  • titleBar.inactiveBackground#292E33
  • titleBar.inactiveForeground#5C6A77
  • tree.indentGuidesStroke#31383F
  • widget.shadow#31383F

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#B48EADbold italic
variable.other.jsdoc, meta.other.type.phpdoc, variable.parameter.jsdoc#D1D7A6
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.other, keyword.declaration, storage.type, storage.modifier#5EB7C4
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template#D1D7A6
constant.character.escape, constant.character.unicode#D1D7A6
invalid.illegal.escape#88C0D0
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#B48EAD
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, variable.other.constant, support.constant#B48EAD
entity.name.class, entity.name.type.class, entity.name.type, entity.other.inherited-class, support.class, meta.class entity.name#88C0D0
entity.name.type.instance, support.type, storage.type.generic, entity.name.type.parameter, meta.type.annotation entity.name.type#88C0D0
entity.name.interface, entity.name.type.interface, entity.name.type.enum#4F8FAF
entity.name.function, entity.name.function.constructor, entity.name.function.destructor#88C0D0
meta.function-call, meta.function-call entity.name.function, variable.function, support.function#FFD0D6
variable.parameter, meta.function.parameter variable, meta.parameter#F1E2AB
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#D8DEE9
variable.language, variable.language.this, variable.language.self, variable.language.super#88C0D0
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.type#FD96AA
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#FD96AA
entity.name.tag, meta.tag.sgml, punctuation.definition.tag#FD96AA
entity.other.attribute-name, entity.other.attribute-name.html, meta.tag entity.other.attribute-name#FFD0D6
string.quoted.double.html, string.quoted.single.html, meta.attribute-with-value.html string#D1D7A6
constant.character.entity, punctuation.definition.entity.html#B48EAD
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.decorator#FFD0D6
support.type.property-name, support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, meta.property-name#B48EAD
support.constant.property-value, support.constant.color, support.constant.font-name, meta.property-value#D1D7A6
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.id, entity.other.attribute-name.class.css#88C0D0
keyword.control.at-rule, keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import#5EB7C4
string.regexp, string.regexp.character-class, constant.other.character-class.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp#D1D7A6
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, keyword.operator.or.regexp#FD96AA
support.type.property-name.json, meta.structure.dictionary.key.json string, meta.mapping.key string#FFD0D6
entity.name.tag.yaml, meta.mapping.key.yaml string#FFD0D6
punctuation.definition.function.kotlin, keyword.operator.arrow.kotlin#5EB7C4
markup.heading, markup.heading.markdown, entity.name.section.markdown#5EB7C4bold
markup.bold, punctuation.definition.bold#88C0D0bold
markup.italic, punctuation.definition.italic#F1E2ABitalic
markup.inline.raw, markup.raw.inline, markup.raw.block#D1D7A6
markup.underline.link, string.other.link, meta.link#FFD0D6
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#88C0D0
invalid, invalid.illegal#D85A8C