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#66FF00
  • activityBar.inactiveForeground#00FFFF
  • activityBarBadge.background#66FF00
  • activityBarBadge.foreground#26004b
  • badge.background#66FF00
  • badge.foreground#26004b
  • breadcrumb.background#00000000
  • breadcrumb.focusForeground#00FFFF
  • breadcrumb.foreground#66FF00
  • button.background#00FFFF
  • button.foreground#000
  • button.hoverBackground#66ff00
  • button.secondaryBackground#3a3d41
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#191c1f
  • debugToolBar.background#000000
  • debugToolBar.border#00FFFF
  • editor.background#000000
  • editor.findMatchBackground#326d6d
  • editor.findMatchBorder#00ffff
  • editor.findMatchHighlightBackground#2d9496b5
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#413a4181
  • editor.selectionBackground#413a4181
  • editor.selectionHighlightBackground#add5ff26
  • editor.selectionHighlightBorder#00ffffbb
  • editorCursor.foreground#00ffff
  • editorGroup.border#64eaff
  • editorGroupHeader.tabsBackground#000000
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#00FFFF80
  • editorHoverWidget.foreground#cccccc
  • editorIndentGuide.activeBackground1#04ff00
  • editorIndentGuide.background1#00ffff58
  • editorLineNumber.activeForeground#00FFFF
  • editorLineNumber.foreground#66ff009f
  • editorLink.activeForeground#4e94ce
  • editorSuggestWidget.background#000000d3
  • editorSuggestWidget.border#00FFFF00
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.highlightForeground#00FFFF
  • editorSuggestWidget.selectedBackground#00FFFF5b
  • editorWhitespace.foreground#66ff00
  • editorWidget.background#00000099
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#00FFFF73
  • focusBorder#000000
  • input.background#000000
  • input.border#00FFFF
  • input.foreground#ffffff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#00ffffb3
  • inputOption.activeBorder#029aff00
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#00ffffb3
  • list.activeSelectionForeground#000
  • list.dropBackground#000000
  • list.focusBackground#000
  • list.focusForeground#00FFFF
  • list.highlightForeground#00FFFF
  • listFilterWidget.background#cccccc
  • listFilterWidget.noMatchesOutline#ff0000
  • listFilterWidget.outline#cccccc
  • menu.background#000000bf
  • menu.border#00FFFF
  • menu.foreground#ffffff
  • menu.selectionBackground#00FFFF
  • menu.selectionBorder#000000
  • menu.selectionForeground#000
  • menu.separatorBackground#00FFFF
  • menubar.selectionBackground#00000000
  • menubar.selectionForeground#66FF00
  • notificationCenter.border#00ffff
  • notificationCenterHeader.background#191919
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#000000d9
  • notifications.border#66FF00
  • notifications.foreground#ffffff
  • notificationsErrorIcon.foreground#ff2b00
  • notificationsInfoIcon.foreground#0087ff
  • notificationsWarningIcon.foreground#ffd100
  • notificationToast.border#00ffff
  • panel.background#000000
  • panel.border#00FFFF
  • panelTitle.activeBorder#00FFFF
  • panelTitle.activeForeground#00FFFF
  • panelTitle.inactiveForeground#66FF00
  • pickerGroup.border#00FFFF
  • pickerGroup.foreground#66FF00
  • progressBar.background#00FFFF
  • selection.background#00ffffb3
  • sideBar.background#000000
  • sideBar.border#00FFFF
  • sideBar.foreground#808080
  • sideBarSectionHeader.foreground#00FFFF
  • sideBarTitle.foreground#66FF00
  • statusBar.background#000000
  • statusBar.border#000000
  • statusBar.debuggingBackground#5800b0
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#00FFFF
  • statusBar.noFolderBackground#521060
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.hoverBackground#cccccc30
  • statusBarItem.remoteBackground#000
  • statusBarItem.remoteForeground#66FF00
  • statusBarItem.remoteHoverForeground#00ffff
  • tab.activeBorder#00FFFF
  • tab.activeForeground#00FFFF
  • tab.border#000000
  • tab.hoverForeground#00FFFF
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#66FF00
  • 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#66FF00
  • terminal.foreground#ffffff
  • terminal.selectionBackground#ffffff40
  • terminalCursor.foreground#00FFFF
  • textLink.activeForeground#00FFFF
  • textLink.foreground#66ff00
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#00FFFF
  • titleBar.border#000000
  • titleBar.inactiveBackground#171a26
  • titleBar.inactiveForeground#00FFFF
  • tree.indentGuidesStroke#00FFFF
  • widget.shadow#00ffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#91A3B0italic
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx#00ffff italic bold
entity.name.tag.html, entity.name.tag, entity.name.tag.js.jsx#FF0084bold
entity.other.attribute-name.#66FF00italic
string.quoted.double.html#FFF5E0
string.quoted.single.#FFBF00—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#E65C19bold
punctuation.separator.key-value.html#FF00FFbold
support.type.property-name.css, meta.jsx.children.js.jsx#ffffff—
entity.name.tag., entity.name.tag.wildcard.#06FF00—
entity.other.attribute-name.class.#FFCB6B—
keyword.other.unit#FF0077—
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.#F4A460italic
support.constant.property-value.#00FFFF—
punctuation.separator.key-value.#FF00FF—
support.type.property-name., punctuation.definition.keyword.#ffffff—
keyword.other.important.#ff0000—
support.function.misc., support.function.calc., support.function.url., support.function.transform.#007FFF—
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.#BF00FFitalic bold
entity.other.attribute-name.pseudo-class., entity.other.attribute-name.pseudo-element.#FF6B6Bitalic
variable.parameter.url., variable.argument.#FFF5E0italic
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.constant.math.#00BFFFbold
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#06FF00bold
storage.type.function.arrow.js#00FF00bold
storage.type.#FF204Eitalic bold
variable.other.object., meta.function-call.arguments.#00ffffbold
entity.name.function., meta.function-call.generic.#FF00FFitalic
punctuation.accessor., punctuation.definition.section.case-statement., punctuation.separator.period., punctuation.separator.dot-access., punctuation.separator.label., punctuation.separator., keyword.control.ternary., keyword.operator.spread., constant.character.escape.#FE5A1Dbold
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
support.variable.property.#FFED00—
punctuation.terminator.statement., punctuation.separator.comma., punctuation.terminator., punctuation.bracket.angle.#8BE8E5italic bold
variable.other.property.#66FF00
keyword.control.switch.#FF5403bold
keyword.control.loop.#FF7FFFitalic bold
storage.type.function.#0077FFbold
keyword.control.conditional., keyword.control.#FF0090bold
keyword.control.flow.#FC0FC0bold
constant.language.boolean.true#00AAFFbold
constant.language.boolean.false.js#FF33AAbold
support.class.builtin., keyword.control.export., support.function.builtin.#AE00FFbold
keyword.operator.new.#FF8911
support.function.#FEA1A1
string.template.#99FFFF
entity.name.label.#E3F988
support.function.math., support.type.primitive.#48cae4italic
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—