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.

  • activityBarBadge.background#007ACC
  • editor.background#1E1E1E
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#3A3D41
  • editor.selectionHighlightBackground#ADD6FF26
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • input.placeholderForeground#A6A6A6
  • list.dropBackground#383B3D
  • menu.background#252526
  • menu.foreground#CCCCCC
  • settings.numberInputBackground#292929
  • settings.textInputBackground#292929
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#ccc3
  • sideBarTitle.foreground#BBBBBB
  • statusBarItem.remoteBackground#16825D
  • statusBarItem.remoteForeground#FFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.other.character-class.regexp#e06c75ff
keyword.operator.quantifier.regexp#d19a66ff
punctuation.definition.string.begin,punctuation.definition.string.end#69dd7a
variable.parameter.function#A6B2C0
comment, punctuation.definition.comment#5C6370italic
comment markup.link#5C6370
markup.changed.diff#e0c285
meta.diff.header.from-file,punctuation.definition.from-file.diff#569cd6
markup.inserted.diff#69dd7a
markup.deleted.diff#f76693
meta.function.c#f76693
keyword.control.cpp#fffc58
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#b7c5d3ff
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.super
keyword.operator.expression.import#0095ff
support.constant.math#fffc58
support.constant.property.math#d19a66
variable.other.constant#faa75f
storage.type.annotation.java#fffc58
source.java#f76693
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#b7c5d3ff
meta.method.java#0095ff
storage.modifier.import.java,storage.type.java#fffc58
meta.definition.variable.name.java#f76693
keyword.operator.logical#2cc7da
keyword.operator.bitwise#2cc7da
support.constant.property-value.scss,support.constant.property-value.css#faa75f
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#faa75f
punctuation.separator.list.comma.css#b9c0ca
support.constant.color.w3c-standard-color-name.css#faa75f
support.type.vendored.property-name.css#2cc7da
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#f76693
support.module.node,support.type.object.module#fffc58
variable.other.readwrite,support.variable.property,support.variable.object.process,support.variable.object.node#f76693
comment.line.double-slash,comment.block.documentationnormal
support.constant.json#faa75f
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary#b275ff
support.type.object.console, support.type.object.process#2cc7da
support.variable.property.process#faa75f
entity.name.function,support.function.console#0095ff
keyword.operator#2cc7da
support.type.object.dom#2cc7da
support.variable.dom,support.variable.property.dom#f76693
keyword.operator.arithmetic,keyword.operator.comparison#2cc7da
string.unquoted, meta.object-literal.key, variable.object.property.ts, meta.object.member.object-literal.key#81e0fe
support.class.console, support.function.console#2cc7da
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c#b275ffff
punctuation.separator.delimiter.c#bbbbbb
support.type.posix-reserved.c#57adb8
keyword.operator.sizeof.c#C178DD
variable.parameter.function.language.python#faa75f
support.type.python#2cc7da
keyword.operator.logical.python#b275ff
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#b7c5d3ff
meta.function-call.generic.python#0095ff
constant.character.format.placeholder.other.python#69dd7a
none#A6B2C0
keyword.operator, punctuation.accessor.ts#2cc7da
keyword.operator.type.annotation#b7c5d3ff
keyword#b275ff
variable#f76693
token.variable.parameter.java#b7c5d3ff
import.storage.java#fffc58
token.package.keyword#b275ff
token.package#b7c5d3ff
entity.name.function, meta.require, support.function.any-method, punctuation.decorator.ts#D6AAEC
entity.name.type.namespace#fffc58
support.class, entity.name.type.class#fffc58
entity.name.class.identifier.namespace.type#fffc58
entity.name.class#fffc58
entity.name.type#fffc58
keyword.control#b275ff
control.elements, keyword.operator.less#faa75f
keyword.other.special-method#0095ff
storage#b275ff
token.storage#b275ff
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#b275ff
token.storage.type.java#fffc58
support.function#2cc7da
support.type.property-name#b7c5d3ff
support.constant.property-value#b7c5d3ff
support.constant.font-name#faa75f
meta.tag, text.html.basic#b7c5d3ff
string, entity.other.inherited-class#00ff9c
constant.other.symbol#2cc7da
constant.numeric#faa75f
none#faa75f
none#faa75f
constant#faa75f
punctuation.definition.constant#faa75f
entity.name.tag#60fdff
entity.other.attribute-name#f76693
entity.other.attribute-name.id#0095ffnormal
entity.other.attribute-name.class.css#f76693normal
meta.selector#b275ff
none#D2945D
markup.heading#f76693bold
markup.heading punctuation.definition.heading, entity.name.section#0095ff
keyword.other.unit#faa75f
markup.bold,todo.bold#faa75fbold
punctuation.definition.bold#fffc58
markup.italic,punctuation.definition.italic,todo.emphasis#b275ff
emphasis md#b275ff
entity.name.section.markdown#f76693
punctuation.definition.heading.markdown#f76693
markup.heading.setext#b7c5d3ff
punctuation.definition.bold.markdown#faa75f
markup.inline.raw.markdown#00ff9c
markup.inline.raw.string.markdown#00ff9c
beginning.punctuation.definition.list.markdown#f76693
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown#b7c5d3ff
punctuation.definition.metadata.markdown#b275ff
markup.underline.link.markdown,markup.underline.link.image.markdown#b275ff
string.other.link.title.markdown,string.other.link.description.markdown#0095ff
markup.italic.markdownitalic
markup.bold.markdownbold
string.regexp#2cc7da
constant.character.escape#2cc7da
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.json#f76693
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#f76693
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#00ff9c
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#2cc7da
support.type.property-name.json#f76693
support.type.property-name.json punctuation#f76693
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#fffc58
keyword.operator.error-control.php#b275ff
keyword.operator.type.php#b275ff
punctuation.section.array.begin.php#b7c5d3ff
punctuation.section.array.end.php#b7c5d3ff
invalid.illegal.non-null-typehinted.php#ff0000
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#fffc58
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#0095ff
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#faa75f
entity.name.goto-label.php,support.other.php#0095ff
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#2cc7da
keyword.operator.regexp.php#b275ff
keyword.operator.comparison.php#2cc7da
punctuation.definition.variable.php#f76693
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#b275ff
meta.function.decorator.python#0095ff
support.token.decorator.python,meta.function.decorator.identifier.python#2cc7da
function.parameter#faa75f
function.parameter#b7c5d3ff
function.brace#b7c5d3ff
function.parameter.ruby, function.parameter.cs#b7c5d3ff
rgb-value#2cc7da
inline-color-decoration rgb-value#faa75f
less rgb-value#faa75f
selector.sass#f76693
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#fffc58
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#fffc58
block.scope.end,block.scope.begin#b7c5d3ff
storage.type.cs#fffc58
entity.name.variable.local.cs#f76693
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6