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#262626
  • activityBar.foreground#af87ff
  • activityBarBadge.background#262626
  • activityBarBadge.foreground#d7005f
  • contrastBorder#262626
  • descriptionForeground#00ffaf
  • editor.background#262626
  • editor.findMatchHighlightBackground#3a3a3a
  • editor.foreground#e4e4e4
  • editor.lineHighlightBackground#1c1c1c
  • editor.selectionBackground#1c1c1c
  • editorBracketMatch.border#af8700
  • editorCursor.background#080808
  • editorCursor.foreground#af8700
  • editorGroupHeader.border#303030
  • editorGroupHeader.tabsBackground#262626
  • editorGutter.addedBackground#00d7d7
  • editorGutter.background#303030
  • editorGutter.deletedBackground#d7005f
  • editorGutter.modifiedBackground#00ffaf
  • editorIndentGuide.background#1c1c1c
  • editorLineNumber.activeForeground#af8700
  • editorLineNumber.foreground#8a8a8a
  • editorSuggestWidget.background#303030
  • editorSuggestWidget.border#303030
  • editorSuggestWidget.foreground#b2b2b2
  • editorSuggestWidget.highlightForeground#af87ff
  • editorSuggestWidget.selectedBackground#1c1c1c
  • gitDecoration.addedResourceForeground#00d7d7
  • gitDecoration.deletedResourceForeground#d7005f
  • gitDecoration.ignoredResourceForeground#4e4e4e
  • gitDecoration.modifiedResourceForeground#00ffaf
  • gitDecoration.untrackedResourceForeground#00d7d7
  • selection.background#FFFFFF
  • sideBar.background#262626
  • sideBar.border#303030
  • sideBar.foreground#e4e4e4
  • sideBarSectionHeader.background#262626
  • sideBarSectionHeader.border#303030
  • sideBarSectionHeader.foreground#af87ff
  • sideBarTitle.foreground#e4e4e4
  • statusBar.background#af8700
  • statusBar.foreground#303030
  • tab.activeBackground#af8700
  • tab.activeForeground#080808
  • tab.border#303030
  • tab.inactiveBackground#262626
  • tab.inactiveForeground#8a8a8a
  • terminal.ansiBlack#121212
  • terminal.ansiBlue#af5fff
  • terminal.ansiBrightBlack#4e4e4e
  • terminal.ansiBrightBlue#af87ff
  • terminal.ansiBrightCyan#00d7d7
  • terminal.ansiBrightGreen#00d7d7
  • terminal.ansiBrightMagenta#af87ff
  • terminal.ansiBrightRed#d75f87
  • terminal.ansiBrightWhite#e4e4e4
  • terminal.ansiBrightYellow#00ffaf
  • terminal.ansiCyan#00d7d7
  • terminal.ansiGreen#00d7d7
  • terminal.ansiMagenta#af87ff
  • terminal.ansiRed#d7005f
  • terminal.ansiWhite#8a8a8a
  • terminal.ansiYellow#00ffaf
  • terminal.background#262626
  • terminal.border#303030
  • terminal.foreground#e4e4e4
  • terminalCursor.background#121212
  • terminalCursor.foreground#af8700
  • titleBar.activeBackground#262626
  • titleBar.activeForeground#e4e4e4
  • titleBar.inactiveBackground#262626
  • titleBar.inactiveForeground#e4e4e4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.modifier, string, support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#af87ff
entity.other.attribute-name, storage.type, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, punctuation.separator.inheritance.php, keyword.other.template, keyword.other.substitution, support.other.variable, entity.other.attribute-name.class, string.other.link, *url*, *link*, *uri*#af5fff
keyword.control, string.regexp, entity.other.attribute-name.id, source.json meta.structure.dictionary.json support.type.property-name.json#04dac5
variable.language, punctuation.section.embedded#d7005f
invalid, invalid.illegal#d75f87
punctuation, support.class, meta.block variable.other, variable.parameter, meta.tag, support.constant, constant.other.color, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, variable, string constant.other.placeholder, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#e4e4e4
constant.numeric, entity.name.function, entity.name, entity.other.inherited-class, support.function, meta.function-call, variable.function, keyword.other.special-method, entity.name.tag, entity.name.module.js, variable.import.parameter.js, variable.other.class.js, entity.name.method.js, meta.class-method.js entity.name.function.js, variable.function.constructor, constant.character.escape, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, 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, source.sass keyword.control#b2b2b2
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.sgml, markup.deleted.git_gutter, comment, punctuation.definition.comment#4e4e4e
markup.inserted#00d7d7
markup.changed#af5fff
markup.deleted#d7005f
source.js constant.other.object.key.js string.unquoted.label.js#d7005f