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.background#000000
  • activityBar.foreground#bb77ff
  • activityBar.inactiveForeground#ff00ff
  • activityBarBadge.background#bb77ff
  • activityBarBadge.foreground#26004b
  • badge.background#bb77ff
  • badge.foreground#26004b
  • breadcrumb.background#00000000
  • breadcrumb.focusForeground#ff00ff
  • breadcrumb.foreground#bb77ff
  • button.background#26004b
  • button.foreground#ffffff
  • button.hoverBackground#ba00ba
  • button.secondaryBackground#3a3d41
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#191c1f
  • debugToolBar.background#000000
  • debugToolBar.border#ff00ff
  • editor.background#000000
  • editor.findMatchBackground#673b71
  • editor.findMatchBorder#df00ff
  • editor.findMatchHighlightBackground#622d96b5
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#413a4181
  • editor.selectionBackground#413a4181
  • editor.selectionHighlightBackground#add5ff26
  • editor.selectionHighlightBorder#b264ff
  • editorCursor.foreground#06ff00
  • editorGroup.border#b264ff
  • editorGroupHeader.tabsBackground#000000
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#ff00ff80
  • editorHoverWidget.foreground#cccccc
  • editorIndentGuide.activeBackground1#ff00ff
  • editorLineNumber.activeForeground#ff00ff
  • editorLineNumber.foreground#5800b0
  • editorLink.activeForeground#4e94ce
  • editorSuggestWidget.background#000000d3
  • editorSuggestWidget.border#ff00ff00
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.highlightForeground#ff00ff
  • editorSuggestWidget.selectedBackground#ff00ff5b
  • editorWhitespace.foreground#8000ff9b
  • editorWidget.background#00000099
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#ff00ff73
  • focusBorder#000000
  • input.background#000000
  • input.border#ff00ff
  • input.foreground#ffffff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#c50ed2
  • inputOption.activeBorder#029aff00
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#4a0649
  • list.activeSelectionForeground#ffff
  • list.dropBackground#000000
  • list.focusBackground#4a0649
  • list.focusForeground#ffffff
  • list.highlightForeground#ff00ff
  • listFilterWidget.background#cccccc
  • listFilterWidget.noMatchesOutline#ff0000
  • listFilterWidget.outline#cccccc
  • menu.background#000000bf
  • menu.border#8b00ff
  • menu.foreground#ffffff
  • menu.selectionBackground#c50ed2
  • menu.selectionBorder#000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#8b00ff
  • menubar.selectionBackground#00000000
  • menubar.selectionForeground#bb77ff
  • notificationCenter.border#ff00ff80
  • notificationCenterHeader.background#191919
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#000000d9
  • notifications.border#bb77ff
  • notifications.foreground#ffffff
  • notificationsErrorIcon.foreground#ff2b00
  • notificationsInfoIcon.foreground#0087ff
  • notificationsWarningIcon.foreground#ffd100
  • notificationToast.border#ff00ff80
  • panel.background#000000
  • panel.border#ff00ff
  • panelTitle.activeBorder#ff00ff
  • panelTitle.activeForeground#ff00ff
  • panelTitle.inactiveForeground#bb77ff
  • pickerGroup.border#ff00ff
  • pickerGroup.foreground#ac59ff
  • progressBar.background#ff00ff
  • selection.background#c50ed2
  • sideBar.background#000000
  • sideBar.border#ff00ff
  • sideBar.foreground#808080
  • sideBarSectionHeader.foreground#ff00ff
  • sideBarTitle.foreground#bb77ff
  • statusBar.background#000000
  • statusBar.border#000000
  • statusBar.debuggingBackground#5800b0
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ff00ff
  • statusBar.noFolderBackground#521060
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.hoverBackground#cccccc30
  • statusBarItem.remoteBackground#bb77ff
  • statusBarItem.remoteForeground#26004b
  • tab.activeBorder#ff00ff
  • tab.activeForeground#ff00ff
  • tab.border#000000
  • tab.hoverForeground#8000ff
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#bb77ff
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#929292
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#cfcfcfcc
  • terminal.ansiYellow#e5e510
  • terminal.border#bb77ff
  • terminal.foreground#ffffff
  • terminal.selectionBackground#ffffff40
  • terminalCursor.foreground#ff00ff
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#ff00ff
  • titleBar.border#000000
  • titleBar.inactiveBackground#171a26
  • titleBar.inactiveForeground#ff00ff
  • tree.indentGuidesStroke#ff00ff
  • widget.shadow#ff00ffc5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#546E7Aitalic
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx#00b7ff—
entity.name.tag.html, entity.name.tag, entity.name.tag.js.jsx#FF0077
entity.other.attribute-name.#BB77FFitalic
string.quoted.double.html#FFF5E0italic
string.quoted.single.#FFBF00italic
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#E65C19bold
punctuation.separator.key-value.html#FF00FFbold
support.type.property-name.css#ffffff—
entity.name.tag., entity.name.tag.wildcard.#06FF00—
entity.other.attribute-name.class.#FFCB6B—
keyword.other.unit#FF4433—
punctuation.definition.entity., punctuation.definition.constant., constant.other.color.rgb-value.hex., support.constant.color.w3c-extended-color-name., support.constant.color.w3c-standard-color-name.#00b7ffbold
constant.numeric., constant.numeric.decimal.#eead63italic
support.constant.property-value.#ff00ff—
punctuation.separator.key-value.#C792EA—
support.type.property-name., punctuation.definition.keyword.#ffffff—
keyword.other.important.#ff0000—
support.function.misc.#00FF77—
string.quoted.single., string.quoted.single.#FF00FF
string.quoted.double.#FF8080
punctuation.definition.string.begin., punctuation.definition.string.end., punctuation.terminator.rule., punctuation.separator.list.comma., punctuation.definition.string.template.end., punctuation.definition.string.template.begin.#5BBCFFbold
entity.other.attribute-name.pseudo-class., entity.other.attribute-name.pseudo-element.#FF6B6Bitalic
punctuation.definition.media-query.begin.bracket.round., punctuation.definition.media-query.end.bracket.round., punctuation.definition.parameters.begin.bracket.round., punctuation.definition.parameters.end.bracket.round., punctuation.section.property-list.begin.bracket.curly., punctuation.section.property-list.end.bracket.curly., punctuation.section.function.end.bracket.round., punctuation.section.function.begin.bracket.round.—bold
punctuation.definition.parameters.begin., punctuation.definition.parameters.end., meta.brace.round.—bold
punctuation.definition.block.—
support.function.math.——
support.constant.math.—bold
keyword.other.debugger.#FF8911bold
variable.other.constant.#ffffffbold
variable.other.readwrite.#fcf6bdbold
meta.var-single-variable.expr.#F5FDB0—
punctuation.definition.string.begin., punctuation.definition.string.end.#5BBCFF—
punctuation.definition.template-expression.begin., punctuation.definition.template-expression.end.#00B7FFitalic
string.quoted.double., string.quoted.docstring.single.#FF8080bold
keyword.operator.assignment., keyword.operator.relational., keyword.operator.comparison., keyword.operator.arithmetic#FFFF00bold
storage.type.function.arrow.js#00FF00bold
storage.type.#FF204Eitalic bold
variable.other.object., meta.function-call.arguments.#00F5FF
entity.name.function., meta.function-call.generic.#00FF00italic
punctuation.accessor., punctuation.definition.section.case-statement., punctuation.separator.period., punctuation.separator.dot-access., punctuation.separator.label., punctuation.separator., keyword.control.ternary.#ffae00bold
keyword.operator.ternary., punctuation.destructuring., punctuation.separator.colon., punctuation.separator.dict., punctuation.section.function.lambda.begin., punctuation.separator.arguments., punctuation.section.function.begin., punctuation.separator.delimiter., keyword.operator.logical.#FF8911bold
keyword.operator.decrement., keyword.operator.increment.#FFED00italic bold
punctuation.terminator.statement., punctuation.separator.comma., punctuation.terminator., punctuation.bracket.angle.#8BE8E5italic bold
variable.other.property.#bb77ff
keyword.control.switch.#FF5403bold
keyword.control.loop.#FF7FFFitalic bold
storage.type.function.#0077FFbold
keyword.control.conditional., keyword.control.flow., keyword.control.#ff0084bold
constant.language.boolean.true#00AAFFbold
constant.language.boolean.false.js#FF33AAbold
support.class.builtin., keyword.control.export., support.function.builtin.#AE00FFbold
keyword.operator.new., keyword.control.flow.#FF8080
support.function.#FEA1A1
string.quoted.single.python#FF8080
source.python#ffffff
punctuation.support.type.property-name.begin.json.comments, punctuation.support.type.property-name.end.json.comments, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#ff00c3italic
#fcf6bd
constant.language.json.comments#0077FF
invalid, invalid.illegal#FF5370—
keyword, storage.type, storage.modifier#C792EA—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#ec1717—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f07178—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#0051ff—
meta.block. variable.other#71f07c—
support.other.variable, string.other.link#f07178—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#C3E88D—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FFCB6B—
support.type#B2CCD6—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#B2CCD6—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370—
variable.language#FF5370italic
entity.name.method.js#0051ffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF—
entity.other.attribute-name#C792EA—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
entity.other.attribute-name.class#FFCB6B—
source.sass keyword.control#82AAFF—
markup.inserted#C3E88D—
markup.deleted#FF5370—
markup.changed#C792EA—
string.regexp#89DDFF—
constant.character.escape#89DDFF—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#C792EA—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFCB6B—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F78C6C—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF5370—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C17E70—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#82AAFF—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f07178—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C792EA—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C3E88D—
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF—
text.html.markdown markup.inline.raw.markdown#C792EA—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C3E88D—
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#f07178bold
markup.underline#F78C6Cunderline
markup.quote punctuation.definition.blockquote.markdown#65737E—
markup.quote—italic
string.other.link.title.markdown#82AAFF—
string.other.link.description.title.markdown#C792EA—
constant.other.reference.link.markdown#FFCB6B—
markup.raw.block#C792EA—
markup.raw.block.fenced.markdown#00000050—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF—
variable.language.fenced.markdown#65737E—
meta.separator#65737Ebold
markup.table#EEFFFF—