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#111111
  • activityBar.border#202020
  • activityBar.dropBackground#bb86fc
  • activityBarBadge.background#bb86fc
  • diffEditor.insertedTextBackground#1eff0013
  • diffEditor.removedTextBackground#ff027822
  • editor.background#1B1B1B
  • editor.findMatchHighlightBackground#ff2b7c8e
  • editor.foreground#f5f5f5
  • editor.hoverHighlightBackground#ff000013
  • editor.lineHighlightBackground#2b2b2b50
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#313131
  • editor.selectionForeground#eff8ff
  • editor.selectionHighlightBackground#93e1fb50
  • editorBracketMatch.background#ffffff13
  • editorGutter.addedBackground#3cdaf5
  • editorGutter.deletedBackground#ff0055
  • editorGutter.modifiedBackground#9765c9
  • editorOverviewRuler.bracketMatchForeground#985bd143
  • focusBorder#75dff2
  • gitDecoration.addedResourceForeground#fc4384
  • gitDecoration.conflictingResourceForeground#ff62b1
  • gitDecoration.ignoredResourceForeground#31cfff
  • gitDecoration.modifiedResourceForeground#ba66ff
  • gitDecoration.untrackedResourceForeground#4bf53c
  • icon.foreground#bb86fc
  • input.background#151515
  • input.border#75dff2
  • input.foreground#ffffff
  • input.placeholderForeground#7d7d7dd0
  • list.activeSelectionBackground#bb86fc
  • list.dropBackground#a183d333
  • list.errorForeground#ca0d36
  • sideBar.background#111111
  • sideBar.border#202020
  • sideBarSectionHeader.background#111111
  • sideBarSectionHeader.foreground#bb86fc
  • sideBarTitle.foreground#a183d3
  • statusBar.background#b643fc
  • statusBar.border#080808
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#bb86fc
  • terminal.ansiBlack#2a3134
  • terminal.ansiBlue#fc4384
  • terminal.ansiBrightBlack#4a4e4f
  • terminal.ansiBrightBlue#41f0ff
  • terminal.ansiBrightCyan#41f0ff
  • terminal.ansiBrightGreen#55e513
  • terminal.ansiBrightMagenta#ae89fe
  • terminal.ansiBrightRed#fc4384
  • terminal.ansiBrightWhite#f9f9f4
  • terminal.ansiBrightYellow#41f0ff
  • terminal.ansiCyan#708387
  • terminal.ansiGreen#55e513
  • terminal.ansiMagenta#ae89fe
  • terminal.ansiRed#fc4384
  • terminal.ansiWhite#d5d5d0
  • terminal.ansiYellow#a553c6
  • terminal.background#111111
  • terminal.foreground#c9c9c9
  • terminalCursor.background#c7c7c7
  • terminalCursor.foreground#feffff
  • textLink.foreground#bb86fc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type.class, storage.type, variable.language#f62c7e
keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.ternary, keyword.operator.logical, keyword.operator.comparison#00ea00
entity.name.function., support.class.builtin, support.function#00e0e0
string.quoted#bb86fc
entity.name.tag.js, entity.name.tag.html, entity.name.tag.css, punctuation.definition.tag, support.class.component.js#f9a891
comment#FFAA71
variable.other.constant.js#f9b6b6
invalid#f44542
source.js storage.type.function#fb94ff
entity.name.type.class.js#ffec3d
entity.other.inherited-class.js#ccc
source.css entity, source.stylus entity#ff8cae
entity.other.attribute-name.id.css#ffb554e7
entity.name.tag#9effffe7
source.css support, source.stylus support#d39cd6
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#c1f6f2
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#ffee80e3
source.css variable, source.stylus variable#9effffea
modifier, this, comment, storage.modifier.js, entity.other.attribute-name.js, entity.other.attribute-name.htmlitalic