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#31343f
  • activityBarBadge.background#31343f
  • debugExceptionWidget.background#31343f
  • debugToolBar.background#31343f
  • dropdown.background#31343f
  • editor.background#31343f
  • editor.findMatchBackground#31343f
  • editor.findMatchHighlightBackground#454d6d
  • editor.findRangeHighlightBackground#454d6d
  • editor.foreground#dee2f7
  • editor.lineHighlightBackground#353947
  • editor.selectionBackground#484b5b
  • editorCursor.foreground#528bff
  • editorGroup.backgroundeditor.backgsround
  • editorGroupHeader.tabsBackground#31343f
  • editorMarkerNavigation.background#31343f
  • editorWhitespace.foreground#484b5b
  • editorWidget.background#31343f
  • input.backgrouvsce publishnd#31343f
  • input.border#484b5b
  • panel.background#31343f
  • sideBar.background#31343f
  • statusBar.background#31343f
  • tab.activeBackground#31343f
  • tab.inactiveBackground#31343f
  • titleBar.activeBackground#31343f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#dee2f7
variable.parameter.function#dee2f7
comment, punctuation.definition.comment#5c637italic
comment#63677eitalic
comment markup.link#63677e
markup.inserted.diff#a3eea0
markup.deleted.diff#f9867b
meta.function.c#f9867b
keyword.control.cpp#eddc96
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#dee2f7
support.constant.math.js,support.constant.property.math.js,support.constant.math.ts,support.constant.property.math.ts#eddc96
variable.other.constant.js,variable.other.constant.ts#eddc96
storage.type.annotation.java#eddc96ff
source.java#f9867b
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#dee2f7
meta.method.java#80bbfe
storage.modifier.import.java,storage.type.java#eddc96
meta.definition.variable.name.java#f9867b
keyword.operator.logical.js,keyword.operator.logical.ts#7be2f9
support.constant.property-value.scss,support.constant.property-value.css#dee2f7
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#dee2f7
support.constant.color.w3c-standard-color-name.css,entity.other.attribute-name.class.css#dee2f7
support.type.vendored.property-name.css#7be2f9
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts#f9867b
support.module.node.js,support.type.object.module.js,support.module.node.js,support.module.node.ts,support.type.object.module.ts,support.module.node.ts#eddc96
variable.other.readwrite.js,meta.object-literal.key.js,support.variable.property.js,support.variable.object.process.js,variable.other.readwrite.ts,meta.object-literal.key.ts,support.variable.property.ts,support.variable.object.process.ts#dee2f7
support.constant.json.js,support.constant.json.ts#fdce68
keyword.operator.expression.instanceof.js,keyword.operator.expression.instanceof.ts#e19ef5
keyword.operator.expression.typeof.js,keyword.operator.expression.typeof.ts#80bbfe
support.type.object.console.js,support.type.object.console.ts#f9867b
entity.name.function.js,support.function.console.js,entity.name.function.ts,support.function.console.ts#80bbfe
keyword.operator.js,keyword.operator.ts#7be2f9
support.type.object.dom.js,support.type.object.dom.ts#f9867b
support.variable.dom.js,support.variable.property.dom.js,support.variable.dom.ts,support.variable.property.dom.ts,#dee2f7
keyword.operator.arithmetic.js,keyword.operator.comparison.js,keyword.operator.arithmetic.ts,keyword.operator.comparison.ts#7be2f9
keyword.operator.sizeof.c#C178DD
variable.parameter.function.language.python#fdce68
support.type.python#7be2f9
keyword.operator.logical.python#e19ef5
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#dee2f7
meta.function-call.generic.python#80bbfe
punctuation.definition.comment#63677e
none#dee2f7
keyword.operator#7be2f9
keyword#e19ef5
variable#f9867b
token.variable.parameter.java#dee2f7
import.storage.java#eddc96
token.package.keyword#e19ef5
token.package#dee2f7
entity.name.function, meta.require, support.function.any-method#80bbfe
entity.name.type.namespace#eddc96
support.class, entity.name.type.class#eddc96
entity.name.class.identifier.namespace.type#eddc96
entity.name.class#fdce68
entity.name.type#eddc96
keyword.control#e19ef5
control.elements, keyword.operator.less#fdce68
keyword.other.special-method#80bbfe
storage#e19ef5
token.storage.js,token.storage.ts#e19ef5
keyword.operator.expression.delete.js,keyword.operator.expression.in.js,keyword.operator.expression.of.js,keyword.operator.expression.instanceof.js,keyword.operator.new.js,keyword.operator.expression.typeof.js,keyword.operator.expression.void.js#e19ef5
token.storage.type.java#eddc96
support.function#7be2f9
support.type.property-name#dee2f7
support.constant.property-value#dee2f7
support.constant.font-name#fdce68
meta.tag#dee2f7
string#a3eea0
entity.other.inherited-class#a3eea0italic
constant.other.symbol#7be2f9
constant.numeric#fdce68
none#fdce68
none#fdce68
constant#dee2f7
punctuation.definition.constant#dee2f7
entity.name.tag#f9867b
entity.other.attribute-name#eddc96
entity.other.attribute-name.id#80bbfe
entity.other.attribute-name.class.css#eddc96
meta.selector#e19ef5
none#D2945D
markup.heading#f9867b
markup.heading punctuation.definition.heading, entity.name.section#80bbfe
keyword.other.unit#fdce68
markup.bold#fdce68
punctuation.definition.bold#eddc96
markup.italic, punctuation.definition.italic#e19ef5
emphasis md#e19ef5
entity.name.section.markdown#f9867b
punctuation.definition.heading.markdown#f9867b
markup.heading.setext#dee2f7
punctuation.definition.bold.markdown#fdce68
markup.inline.raw.markdown#a3eea0
beginning.punctuation.definition.list.markdown#f9867b
markup.quote.markdown#63677eitalic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown#dee2f7
punctuation.definition.metadata.markdown#e19ef5
markup.underline.link.markdown,markup.underline.link.image.markdown#e19ef5
string.other.link.title.markdown,string.other.link.description.markdown#80bbfe
string.regexp#57B6C2
constant.character.escape#57B6C2
punctuation.section.embedded, variable.interpolation#dee2f7
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#f9867b
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#dee2f7
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#dee2f7
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#7be2f9
support.type.property-name.json#f9867b
support.type.property-name.json punctuation#f9867b
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#eddc96
keyword.operator.error-control.php#e19ef5
keyword.operator.type.php#e19ef5
punctuation.section.array.begin.php#dee2f7
punctuation.section.array.end.php#dee2f7
invalid.illegal.non-null-typehinted.php#C24E4E
storage.type.php#eddc96
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#80bbfe
support.constant.ext.php,support.constant.std.php,support.constant.core.php#fdce68
keyword.operator.logical.php,keyword.operator.bitwise.php#7be2f9
punctuation.definition.variable.php#f9867b
meta.function.decorator.python#80bbfe
support.token.decorator.python,meta.function.decorator.identifier.python#7be2f9
function.parameter#fdce68
function.parameter.js,function.parameter.ts#dee2f7
function.brace#dee2f7
function.parameter.ruby, function.parameter.cs#dee2f7
rgb-value#7be2f9
inline-color-decoration rgb-value#fdce68
less rgb-value#fdce68
selector.sass#f9867b
var.this.js,var.this.ts,variable.language.this.js,variable.language.this.ts#eddc96
meta.structure.dictionary meta.structure.dictionary.key, constant.other.object.key string, meta.object-literal.key#dee2f7
block.scope.end,block.scope.begin#dee2f7
entity.name.variable.local.cs#f9867b
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#e19ef5
constant.character.entity.html, punctuation.definition.entity.jsx, entity.name.tag.html.jsx#dee2f7
entity.name.tag.open.jsx, entity.name.tag.close.jsx, entity.name.tag.close.html, entity.name.tag.close.html#f9867b
keyword.operator.accessor.js#dee2f7
support.class.builtin.js#fdce68
ThemeDatabase All Themes by enes ozturk - VS Code Theme