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#FFC44C
  • activityBar.background#141518
  • activityBar.border#2A2A2E
  • activityBar.foreground#EAEAF2
  • activityBar.inactiveForeground#787880
  • activityBarBadge.background#FFC44C
  • activityBarBadge.foreground#000000
  • badge.background#FFC44C
  • badge.foreground#000000
  • button.background#333338
  • button.foreground#E8E8EE
  • button.hoverBackground#3D382E
  • button.secondaryBackground#28282C
  • button.secondaryForeground#EAEAF2
  • checkbox.background#1B1C1F
  • checkbox.border#2A2A2E
  • checkbox.foreground#EAEAF2
  • diffEditor.diagonalFill#2A2A2E
  • diffEditor.insertedLineBackground#33887799
  • diffEditor.insertedTextBackground#33887799
  • diffEditor.removedLineBackground#66444499
  • diffEditor.removedTextBackground#66444499
  • disabledForeground#787880
  • dropdown.background#252529
  • dropdown.border#2A2A2E
  • dropdown.foreground#EAEAF2
  • dropdown.listBackground#252529
  • editor.background#1B1C1F
  • editor.findMatchBackground#D9E8FF
  • editor.findMatchForeground#19191B
  • editor.findMatchHighlightBackground#3D382E
  • editor.foldBackground#1F1F22
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#4A3D2B
  • editor.lineHighlightBackground#232326
  • editor.rangeHighlightBackground#3D382E
  • editor.selectionBackground#57482D
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#4F4A44
  • editor.wordHighlightStrongBackground#4F4A44
  • editorBracketHighlight.foreground1#FFC44C
  • editorBracketHighlight.foreground2#A1E9FF
  • editorBracketHighlight.foreground3#D9E8FF
  • editorBracketHighlight.foreground4#FFD175
  • editorBracketHighlight.foreground5#FFDE94
  • editorBracketHighlight.foreground6#DD81FB
  • editorBracketHighlight.unexpectedBracket.foreground#D85858
  • editorBracketMatch.background#3D382E
  • editorBracketMatch.border#FFC44C
  • editorCursor.foreground#FFC44C
  • editorGroupHeader.noTabsBackground#151517
  • editorGroupHeader.tabsBackground#151517
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85858
  • editorGutter.modifiedBackground#C99EFF
  • editorIndentGuide.activeBackground1#FFC44C
  • editorIndentGuide.background1#2A2A2E
  • editorLineNumber.activeForeground#FFC44C
  • editorLineNumber.foreground#8A8A93
  • editorRuler.foreground#2A2A2E
  • editorWhitespace.foreground#2A2A2E
  • errorForeground#D85858
  • extensionButton.prominentBackground#57482D
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#3D382E
  • focusBorder#FFC44C44
  • foreground#EAEAF2
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#FFC44C
  • gitDecoration.deletedResourceForeground#D85858
  • gitDecoration.ignoredResourceForeground#787880
  • gitDecoration.modifiedResourceForeground#C99EFF
  • gitDecoration.submoduleResourceForeground#DD81FB
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#C4C4CC
  • input.background#1B1C1F
  • input.border#2A2A2E
  • input.foreground#EAEAF2
  • input.placeholderForeground#787880
  • inputOption.activeBackground#57482D
  • inputOption.activeBorder#FFC44C
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#57482D
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#57482D
  • list.focusForeground#FFFFFF
  • list.highlightForeground#FFC44C
  • list.hoverBackground#3D382E
  • list.inactiveFocusBackground#4A3D2B
  • list.inactiveSelectionBackground#4A3D2B
  • menu.background#252529
  • menu.border#2A2A2E33
  • menu.foreground#EAEAF2
  • menu.selectionBackground#57482D
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2A2A2E
  • menubar.selectionBackground#3D382E
  • menubar.selectionForeground#EAEAF2
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#FFC44C88
  • minimapSlider.background#28282C33
  • minimapSlider.hoverBackground#3D382E55
  • notificationCenterHeader.background#151517
  • notifications.background#171719
  • notifications.border#2A2A2E
  • notifications.foreground#EAEAF2
  • panel.background#16171A
  • panel.border#2A2A2E
  • panelTitle.activeBorder#FFC44C
  • panelTitle.activeForeground#EAEAF2
  • panelTitle.inactiveForeground#787880
  • peekView.border#FFC44C
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#3D382E
  • peekViewResult.background#171719
  • peekViewResult.matchHighlightBackground#3D382E
  • peekViewResult.selectionBackground#57482D
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#151517
  • peekViewTitleDescription.foreground#787880
  • peekViewTitleLabel.foreground#EAEAF2
  • pickerGroup.border#2A2A2E
  • pickerGroup.foreground#FFC44C
  • progressBar.background#FFC44C
  • quickInput.background#252529
  • quickInput.foreground#EAEAF2
  • scrollbar.shadow#2A2A2E
  • scrollbarSlider.activeBackground#FFC44C
  • scrollbarSlider.background#28282C
  • scrollbarSlider.hoverBackground#3D382E
  • selection.background#57482D
  • sideBar.background#16171A
  • sideBar.border#2A2A2E
  • sideBar.foreground#EAEAF2
  • sideBarSectionHeader.background#151517
  • sideBarSectionHeader.border#2A2A2E
  • sideBarSectionHeader.foreground#EAEAF2
  • sideBarTitle.foreground#EAEAF2
  • statusBar.background#151517
  • statusBar.border#2A2A2E
  • statusBar.debuggingBackground#57482D
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#EAEAF2
  • statusBar.noFolderBackground#151517
  • statusBarItem.activeBackground#3D382E
  • statusBarItem.hoverBackground#3D382E
  • statusBarItem.remoteBackground#FFC44C
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#191A1C
  • tab.activeBorder#FFC44C
  • tab.activeForeground#EAEAF2
  • tab.activeModifiedBorder#FFC44C
  • tab.border#2A2A2E
  • tab.hoverBackground#3D382E
  • tab.inactiveBackground#2E2E33
  • tab.inactiveForeground#787880
  • tab.inactiveModifiedBorder#787880
  • tab.unfocusedActiveForeground#787880
  • tab.unfocusedInactiveForeground#787880
  • 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#57482D
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#FFC44C
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#FFC44C
  • textLink.foreground#FFC44C
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#151517
  • titleBar.activeForeground#EAEAF2
  • titleBar.border#2A2A2E
  • titleBar.inactiveBackground#2E2E33
  • titleBar.inactiveForeground#787880
  • tree.indentGuidesStroke#2A2A2E
  • widget.shadow#2A2A2E

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