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

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.superitalic
comment.line.double-slash,comment.block.documentationitalic
keyword.control.import.python,keyword.control.flow.python,keyword.operator.logical.pythonitalic
markup.italic.markdownitalic