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#00BFFF
  • activityBar.background#141518
  • activityBar.border#282A31
  • activityBar.foreground#F0F4F8
  • activityBar.inactiveForeground#78909C
  • activityBarBadge.background#00BFFF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#00BFFF
  • badge.foreground#FFFFFF
  • button.background#2C313C
  • button.foreground#F0F4F8
  • button.hoverBackground#2E3C4E
  • button.secondaryBackground#1A1D24
  • button.secondaryForeground#F0F4F8
  • checkbox.background#1B1C1F
  • checkbox.border#282A31
  • checkbox.foreground#F0F4F8
  • diffEditor.diagonalFill#282A31
  • diffEditor.insertedLineBackground#295A3B99
  • diffEditor.insertedTextBackground#295A3B99
  • diffEditor.removedLineBackground#5A292999
  • diffEditor.removedTextBackground#5A292999
  • disabledForeground#78909C
  • dropdown.background#242730
  • dropdown.border#282A31
  • dropdown.foreground#F0F4F8
  • dropdown.listBackground#242730
  • editor.background#1B1C1F
  • editor.findMatchBackground#00BFFF
  • editor.findMatchForeground#1F1E24
  • editor.findMatchHighlightBackground#2E3C4E
  • editor.foldBackground#20232A
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#1B324D
  • editor.lineHighlightBackground#23262E
  • editor.rangeHighlightBackground#2E3C4E
  • editor.selectionBackground#194A7A
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#31465A
  • editor.wordHighlightStrongBackground#31465A
  • editorBracketHighlight.foreground1#00BFFF
  • editorBracketHighlight.foreground2#FF89EEFF
  • editorBracketHighlight.foreground3#3B67FFFF
  • editorBracketHighlight.foreground4#EF55B4FF
  • editorBracketHighlight.foreground5#FF99D5FF
  • editorBracketHighlight.foreground6#A485F7FF
  • editorBracketHighlight.unexpectedBracket.foreground#FF3366
  • editorBracketMatch.background#2E3C4E
  • editorBracketMatch.border#00BFFF
  • editorCursor.foreground#00BFFF
  • editorGroupHeader.noTabsBackground#141518
  • editorGroupHeader.tabsBackground#141518
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#FF3366
  • editorGutter.modifiedBackground#FFB74D
  • editorIndentGuide.activeBackground1#00BFFF
  • editorIndentGuide.background1#282A31
  • editorLineNumber.activeForeground#00BFFF
  • editorLineNumber.foreground#546E7A
  • editorRuler.foreground#282A31
  • editorWhitespace.foreground#282A31
  • errorForeground#FF3366
  • extensionButton.prominentBackground#194A7A
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#2E3C4E
  • focusBorder#00BFFF44
  • foreground#F0F4F8
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#00BFFF
  • gitDecoration.deletedResourceForeground#FF3366
  • gitDecoration.ignoredResourceForeground#78909C
  • gitDecoration.modifiedResourceForeground#FFB74D
  • gitDecoration.submoduleResourceForeground#A485F7FF
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#B0BEC5
  • input.background#1B1C1F
  • input.border#282A31
  • input.foreground#F0F4F8
  • input.placeholderForeground#78909C
  • inputOption.activeBackground#194A7A
  • inputOption.activeBorder#00BFFF
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#194A7A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#194A7A
  • list.focusForeground#FFFFFF
  • list.highlightForeground#00BFFF
  • list.hoverBackground#2E3C4E
  • list.inactiveFocusBackground#1B324D
  • list.inactiveSelectionBackground#1B324D
  • menu.background#242730
  • menu.border#282A3133
  • menu.foreground#F0F4F8
  • menu.selectionBackground#194A7A
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#282A31
  • menubar.selectionBackground#2E3C4E
  • menubar.selectionForeground#F0F4F8
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#00BFFF88
  • minimapSlider.background#1A1D2433
  • minimapSlider.hoverBackground#2E3C4E55
  • notificationCenterHeader.background#141518
  • notifications.background#1A1C21
  • notifications.border#282A31
  • notifications.foreground#F0F4F8
  • panel.background#16171A
  • panel.border#282A31
  • panelTitle.activeBorder#00BFFF
  • panelTitle.activeForeground#F0F4F8
  • panelTitle.inactiveForeground#78909C
  • peekView.border#00BFFF
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#2E3C4E
  • peekViewResult.background#1A1C21
  • peekViewResult.matchHighlightBackground#2E3C4E
  • peekViewResult.selectionBackground#194A7A
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#141518
  • peekViewTitleDescription.foreground#78909C
  • peekViewTitleLabel.foreground#F0F4F8
  • pickerGroup.border#282A31
  • pickerGroup.foreground#00BFFF
  • progressBar.background#00BFFF
  • quickInput.background#242730
  • quickInput.foreground#F0F4F8
  • scrollbar.shadow#282A31
  • scrollbarSlider.activeBackground#00BFFF
  • scrollbarSlider.background#1A1D24
  • scrollbarSlider.hoverBackground#2E3C4E
  • selection.background#194A7A
  • sideBar.background#16171A
  • sideBar.border#282A31
  • sideBar.foreground#F0F4F8
  • sideBarSectionHeader.background#141518
  • sideBarSectionHeader.border#282A31
  • sideBarSectionHeader.foreground#F0F4F8
  • sideBarTitle.foreground#F0F4F8
  • statusBar.background#141518
  • statusBar.border#282A31
  • statusBar.debuggingBackground#194A7A
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#F0F4F8
  • statusBar.noFolderBackground#141518
  • statusBarItem.activeBackground#2E3C4E
  • statusBarItem.hoverBackground#2E3C4E
  • statusBarItem.remoteBackground#00BFFF
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#00BFFF
  • tab.activeForeground#F0F4F8
  • tab.activeModifiedBorder#00BFFF
  • tab.border#282A31
  • tab.hoverBackground#2E3C4E
  • tab.inactiveBackground#282A31
  • tab.inactiveForeground#78909C
  • tab.inactiveModifiedBorder#78909C
  • tab.unfocusedActiveForeground#78909C
  • tab.unfocusedInactiveForeground#78909C
  • 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#194A7A
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#00BFFF
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#00BFFF
  • textLink.foreground#00BFFF
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#141518
  • titleBar.activeForeground#F0F4F8
  • titleBar.border#282A31
  • titleBar.inactiveBackground#282A31
  • titleBar.inactiveForeground#78909C
  • tree.indentGuidesStroke#282A31
  • widget.shadow#282A31

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#FFB74Dbold italic
variable.other.jsdoc, meta.other.type.phpdoc, variable.parameter.jsdoc#FF89EEFF
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.other, keyword.declaration, storage.type, storage.modifier#3B67FFFF
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template#FF89EEFF
constant.character.escape, constant.character.unicode#FF89EEFF
invalid.illegal.escape#EF55B4FF
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#FF9800
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, variable.other.constant, support.constant#FF9800
entity.name.class, entity.name.type.class, entity.name.type, entity.other.inherited-class, support.class, meta.class entity.name#EF55B4FF
entity.name.type.instance, support.type, storage.type.generic, entity.name.type.parameter, meta.type.annotation entity.name.type#EF55B4FF
entity.name.interface, entity.name.type.interface, entity.name.type.enum#FF99D5FF
entity.name.function, entity.name.function.constructor, entity.name.function.destructor#EF55B4FF
meta.function-call, meta.function-call entity.name.function, variable.function, support.function#00BFFF
variable.parameter, meta.function.parameter variable, meta.parameter#E1BEE7
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#FDD796FF
variable.language, variable.language.this, variable.language.self, variable.language.super#EF55B4FF
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.type#3B67FFFF
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#3B67FFFF
entity.name.tag, meta.tag.sgml, punctuation.definition.tag#3B67FFFF
entity.other.attribute-name, entity.other.attribute-name.html, meta.tag entity.other.attribute-name#65B1E2FF
string.quoted.double.html, string.quoted.single.html, meta.attribute-with-value.html string#FF89EEFF
constant.character.entity, punctuation.definition.entity.html#FF9800
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.decorator#00BFFF
support.type.property-name, support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, meta.property-name#FFB74D
support.constant.property-value, support.constant.color, support.constant.font-name, meta.property-value#FF89EEFF
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.id, entity.other.attribute-name.class.css#EF55B4FF
keyword.control.at-rule, keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import#3B67FFFF
string.regexp, string.regexp.character-class, constant.other.character-class.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp#FF89EEFF
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, keyword.operator.or.regexp#3B67FFFF
support.type.property-name.json, meta.structure.dictionary.key.json string, meta.mapping.key string#00BFFF
entity.name.tag.yaml, meta.mapping.key.yaml string#00BFFF
punctuation.definition.function.kotlin, keyword.operator.arrow.kotlin#3B67FFFF
markup.heading, markup.heading.markdown, entity.name.section.markdown#3B67FFFFbold
markup.bold, punctuation.definition.bold#EF55B4FFbold
markup.italic, punctuation.definition.italic#E1BEE7italic
markup.inline.raw, markup.raw.inline, markup.raw.block#FF89EEFF
markup.underline.link, string.other.link, meta.link#00BFFF
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#EF55B4FF
invalid, invalid.illegal#FF3366