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.

  • activeTab.background#2e2e4c
  • activityBar.background#1c1c26
  • editor.background#1d1d2f
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#15152a
  • editor.selectionBackground#373760
  • editorCursor.foreground#c678dd
  • editorGroupHeader.tabsBackground#121223
  • editorWhitespace.foreground#373760
  • input.background#252535
  • panel.background#121223
  • peekViewResults.background#3B4252
  • peekViewTitle.background#3B4252
  • sideBar.background#181826
  • statusBar.background#2e2e4c
  • statusBar.debuggingBackground#18bc6c
  • statusBar.noFolderBackground#585889
  • tab.border#1c1c26
  • tab.inactiveBackground#121223
  • tabsContainer.background#181826

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ffffff
variable.parameter.function#A6B2C0
comment, punctuation.definition.comment#5C6370italic
comment#5C6370italic
comment markup.link#5C6370
punctuation.definition.comment#5C6370
none#A6B2C0
keyword.operator#26e687
keyword#FF387Eitalic
variable#FE5C70
token.variable.parameter.java#abb2bf
import.storage.java#e5c07b
token.package.keyword#c678dd
token.package#abb2bf
entity.name.function, meta.require, support.function.any-method#9585FF
entity.name.type.namespace#e5c07b
support.class, entity.name.type.class#e5c07b
entity.name.class.identifier.namespace.type#e5c07b
entity.name.class#61afef
entity.name.type#e5c07b
keyword.control#c678dd
control.elements, keyword.operator.less#d19a66
keyword.other.special-method#61afef
storage#c678dd
token.storage.js, token.storage.ts#c678dd
token.storage.type.java#e5c07b
support.function#F7547A
support.type.property-name#abb2bf
support.constant.property-value#abb2bf
support.constant.font-name#d19a66
meta.tag#abb2bf
string, entity.other.inherited-class#18bc6c
constant.other.symbol#56b6c2
constant.numeric#d19a66
none#d19a66
none#d19a66
constant#d19a66
punctuation.definition.constant#d19a66
entity.name.tag#e06c75
entity.other.attribute-name#d19a66
entity.other.attribute-name.id#61afef
punctuation.definition.entity#d19a66
meta.selector#c678dd
none#D2945D
markup.heading.entity.name#e06c75
markup.heading punctuation.definition.heading.markdown#e06c75
markdown.punctuation.link.begin, markdown.punctuation.link.end#A6B2C0
markdown.link.title.string#61AFEF
markup.heading punctuation.definition.heading, entity.name.section#61afef
keyword.other.unit#d19a66
markup.bold#d19a66
punctuation.definition.bold#d19a66
markup.italic, punctuation.definition.italic#c678dd
emphasis md#c678dd
strong md#d19a66
variable md#98c379
keyword md#e06c75
markup.raw.inline#90C378
meta.link#C678DD
markup.list.punctuation.definition#DF6A73
markup.quote#D2945D
meta.separator#A6B2C0
markup.inserted#90C378
markup.deleted#DF6A73
markup.changed#C679DD
string.regexp#57B6C2
constant.character.escape#57B6C2
punctuation.section.embedded, variable.interpolation#BE4F44
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json string.quoted.double.json#DF6A73
structure.dictionary.json.value#90C378
structure.dictionary.json.detected-link#c678dd
structure.dictionary.json.punctuation#A6B2C0
structure.dictionary.json.property-name#DF6A73
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#C679DD
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#C679DD
meta.function.decorator.python#61afef
support.token.decorator.python, meta.function.decorator.identifier.python#56B6C2
python.keyword.operator.logical#c678dd
python.meta.function-call.arguments.variable.parameter#d19a66
python.meta.type.support.function-call#56B6C2
function.parameter#d19a66
function.parameter.js, function.parameter.ts#abb2bf
function.brace#abb2bf
function.parameter.ruby, function.parameter.cs#abb2bf
rgb-value#56B6C2
inline-color-decoration rgb-value#d19a66
less rgb-value#d19a66
selector.sass#e06c75
var.this.js, var.this.ts#DF6A73
token.tsx.string, token.jsx.string#98c379
token.tsx.meta.type.declaration.support, token.jsx.meta.type.declaration.support#56b6c2
token.tsx.constant, token.jsx.constant#d19a66
block.scope.end, block.scope.begin#abb2bf
token.string.html#98c379
markdown.markup.quote#5c6370italic
ruby.punctuation.definition.constant#56b6c2
ruby.operator.other.keyword#98c379
ruby.require.string#98c379
ruby.require#abb2bf
ruby.keyword.other.special-method, ruby.punctuation.section.fuction#abb2bf
ruby.token.separator.variable#abb2bf
rust.token.lifetime#33E8EC
rust.token.type.params.core.support#33E8EC
php.token.global.variable.safer#E06C75
php.token.double.quote.variable#E06C75
php.token.double.quoted#98C379
php.token.double.quoted.variable.punctuation.definition#E06C75
token.punctuation.section.embedded.array#ABB2BF
support.type.primitive.ts#e5c07b
meta.object-literal.key.ts#e5c07b
support.variable.property.dom.ts#18bc6c