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#4a3333
  • activityBar.border#D2FF7740
  • activityBar.dropBackground#D2FF7759
  • activityBarBadge.background#D2FF77
  • activityBarBadge.foreground#000
  • dropdown.background#684d4d
  • dropdown.border#D2FF7740
  • dropdown.foreground#CACACA
  • dropdown.listBackground#684d4d
  • editor.background#4a3333
  • editor.foreground#dfffe6
  • editor.lineHighlightBackground#684d4d
  • editor.lineHighlightBorder#D2FF771A
  • editor.selectionBackground#80b76c80
  • editor.selectionHighlightBackground#4b6b3f80
  • editor.selectionHighlightBorder#adadad80
  • editorBracketMatch.background#00FFF880
  • editorBracketMatch.border#FFF
  • editorGroup.background#463939
  • editorGroup.dropBackground#D2FF7759
  • editorGroupHeader.noTabsBackground#684d4d
  • editorGroupHeader.tabsBackground#684d4d
  • editorGroupHeader.tabsBorder#4a3333
  • editorGutter.addedBackground#00ff2740
  • editorGutter.background#4f3939
  • editorGutter.deletedBackground#ff000040
  • editorGutter.modifiedBackground#0011ff40
  • editorLineNumber.activeForeground#D2FF77
  • editorLineNumber.foreground#778671
  • input.background#684d4d
  • panel.background#4f3939
  • panel.border#D2FF7740
  • panelTitle.activeBorder#D2FF7740
  • panelTitle.activeForeground#D2FF77
  • panelTitle.inactiveForeground#CACACA
  • sideBar.background#352727
  • sideBar.border#D2FF7740
  • sideBar.dropBackground#D2FF7759
  • sideBar.foreground#CACACA
  • sideBarSectionHeader.background#684d4d
  • sideBarSectionHeader.foreground#EBEBEB
  • sideBarTitle.foreground#EBEBEB
  • statusBar.background#4a3333
  • statusBar.border#D2FF7740
  • tab.activeBackground#4a3333
  • tab.activeForeground#D2FF77
  • tab.border#D2FF7740
  • tab.hoverBackground#D2FF7740
  • tab.hoverBorder#D2FF7740
  • tab.inactiveBackground#684d4d
  • tab.inactiveForeground#CACACA
  • tab.unfocusedHoverBackground#D2FF771A
  • tab.unfocusedHoverBorder#D2FF771A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.constant.edge#d0004a
