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.

  • actionBar.toggledBackground#303249FF
  • activityBar.activeBorder#0078D4FF
  • activityBar.background#000000
  • activityBar.border#2B2B2BFF
  • activityBar.foreground#D7D7D7FF
  • activityBar.inactiveForeground#868686FF
  • activityBarBadge.background#0078D4FF
  • activityBarBadge.foreground#FFFFFFFF
  • badge.background#616161FF
  • badge.foreground#F8F8F8FF
  • button.background#0078D4FF
  • button.border#FFFFFF12
  • button.foreground#FFFFFFFF
  • button.hoverBackground#006DC1FF
  • button.secondaryBackground#313131FF
  • button.secondaryForeground#CCCCCCFF
  • button.secondaryHoverBackground#3C3C3CFF
  • chat.slashCommandBackground#283C4BFF
  • chat.slashCommandForeground#0088FFFF
  • checkbox.background#313131FF
  • checkbox.border#3C3C3CFF
  • debugToolBar.background#181818FF
  • descriptionForeground#9D9D9DFF
  • dropdown.background#313131FF
  • dropdown.border#3C3C3CFF
  • dropdown.foreground#CCCCCCFF
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.findMatchBackground#9E6900FF
  • editor.foreground#CCCCCCFF
  • editor.inactiveSelectionBackground#373B41FF
  • editor.selectionHighlightBackground#84C2FF26
  • editorGroup.border#000000
  • editorGroup.dropBackground#000000
  • editorGroup.emptyBackground#000000
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#2B2B2BFF
  • editorGutter.addedBackground#00A01DFF
  • editorGutter.deletedBackground#F80B00FF
  • editorGutter.modifiedBackground#0078D4FF
  • editorIndentGuide.activeBackground1#000000
  • editorIndentGuide.background1#3C3C3CFF
  • editorLineNumber.activeForeground#CCCCCCFF
  • editorLineNumber.foreground#657181FF
  • editorOverviewRuler.border#000309FF
  • editorWidget.background#202020FF
  • errorForeground#F80B00FF
  • focusBorder#0078D4FF
  • foreground#CCCCCCFF
  • icon.foreground#CCCCCCFF
  • input.background#313131FF
  • input.border#3C3C3CFF
  • input.foreground#CCCCCCFF
  • input.placeholderForeground#989898FF
  • inputOption.activeBackground#0079DB82
  • inputOption.activeBorder#0078DBFF
  • keybindingLabel.foreground#CCCCCCFF
  • list.activeSelectionIconForeground#FFFFFFFF
  • list.dropBackground#363A3DFF
  • menu.background#000000
  • menu.border#454545FF
  • menu.foreground#CCCCCCFF
  • menu.separatorBackground#454545FF
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#CCCCCCFF
  • notifications.background#000000
  • notifications.border#2B2B2BFF
  • notifications.foreground#CCCCCCFF
  • panel.background#000000
  • panel.border#2B2B2BFF
  • panelInput.border#2B2B2BFF
  • panelTitle.activeBorder#0078D4FF
  • panelTitle.activeForeground#CCCCCCFF
  • panelTitle.inactiveForeground#9D9D9DFF
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#BB7D0066
  • peekViewResult.background#000000
  • peekViewResult.matchHighlightBackground#BB7D0066
  • pickerGroup.border#3C3C3CFF
  • ports.iconRunningProcessForeground#079401FF
  • progressBar.background#0078D4FF
  • quickInput.background#222222FF
  • quickInput.foreground#CCCCCCFF
  • settings.dropdownBackground#313131FF
  • settings.dropdownBorder#3C3C3CFF
  • settings.headerForeground#FFFFFFFF
  • settings.modifiedItemIndicator#BB7D0066
  • sideBar.background#000000
  • sideBar.border#2B2B2BFF
  • sideBar.foreground#CCCCCCFF
  • sideBarSectionHeader.background#181818FF
  • sideBarSectionHeader.border#2B2B2BFF
  • sideBarSectionHeader.foreground#CCCCCCFF
  • sideBarTitle.foreground#CCCCCCFF
  • statusBar.background#000000
  • statusBar.border#2B2B2BFF
  • statusBar.debuggingBackground#0078D4FF
  • statusBar.debuggingForeground#FFFFFFFF
  • statusBar.focusBorder#0078D4FF
  • statusBar.foreground#CCCCCCFF
  • statusBar.noFolderBackground#000000
  • statusBarItem.focusBorder#0078D4FF
  • statusBarItem.prominentBackground#65718166
  • statusBarItem.remoteBackground#0078D4FF
  • statusBarItem.remoteForeground#FFFFFFFF
  • tab.activeBackground#000000
  • tab.activeBorder#000000
  • tab.activeBorderTop#0078D4FF
  • tab.activeForeground#FFFFFFFF
  • tab.border#2B2B2BFF
  • tab.hoverBackground#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#9D9D9DFF
  • tab.lastPinnedBorder#CCCCCC33
  • tab.unfocusedActiveBorder#000000
  • tab.unfocusedActiveBorderTop#2B2B2BFF
  • tab.unfocusedHoverBackground#000000
  • terminal.foreground#CCCCCCFF
  • terminal.inactiveSelectionBackground#373B41FF
  • terminal.tab.activeBorder#0078D4FF
  • textBlockQuote.background#2B2B2BFF
  • textBlockQuote.border#616161FF
  • textCodeBlock.background#2B2B2BFF
  • textLink.activeForeground#0086FCFF
  • textLink.foreground#0086FCFF
  • textPreformat.background#3C3C3CFF
  • textPreformat.foreground#D0D0D0FF
  • textSeparator.foreground#1B232DFF
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#CCCCCCFF
  • titleBar.border#2B2B2BFF
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#9D9D9DFF
  • welcomePage.progress.foreground#0078D4FF
  • welcomePage.tileBackground#2B2B2BFF
  • widget.border#313131FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4D4D4FF
