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#FFDF8D
  • activityBar.background#141518
  • activityBar.border#33313A
  • activityBar.foreground#E8E6EE
  • activityBar.inactiveForeground#807C88
  • activityBarBadge.background#FFDF8D
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FFDF8D
  • badge.foreground#FFFFFF
  • button.background#35333E
  • button.foreground#E8E6EE
  • button.hoverBackground#45383C
  • button.secondaryBackground#29282F
  • button.secondaryForeground#E8E6EE
  • checkbox.background#1B1C1F
  • checkbox.border#33313A
  • checkbox.foreground#E8E6EE
  • diffEditor.diagonalFill#33313A
  • diffEditor.insertedLineBackground#3A707099
  • diffEditor.insertedTextBackground#3A707099
  • diffEditor.removedLineBackground#58424899
  • diffEditor.removedTextBackground#58424899
  • disabledForeground#807C88
  • dropdown.background#2A2930
  • dropdown.border#33313A
  • dropdown.foreground#E8E6EE
  • dropdown.listBackground#2A2930
  • editor.background#1B1C1F
  • editor.findMatchBackground#FFE082
  • editor.findMatchForeground#1F1E24
  • editor.findMatchHighlightBackground#45383C
  • editor.foldBackground#23222A
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#583840
  • editor.lineHighlightBackground#27262D
  • editor.rangeHighlightBackground#45383C
  • editor.selectionBackground#6A4048
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#554A4E
  • editor.wordHighlightStrongBackground#554A4E
  • editorBracketHighlight.foreground1#FFDF8D
  • editorBracketHighlight.foreground2#88D0C0
  • editorBracketHighlight.foreground3#6A67B1
  • editorBracketHighlight.foreground4#E53158FF
  • editorBracketHighlight.foreground5#FF577AFF
  • editorBracketHighlight.foreground6#F9FFB1
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#45383C
  • editorBracketMatch.border#FFDF8D
  • editorCursor.foreground#FFDF8D
  • editorGroupHeader.noTabsBackground#1A191E
  • editorGroupHeader.tabsBackground#1A191E
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#D088A8
  • editorIndentGuide.activeBackground1#FFDF8D
  • editorIndentGuide.background1#33313A
  • editorLineNumber.activeForeground#FFDF8D
  • editorLineNumber.foreground#888490
  • editorRuler.foreground#33313A
  • editorWhitespace.foreground#33313A
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#6A4048
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#45383C
  • focusBorder#FFDF8D44
  • foreground#E8E6EE
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#FFDF8D
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#807C88
  • gitDecoration.modifiedResourceForeground#D088A8
  • gitDecoration.submoduleResourceForeground#F9FFB1
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#C8C4D0
  • input.background#1B1C1F
  • input.border#33313A
  • input.foreground#E8E6EE
  • input.placeholderForeground#807C88
  • inputOption.activeBackground#6A4048
  • inputOption.activeBorder#FFDF8D
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#6A4048
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#6A4048
  • list.focusForeground#FFFFFF
  • list.highlightForeground#FFDF8D
  • list.hoverBackground#45383C
  • list.inactiveFocusBackground#583840
  • list.inactiveSelectionBackground#583840
  • menu.background#2A2930
  • menu.border#33313A33
  • menu.foreground#E8E6EE
  • menu.selectionBackground#6A4048
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#33313A
  • menubar.selectionBackground#45383C
  • menubar.selectionForeground#E8E6EE
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#FFDF8D88
  • minimapSlider.background#29282F33
  • minimapSlider.hoverBackground#45383C55
  • notificationCenterHeader.background#1A191E
  • notifications.background#1D1C22
  • notifications.border#33313A
  • notifications.foreground#E8E6EE
  • panel.background#16171A
  • panel.border#33313A
  • panelTitle.activeBorder#FFDF8D
  • panelTitle.activeForeground#E8E6EE
  • panelTitle.inactiveForeground#807C88
  • peekView.border#FFDF8D
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#45383C
  • peekViewResult.background#1D1C22
  • peekViewResult.matchHighlightBackground#45383C
  • peekViewResult.selectionBackground#6A4048
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#1A191E
  • peekViewTitleDescription.foreground#807C88
  • peekViewTitleLabel.foreground#E8E6EE
  • pickerGroup.border#33313A
  • pickerGroup.foreground#FFDF8D
  • progressBar.background#FFDF8D
  • quickInput.background#2A2930
  • quickInput.foreground#E8E6EE
  • scrollbar.shadow#33313A
  • scrollbarSlider.activeBackground#FFDF8D
  • scrollbarSlider.background#29282F
  • scrollbarSlider.hoverBackground#45383C
  • selection.background#6A4048
  • sideBar.background#16171A
  • sideBar.border#33313A
  • sideBar.foreground#E8E6EE
  • sideBarSectionHeader.background#1A191E
  • sideBarSectionHeader.border#33313A
  • sideBarSectionHeader.foreground#E8E6EE
  • sideBarTitle.foreground#E8E6EE
  • statusBar.background#1A191E
  • statusBar.border#33313A
  • statusBar.debuggingBackground#6A4048
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#E8E6EE
  • statusBar.noFolderBackground#1A191E
  • statusBarItem.activeBackground#45383C
  • statusBarItem.hoverBackground#45383C
  • statusBarItem.remoteBackground#FFDF8D
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#FFDF8D
  • tab.activeForeground#E8E6EE
  • tab.activeModifiedBorder#FFDF8D
  • tab.border#33313A
  • tab.hoverBackground#45383C
  • tab.inactiveBackground#33313A
  • tab.inactiveForeground#807C88
  • tab.inactiveModifiedBorder#807C88
  • tab.unfocusedActiveForeground#807C88
  • tab.unfocusedInactiveForeground#807C88
  • 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#6A4048
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#FFDF8D
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#FFDF8D
  • textLink.foreground#FFDF8D
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#1A191E
  • titleBar.activeForeground#E8E6EE
  • titleBar.border#33313A
  • titleBar.inactiveBackground#33313A
  • titleBar.inactiveForeground#807C88
  • tree.indentGuidesStroke#33313A
  • widget.shadow#33313A

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