constant.other.character-class.regexp#6bff9a
keyword.operator.quantifier.regexp#d19a66ff
punctuation.definition.string.begin,punctuation.definition.string.end#98c378
variable.parameter.function#A6B2C0
comment, punctuation.definition.comment#80A4E8italic
comment markup.link#5C6370
markup.changed.diff#e0c285
meta.diff.header.from-file,punctuation.definition.from-file.diff#569cd6
markup.inserted.diff#98c379
markup.deleted.diff#76d99c
meta.function.c#76d99c
keyword.control.cpp#00ff98
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c#abb2bf
punctuation.separator.key-value#bbbbbb
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
keyword.operator.expression.import#00faff
support.constant.math#00ff98
support.constant.property.math#3ad700
variable.other.constant#3ad700
storage.type.annotation.java#00ff98
source.java#76d99c
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,storage.type.generic.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,meta.method.body.java#abb2bf
meta.method.java#00faff
storage.modifier.import.java,storage.type.java#00ff98
meta.definition.variable.name.java#76d99c
keyword.operator.logical.js#56b6c2
keyword.operator.bitwise#56b6c2
support.constant.property-value.scss,support.constant.property-value.css#3ad700
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#3ad700
punctuation.separator.list.comma.css#b9c0ca
support.constant.color.w3c-standard-color-name.css#3ad700
support.type.vendored.property-name.css#56b6c2
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#76d99c
support.module.node,support.type.object.module,support.module.node#00ff98
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#76d99c
comment.line.double-slash,comment.block.documentationnormal
support.constant.json#3ad700
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary#d0004a
support.type.object.console#76d99c
support.variable.property.process#3ad700
entity.name.function,support.function.console#00faff
keyword.operator#0047ff
support.type.object.dom#56b6c2
support.variable.dom,support.variable.property.dom#76d99c
keyword.operator.arithmetic,keyword.operator.comparison#56b6c2
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c#c678ddff
punctuation.separator.delimiter.c#bbbbbb
support.type.posix-reserved.c#57adb8
keyword.operator.sizeof.c#C178DD
variable.parameter.function.language.python#3ad700
support.type.python#56b6c2
keyword.operator.logical.python#d0004a
meta.function-call.arguments.python#E06C60
meta.function-call.python#E06C60
variable.parameter.function.python#D18C4E
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python,meta.function-call.arguments.python#abb2bf
meta.function-call.generic.python#00faff
constant.character.format.placeholder.other.python#98c379
none#A6B2C0
keyword.operator#abb2bf
keyword#D2FF77
variable#D2FF77
token.variable.parameter.java#abb2bf
import.storage.java#00ff98
token.package.keyword#d0004a
token.package#abb2bf
entity.name.function, meta.require, support.function.any-method#00faff
entity.name.type.namespace#00ff98
support.class, entity.name.type.class#00ff98
entity.name.class.identifier.namespace.type#00ff98
entity.name.class#00faff
entity.name.type#00ff98
keyword.control#ffac00
control.elements, keyword.operator.less#3ad700
keyword.other.special-method#00faff
storage#d0004a
token.storage#d0004a
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#2CCAFF
token.storage.type.java#00ff98
support.function#56b6c2
support.type.property-name#abb2bf
support.constant.property-value#abb2bf
support.constant.font-name#3ad700
meta.tag#abb2bf
string, entity.other.inherited-class#60ae27
constant.other.symbol#56b6c2
constant.numeric#3ad700
none#3ad700
none#3ad700
constant#3ad700
punctuation.definition.constant#3ad700
entity.name.tag#76d99c
entity.other.attribute-name#3ad700
entity.other.attribute-name.id#00faffnormal
entity.other.attribute-name.class.css#3ad700normal
meta.selector#d0004a
none#D2945D
markup.heading#76d99cbold
markup.heading punctuation.definition.heading, entity.name.section#00faff
keyword.other.unit#3ad700
markup.bold,todo.bold#3ad700bold
punctuation.definition.bold#00ff98
markup.italic, punctuation.definition.italic,todo.emphasis#d0004a
emphasis md#d0004a
entity.name.section.markdown#D2FF77
punctuation.definition.heading.markdown#D2FF77
markup.heading.setext#ABB2BF
punctuation.definition.bold.markdown#D19A66
markup.inline.raw.markdown#98C379
markup.inline.raw.string.markdown#98c379
beginning.punctuation.definition.list.markdown#D2FF77
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown#ABB2BF
punctuation.definition.metadata.markdown#2CCAFF
markup.underline.link.markdown,markup.underline.link.image.markdown#2CCAFF
string.other.link.title.markdown,string.other.link.description.markdown#61AFEF
markup.italic.markdownitalic
markup.bold.markdownbold
string.regexp#57B6C2
constant.character.escape#57B6C2
punctuation.section.embedded, variable.interpolation#FF6757
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#D2FF77
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#D2FF77
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
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#56B6C2
support.type.property-name.json#D2FF77
support.type.property-name.json punctuation#D2FF77
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
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#00ff98
keyword.operator.error-control.php#2CCAFF
keyword.operator.type.php#2CCAFF
punctuation.section.array.begin.php#abb2bf
punctuation.section.array.end.php#abb2bf
invalid.illegal.non-null-typehinted.php#ff0000
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#00ff98
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#00faff
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php#bbbbbb
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#D19A66
entity.name.goto-label.php,support.other.php#00faff
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#56b6c2
keyword.operator.regexp.php#d0004a
keyword.operator.comparison.php#56b6c2
punctuation.definition.variable.php#76d99c
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#d0004a
meta.function.decorator.python#00faff
support.token.decorator.python,meta.function.decorator.identifier.python#56B6C2
function.parameter#3ad700
function.parameter#abb2bf
function.brace#abb2bf
function.parameter.ruby, function.parameter.cs#abb2bf
rgb-value#56B6C2
inline-color-decoration rgb-value#3ad700
less rgb-value#3ad700
selector.sass#76d99c
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#00ff98italic
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#00ff98
block.scope.end,block.scope.begin#abb2bf
storage.type.cs#e5c07bff
entity.name.variable.local.cs#76d99c
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#fff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#d0004a
meta.template.expression#abb2bf