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.activeBackground#333
  • activityBar.background#111
  • activityBarBadge.background#2361ba
  • badge.background#2361ba
  • button.background#444
  • debugToolBar.background#111
  • dropdown.background#222
  • editor.background#282828
  • editor.foreground#ABB2BF
  • editor.lineHighlightBorder#fff0
  • editor.selectionBackground#2361ba66
  • editor.selectionHighlightBackground#fff2
  • editor.wordHighlightBackground#8d8d8d2c
  • editorCursor.foreground#47ff6f
  • editorGroupHeader.tabsBackground#111
  • editorSuggestWidget.background#222
  • editorSuggestWidget.border#333333
  • editorWidget.background#111
  • focusBorder#2361ba
  • input.background#222
  • menu.background#222
  • menubar.selectionBackground#2361ba
  • minimap.background#222B
  • minimap.selectionHighlight#2361ba66
  • notifications.background#111
  • panel.background#111
  • quickInput.background#111
  • quickInputList.focusBackground#2361ba
  • selection.background#2361ba
  • settings.checkboxBackground#222
  • settings.textInputBackground#222
  • sideBar.background#111
  • sideBar.border#333333
  • sideBarSectionHeader.background#1c1c1c
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#000
  • statusBar.border#333333
  • statusBar.debuggingBackground#bf6600
  • tab.border#333333
  • tab.hoverBorder#2361ba
  • tab.inactiveBackground#111
  • terminal.background#000
  • titleBar.activeBackground#111
  • titleBar.border#333333
  • titleBar.inactiveBackground#222

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded#ABB2BF—
keyword#C678DD—
keyword.control#C678DD—
keyword.operator.word#C678DD—
storage#C678DD—
token.storage#C678DD—
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#C678DD—
control.elements, keyword.operator.less#C678DD—
keyword.operator.instanceof.java#C678DD—
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#C678DD—
variable.language#C678DD—
keyword.operator.module#C678DD—
keyword.operator.expression.import#C678DD—
keyword.operator.sigil.rust#C678DD—
keyword.operator.arithmetic.go, keyword.operator.address.go#C678DD—
punctuation.section.embedded, variable.interpolation, punctuation.section.embedded.begin, punctuation.section.embedded.end#C678DD—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#C678DD—
constant.character.escape#56B6C2—
string.regexp#56B6C2—
string.regexp#56B6C2—
keyword.operator.heredoc.php,keyword.operator.nowdoc.php,keyword.operator.regexp.php,keyword.operator.error-control.php,keyword.operator.type.php#C678DD—
keyword.operator.logical.python#C678DD—
variable.language.rust#C678DD—
entity.name.lifetime.rust#C678DD—
meta.selector#C678DD—
token.package.keyword#C678DD—
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade,text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#C678DD—
punctuation.quasi.element#C678DD—
punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison#C678DD—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#C678DD—
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#C678DD—
entity.name.function, meta.require, support.function.any-method, variable.function#61AFEF—
support.function#61AFEF—
keyword.other.special-method#61AFEF—
entity.name.function,support.function.console#61AFEF—
meta.function-call.generic.python#61AFEF—
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#61AFEF—
meta.method.groovy#61AFEF—
meta.method.java#61AFEF—
support.function.std.rust#61AFEF—
entity.name.goto-label.php,support.other.php#61AFEF—
support.type.type.flowtype#61AFEF—
string#98C379—
source.ini#98C379—
support.constant.font-name#98C379—
keyword.other.template.begin, keyword.other.template.end, keyword.other.substitution.begin, keyword.other.substitution.end#98C379—
meta.definition.class.inherited.classes.groovy#98C379—
markup.inserted, markup.inserted.diff#98C379—
constant.numeric#D19A66—
constant#D19A66—
punctuation.definition.constant#D19A66—
constant.numeric.decimal.asm.x86_64#D19A66—
variable.other.generic-type.haskell#D19A66—
keyword.operator.quantifier.regexp#D19A66—
inline-color-decoration rgb-value, less rgb-value#D19A66—
wikiword.xi#D19A66—
keyword.other.unit#D19A66—
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#E06C75—
support.type.property-name#ABB2BF—
support.constant.property-value, support.constant.property-value.scss, support.constant.property-value.css#ABB2BF—
meta.property.object#E06C75—
entity.name.variable.field.cs#E06C75—
variable.other.constant.property#D19A66—
support.type.property-name.json, support.type.property-name.json punctuation#E06C75—
source.json meta.structure.dictionary.json > string.quoted.json, source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#E06C75—
support.constant.core.rust,support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#D19A66—
constant.other.symbol#D19A66—
support.constant.json#D19A66—
support.constant.math, support.constant.property.math#D19A66—
variable.other.constant#D19A66—
meta.symbol.clojure, constant.keyword.clojure#D19A66—
constant.language.symbol.ruby,constant.language.symbol.elixir,constant.language.symbol.double-quoted.elixir#D19A66—
rgb-value#56B6C2—
text.variable, text.bracketed#E06C75—
support.variable.dom,support.variable.property.dom#E06C75—
support.other.parenthesis.regexp#56B6C2—
meta.scope.prerequisites.makefile#E06C75—
support.constant.elm#D19A66—
entity.name.tag#E06C75—
selector.sass#E06C75—
entity.other.attribute-name#D19A66—
entity.other.attribute-name.id#61AFEFnormal
entity.other.attribute-name.class.css#D19A66normal
entity.name.type, entity.name.class, support.class, entity.name.type.class, entity.name.type.namespace, entity.name.class.identifier.namespace.type#E5C07B—
entity.name.class, variable.other.class.js, variable.other.class.ts, variable.other.class.php#E5C07B—
entity.name.type#E5C07B—
entity.name.namespace#E5C07B—
variable#E06C75—
variable.c#E06C75—
token.variable.parameter.java#ABB2BF—
keyword.operator#56B6C2—
keyword.operator.assignment.compound, keyword.operator.assignment.compound.js, keyword.operator.assignment.compound.ts#56B6C2—
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#56B6C2—
keyword.operator.logical,keyword.operator.bitwise,keyword.operator.channel#56B6C2—
keyword.operator.css,keyword.operator.scss,keyword.operator.less#56B6C2—
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp#56B6C2—
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php,keyword.operator.comparison.php#56B6C2—
punctuation.separator.delimiter#ABB2BF—
meta.tag#ABB2BF—
variable.parameter.function#ABB2BF—
meta.template.expression#ABB2BF—
meta.function.decorator.python, support.token.decorator.python, meta.function.decorator.identifier.python#E5C07B—
storage.type.class.doxygen.c#E5C07B—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#56B6C2—
comment, punctuation.definition.comment#5C6370italic
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#E06C75—
markup.inline.raw.markdown,markup.inline.raw.string.markdown#98C379—
markup.underline.link.markdown,markup.underline.link.image.markdown#61AFEF—
markup.bold,todo.bold,punctuation.definition.bold#D19A66—
markup.italic, punctuation.definition.italic,todo.emphasis#C678DD—
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#98C379—
invalid.illegal, invalid.broken, invalid.deprecated, invalid.unimplemented#ffffff—
markup.deleted, markup.deleted.diff#E06C75—
token.info-token#ABB2BF—
token.warn-token#D19A66—
token.error-token#f44747—
token.debug-token#61AFEF—
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#E5C07B—
storage.type.cs#E5C07B—
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super—italic
comment.line.double-slash,comment.block.documentation—italic
keyword.control.import.python,keyword.control.flow.python,keyword.operator.logical.python—italic
markup.italic.markdown—italic