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#E24444
  • activityBar.background#141518
  • activityBar.border#252827
  • activityBar.foreground#F0F0E5
  • activityBar.inactiveForeground#606663
  • activityBarBadge.background#E24444
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E24444
  • badge.foreground#FFFFFF
  • button.background#232625
  • button.foreground#C8CCC9
  • button.hoverBackground#2A3F3A
  • button.secondaryBackground#2D302F
  • button.secondaryForeground#F0F0E5
  • checkbox.background#1B1C1F
  • checkbox.border#252827
  • checkbox.foreground#F0F0E5
  • diffEditor.diagonalFill#252827
  • diffEditor.insertedLineBackground#365C3699
  • diffEditor.insertedTextBackground#365C3699
  • diffEditor.removedLineBackground#4A4A4F99
  • diffEditor.removedTextBackground#4A4A4F99
  • disabledForeground#606663
  • dropdown.background#262928
  • dropdown.border#252827
  • dropdown.foreground#F0F0E5
  • dropdown.listBackground#262928
  • editor.background#1B1C1F
  • editor.findMatchBackground#DDC27A
  • editor.findMatchForeground#201C10
  • editor.findMatchHighlightBackground#2A3F3A
  • editor.foldBackground#1E2120
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#3A5C55
  • editor.lineHighlightBackground#202221
  • editor.rangeHighlightBackground#2A3F3A
  • editor.selectionBackground#3A7C70
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#383C3A
  • editor.wordHighlightStrongBackground#383C3A
  • editorBracketHighlight.foreground1#E24444
  • editorBracketHighlight.foreground2#ABD9E5
  • editorBracketHighlight.foreground3#FF3F8F
  • editorBracketHighlight.foreground4#4E7D82
  • editorBracketHighlight.foreground5#82CABB
  • editorBracketHighlight.foreground6#68AAA2
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#2A3F3A
  • editorBracketMatch.border#E24444
  • editorCursor.foreground#E24444
  • editorGroupHeader.noTabsBackground#121413
  • editorGroupHeader.tabsBackground#121413
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#DDC27A
  • editorIndentGuide.activeBackground1#E24444
  • editorIndentGuide.background1#252827
  • editorLineNumber.activeForeground#E24444
  • editorLineNumber.foreground#7A807E
  • editorRuler.foreground#252827
  • editorWhitespace.foreground#252827
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#3A7C70
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#2A3F3A
  • focusBorder#E2444444
  • foreground#F0F0E5
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#E24444
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#606663
  • gitDecoration.modifiedResourceForeground#DDC27A
  • gitDecoration.submoduleResourceForeground#68AAA2
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#A8ADA9
  • input.background#1B1C1F
  • input.border#252827
  • input.foreground#F0F0E5
  • input.placeholderForeground#606663
  • inputOption.activeBackground#3A7C70
  • inputOption.activeBorder#E24444
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#3A7C70
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#3A7C70
  • list.focusForeground#FFFFFF
  • list.highlightForeground#E24444
  • list.hoverBackground#2A3F3A
  • list.inactiveFocusBackground#3A5C55
  • list.inactiveSelectionBackground#3A5C55
  • menu.background#262928
  • menu.border#25282733
  • menu.foreground#F0F0E5
  • menu.selectionBackground#3A7C70
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#252827
  • menubar.selectionBackground#2A3F3A
  • menubar.selectionForeground#F0F0E5
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#E2444488
  • minimapSlider.background#2D302F33
  • minimapSlider.hoverBackground#2A3F3A55
  • notificationCenterHeader.background#121413
  • notifications.background#141615
  • notifications.border#252827
  • notifications.foreground#F0F0E5
  • panel.background#16171A
  • panel.border#252827
  • panelTitle.activeBorder#E24444
  • panelTitle.activeForeground#F0F0E5
  • panelTitle.inactiveForeground#606663
  • peekView.border#E24444
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#2A3F3A
  • peekViewResult.background#141615
  • peekViewResult.matchHighlightBackground#2A3F3A
  • peekViewResult.selectionBackground#3A7C70
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#121413
  • peekViewTitleDescription.foreground#606663
  • peekViewTitleLabel.foreground#F0F0E5
  • pickerGroup.border#252827
  • pickerGroup.foreground#E24444
  • progressBar.background#E24444
  • quickInput.background#262928
  • quickInput.foreground#F0F0E5
  • scrollbar.shadow#252827
  • scrollbarSlider.activeBackground#E24444
  • scrollbarSlider.background#2D302F
  • scrollbarSlider.hoverBackground#2A3F3A
  • selection.background#3A7C70
  • sideBar.background#16171A
  • sideBar.border#252827
  • sideBar.foreground#F0F0E5
  • sideBarSectionHeader.background#121413
  • sideBarSectionHeader.border#252827
  • sideBarSectionHeader.foreground#F0F0E5
  • sideBarTitle.foreground#F0F0E5
  • statusBar.background#121413
  • statusBar.border#252827
  • statusBar.debuggingBackground#3A7C70
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#F0F0E5
  • statusBar.noFolderBackground#121413
  • statusBarItem.activeBackground#2A3F3A
  • statusBarItem.hoverBackground#2A3F3A
  • statusBarItem.remoteBackground#E24444
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#E24444
  • tab.activeForeground#F0F0E5
  • tab.activeModifiedBorder#E24444
  • tab.border#252827
  • tab.hoverBackground#2A3F3A
  • tab.inactiveBackground#2C272E
  • tab.inactiveForeground#606663
  • tab.inactiveModifiedBorder#606663
  • tab.unfocusedActiveForeground#606663
  • tab.unfocusedInactiveForeground#606663
  • 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#3A7C70
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#E24444
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#E24444
  • textLink.foreground#E24444
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#121413
  • titleBar.activeForeground#F0F0E5
  • titleBar.border#252827
  • titleBar.inactiveBackground#2C272E
  • titleBar.inactiveForeground#606663
  • tree.indentGuidesStroke#252827
  • widget.shadow#252827

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