emphasisitalic
strongbold
header#000080FF
comment#2F9900FF
constant.language#0075D6FF
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#95CE77FF
constant.regexp#242995FF
entity.name.tag#0075D6FF
entity.name.tag.css, entity.name.tag.less#D79408FF
entity.other.attribute-name#1DB0FEFF
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#D79408FF
invalid#F40000FF
markup.underlineunderline
markup.bold#0075D6FFbold
markup.heading#0075D6FFbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#95CE77FF
markup.deleted#CE4208FF
markup.changed#0075D6FF
punctuation.definition.quote.begin.markdown#2F9900FF
punctuation.definition.list.begin.markdown#0055E6FF
markup.inline.raw#CE4208FF
punctuation.definition.tag#808080FF
meta.preprocessor, entity.name.function.preprocessor#0075D6FF
meta.preprocessor.string#CE4208FF
meta.preprocessor.numeric#95CE77FF
meta.structure.dictionary.key.python#1DB0FEFF
meta.diff.header#0075D6FF
storage#0075D6FF
storage.type#0075D6FF
storage.modifier, keyword.operator.noexcept#0075D6FF
string, meta.embedded.assembly#CE4208FF
string.tag#CE4208FF
string.value#CE4208FF
string.regexp#D10000FF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#0075D6FF
meta.template.expression#D4D4D4FF
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#1DB0FEFF
keyword#0075D6FF
keyword.control#0075D6FF
keyword.operator#D4D4D4FF
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#0075D6FF
keyword.other.unit#95CE77FF
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#0075D6FF
support.function.git-rebase#1DB0FEFF
constant.sha.git-rebase#95CE77FF
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#D4D4D4FF
variable.language#0075D6FF
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#DCDC69FF
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#00C9A0FF
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#00C9A0FF
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#C534B9FF
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#1DB0FEFF
variable.other.constant, variable.other.enummember#00A5FFFF
meta.object-literal.key#1DB0FEFF
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#CE4208FF
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#CE4208FF
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#D10000FF
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDC69FF
keyword.operator.quantifier.regexp#D79408FF
constant.character, constant.other.option#0075D6FF
constant.character.escape#D79408FF
entity.name.label#C8C8C8FF