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.activeBorder#CE93D8
  • activityBar.background#202024
  • activityBar.border#1b1b1b
  • activityBar.foreground#CE93D8
  • activityBar.inactiveForeground#546E7A
  • activityBarBadge.background#AB47BC
  • dropdown.background#202024
  • dropdown.border#212121
  • dropdown.foreground#bababa
  • editor.background#28282E
  • editor.foreground#a9b7c6
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#263238
  • editor.selectionHighlightBackground#455A64
  • editorIndentGuide.activeBackground#455A64
  • editorIndentGuide.background#263238
  • editorLineNumber.activeForeground#999999
  • editorLineNumber.foreground#606366
  • focusBorder#CE93D8
  • input.background#202024
  • input.border#212121
  • input.foreground#bababa
  • input.placeholderForeground#a6a6a6
  • list.dropBackground#3c3a37
  • menu.background#202024
  • menu.foreground#bababa
  • panel.background#202024
  • panel.border#212121
  • panelTitle.activeBorder#bababa
  • panelTitle.activeForeground#bababa
  • panelTitle.inactiveForeground#888888
  • scrollbarSlider.activeBackground#546E7A
  • scrollbarSlider.background#37474F
  • scrollbarSlider.hoverBackground#455A64
  • settings.numberInputBackground#292929
  • settings.textInputBackground#292929
  • sideBar.background#202024
  • sideBar.border#212121
  • sideBar.foreground#bababa
  • sideBarSectionHeader.background#202024
  • sideBarSectionHeader.foreground#bababa
  • sideBarTitle.foreground#bababa
  • statusBar.background#263238
  • statusBar.border#212121
  • statusBar.foreground#bababa
  • tab.activeBackground#28282E
  • tab.activeBorder#AB47BC
  • tab.activeForeground#bababa
  • tab.border#212121
  • tab.inactiveBackground#263238
  • tab.inactiveForeground#a1a1a1
  • terminal.ansiBlue#03edf9
  • terminal.ansiBrightBlue#03edf9
  • terminal.ansiBrightCyan#03edf9
  • terminal.ansiBrightGreen#72f1b8
  • terminal.ansiBrightMagenta#ff7edb
  • terminal.ansiBrightRed#fe4450
  • terminal.ansiBrightYellow#fede5d
  • terminal.ansiCyan#03edf9
  • terminal.ansiGreen#72f1b8
  • terminal.ansiMagenta#ff7edb
  • terminal.ansiRed#fe4450
  • terminal.ansiYellow#f97e72
  • terminal.foreground#ffffff
  • terminal.selectionBackground#34294f4d
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#03edf9
  • titleBar.activeBackground#263238
  • titleBar.activeForeground#A7FFEB
  • titleBar.border#212121
  • widget.shadow#1a1a1aaa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#BA68C8italic
string.quoted, string.template, punctuation.definition.string#ff8b39
string.template meta.embedded.line#b6b1b1
variable, entity.name.variable#ff7edb
variable.language#fe4450bold
variable.parameteritalic
storage.type, storage.modifier#fede5d
constant#f97e72
string.regexp#f97e72
constant.numeric#f97e72
constant.language#f97e72
constant.character.escape#BBDEFB
entity.name#fe4450
entity.name.tag#72f1b8
punctuation.definition.tag#BBDEFB
entity.other.attribute-name#fede5d
entity.other.attribute-name.html#fede5ditalic
entity.name.type, meta.attribute.class.html#fe4450
entity.other.inherited-class#D50
entity.name.function, variable.function#BBDEFB
keyword.control.export.js, keyword.control.import.js#72f1b8
keyword#fede5d
keyword.control#fede5ditalic
keyword.operator#fede5d
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#fede5d
keyword.other.unit#f97e72
support#fe4450
support.function#BBDEFB
support.variable#ff7edb
meta.object-literal.key, support.type.property-name#ff7edb
punctuation.separator.key-value#b6b1b1
punctuation.section.embedded#fede5d
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#72f1b8
support.type.property-name.css, support.type.property-name.json#72f1b8
switch-block.expr.js#72f1b8
variable.other.constant.property.js, variable.other.property.js#2ee2fa
constant.other.color#f97e72
support.constant.font-name#f97e72
entity.other.attribute-name.id#BBDEFB
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#D50
support.function.misc.css#fe4450
markup.heading, entity.name.section#ff7edb
text.html, keyword.operator.assignment#ffffffee
markup.quote#b6b1b1ccitalic
beginning.punctuation.definition.list#ff7edb
markup.underline.link#D50
string.other.link.description#f97e72
meta.function-call.generic.python#BBDEFB
storage.type.cs#fe4450
entity.name.variable.local.cs#ff7edb
entity.name.variable.field.cs, entity.name.variable.property.cs#ff7edb
constant.other.placeholder.c#72f1b8italic
keyword.control.directive.include.c, keyword.control.directive.define.c#72f1b8
storage.modifier.c#fe4450
source.cpp keyword.operator#fede5d
constant.other.placeholder.cpp#72f1b8italic
keyword.control.directive.include.cpp, keyword.control.directive.define.cpp#72f1b8
storage.modifier.specifier.const.cpp#fe4450
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#BBDEFB
source.elixir entity.name.function#72f1b8
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#BBDEFB
source.elixir punctuation.definition.string#72f1b8
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#72f1b8
source.elixir .punctuation.binary.elixir#ff7edbitalic
entity.global.clojure#BBDEFBbold
storage.control.clojure#BBDEFBitalic
meta.metadata.simple.clojure, meta.metadata.map.clojure#fe4450italic
meta.quoted-expression.clojureitalic
meta.symbol.clojure#ff7edbff
ThemeDatabase All Themes by enes ozturk - VS Code Theme