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#EDE394
  • activityBar.background#141518
  • activityBar.border#2E3138
  • activityBar.foreground#E2E4E8
  • activityBar.inactiveForeground#788088
  • activityBarBadge.background#EDE394
  • activityBarBadge.foreground#FFFFFF
  • badge.background#EDE394
  • badge.foreground#FFFFFF
  • button.background#30343D
  • button.foreground#E4E6E8
  • button.hoverBackground#383E48
  • button.secondaryBackground#272A30
  • button.secondaryForeground#E2E4E8
  • checkbox.background#1B1C1F
  • checkbox.border#2E3138
  • checkbox.foreground#E2E4E8
  • diffEditor.diagonalFill#2E3138
  • diffEditor.insertedLineBackground#3A707099
  • diffEditor.insertedTextBackground#3A707099
  • diffEditor.removedLineBackground#58424899
  • diffEditor.removedTextBackground#58424899
  • disabledForeground#788088
  • dropdown.background#282B32
  • dropdown.border#2E3138
  • dropdown.foreground#E2E4E8
  • dropdown.listBackground#282B32
  • editor.background#1B1C1F
  • editor.findMatchBackground#FFD870
  • editor.findMatchForeground#1C1E22
  • editor.findMatchHighlightBackground#383E48
  • editor.foldBackground#212429
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#2A4048
  • editor.lineHighlightBackground#23262B
  • editor.rangeHighlightBackground#383E48
  • editor.selectionBackground#304850
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#48505A
  • editor.wordHighlightStrongBackground#48505A
  • editorBracketHighlight.foreground1#EDE394
  • editorBracketHighlight.foreground2#FF93C3
  • editorBracketHighlight.foreground3#93E46B
  • editorBracketHighlight.foreground4#5BDD73
  • editorBracketHighlight.foreground5#A2E8B0
  • editorBracketHighlight.foreground6#FDBB68
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#383E48
  • editorBracketMatch.border#EDE394
  • editorCursor.foreground#EDE394
  • editorGroupHeader.noTabsBackground#181A1E
  • editorGroupHeader.tabsBackground#181A1E
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#BCA0E0
  • editorIndentGuide.activeBackground1#EDE394
  • editorIndentGuide.background1#2E3138
  • editorLineNumber.activeForeground#EDE394
  • editorLineNumber.foreground#808890
  • editorRuler.foreground#2E3138
  • editorWhitespace.foreground#2E3138
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#304850
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#383E48
  • focusBorder#EDE39444
  • foreground#E2E4E8
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#EDE394
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#788088
  • gitDecoration.modifiedResourceForeground#BCA0E0
  • gitDecoration.submoduleResourceForeground#FDBB68
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#C2C8CC
  • input.background#1B1C1F
  • input.border#2E3138
  • input.foreground#E2E4E8
  • input.placeholderForeground#788088
  • inputOption.activeBackground#304850
  • inputOption.activeBorder#EDE394
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#304850
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#304850
  • list.focusForeground#FFFFFF
  • list.highlightForeground#EDE394
  • list.hoverBackground#383E48
  • list.inactiveFocusBackground#2A4048
  • list.inactiveSelectionBackground#2A4048
  • menu.background#282B32
  • menu.border#2E313833
  • menu.foreground#E2E4E8
  • menu.selectionBackground#304850
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2E3138
  • menubar.selectionBackground#383E48
  • menubar.selectionForeground#E2E4E8
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#EDE39488
  • minimapSlider.background#272A3033
  • minimapSlider.hoverBackground#383E4855
  • notificationCenterHeader.background#181A1E
  • notifications.background#1A1C20
  • notifications.border#2E3138
  • notifications.foreground#E2E4E8
  • panel.background#16171A
  • panel.border#2E3138
  • panelTitle.activeBorder#EDE394
  • panelTitle.activeForeground#E2E4E8
  • panelTitle.inactiveForeground#788088
  • peekView.border#EDE394
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#383E48
  • peekViewResult.background#1A1C20
  • peekViewResult.matchHighlightBackground#383E48
  • peekViewResult.selectionBackground#304850
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#181A1E
  • peekViewTitleDescription.foreground#788088
  • peekViewTitleLabel.foreground#E2E4E8
  • pickerGroup.border#2E3138
  • pickerGroup.foreground#EDE394
  • progressBar.background#EDE394
  • quickInput.background#282B32
  • quickInput.foreground#E2E4E8
  • scrollbar.shadow#2E3138
  • scrollbarSlider.activeBackground#EDE394
  • scrollbarSlider.background#272A30
  • scrollbarSlider.hoverBackground#383E48
  • selection.background#304850
  • sideBar.background#16171A
  • sideBar.border#2E3138
  • sideBar.foreground#E2E4E8
  • sideBarSectionHeader.background#181A1E
  • sideBarSectionHeader.border#2E3138
  • sideBarSectionHeader.foreground#E2E4E8
  • sideBarTitle.foreground#E2E4E8
  • statusBar.background#181A1E
  • statusBar.border#2E3138
  • statusBar.debuggingBackground#304850
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#E2E4E8
  • statusBar.noFolderBackground#181A1E
  • statusBarItem.activeBackground#383E48
  • statusBarItem.hoverBackground#383E48
  • statusBarItem.remoteBackground#EDE394
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#EDE394
  • tab.activeForeground#E2E4E8
  • tab.activeModifiedBorder#EDE394
  • tab.border#2E3138
  • tab.hoverBackground#383E48
  • tab.inactiveBackground#2E3138
  • tab.inactiveForeground#788088
  • tab.inactiveModifiedBorder#788088
  • tab.unfocusedActiveForeground#788088
  • tab.unfocusedInactiveForeground#788088
  • 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#304850
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#EDE394
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#EDE394
  • textLink.foreground#EDE394
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#181A1E
  • titleBar.activeForeground#E2E4E8
  • titleBar.border#2E3138
  • titleBar.inactiveBackground#2E3138
  • titleBar.inactiveForeground#788088
  • tree.indentGuidesStroke#2E3138
  • widget.shadow#2E3138

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