Skip to main content
CodingTheme

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#212121
  • activityBar.border#121212
  • activityBar.dropBackground#121212
  • activityBar.foreground#e8e8e8
  • activityBarBadge.background#663399
  • activityBarBadge.foreground#e8e8e8
  • badge.background#663399
  • badge.foreground#e8e8e8
  • breadcrumb.background#121212
  • button.background#663399
  • debugToolBar.background#212121
  • dropdown.border#663399
  • dropdown.listBackground#212121
  • editor.background#212121
  • editor.findMatchBackground#444444
  • editor.foreground#e8e8e8
  • editor.lineHighlightBackground#121212
  • editor.rangeHighlightBackground#444444
  • editorGroup.border#663399
  • editorGroup.dropBackground#121212
  • editorUnnecessaryCode.opacity#00000066
  • focusBorder#663399
  • input.border#333333
  • inputOption.activeBorder#333333
  • list.activeSelectionBackground#333333
  • list.activeSelectionForeground#e8e8e8
  • list.dropBackground#333333
  • list.focusBackground#333333
  • list.focusForeground#e8e8e8
  • list.highlightForeground#e8e8e8
  • list.hoverBackground#212121
  • list.hoverForeground#e8e8e8
  • list.inactiveFocusBackground#212121
  • list.inactiveSelectionBackground#333333
  • list.inactiveSelectionForeground#e8e8e8
  • notificationCenter.border#121212
  • notificationCenterHeader.background#212121
  • notificationCenterHeader.foreground#b3b3b3
  • panel.background#212121
  • panel.border#777
  • panel.dropBackground#212121
  • panelTitle.activeBorder#663399
  • peekViewEditor.matchHighlightBackground#6633995a
  • peekViewResult.matchHighlightBackground#6633995a
  • progressBar.background#663399
  • sideBar.background#121212
  • sideBar.border#121212
  • sideBar.foreground#e8e8e8
  • sideBarSectionHeader.background#212121
  • sideBarSectionHeader.border#121212
  • sideBarSectionHeader.foreground#e8e8e8
  • sideBarTitle.foreground#e8e8e8
  • statusBar.background#121212
  • statusBar.border#212121
  • statusBar.debuggingBackground#212121
  • statusBar.debuggingForeground#e8e8e8
  • statusBar.foreground#e8e8e8
  • statusBar.noFolderBackground#121212
  • statusBar.noFolderBorder#212121
  • statusBar.noFolderForeground#e8e8e8
  • statusBarItem.activeBackground#212121
  • statusBarItem.hoverBackground#212121
  • tab.activeBackground#212121
  • terminal.background#212121
  • terminal.border#212121

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.variable.magic.python#e06c75
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python,#abb2bf
variable.parameter.function.language.special.self.python#F1FA8C
storage.modifier.lifetime.rust#abb2bf
support.function.std.rust#A4FFFF
entity.name.type.rust#8BE9FD
entity.name.lifetime.rust#F1FA8C
variable.language.rust#e06c75
support.constant.edge#BD93F9
constant.other.character-class.regexp#e06c75
keyword.operator.quantifier.regexp#FFB86C
punctuation.definition.string.begin,punctuation.definition.string.end#50FA7B
variable.parameter.function#abb2bf
comment, punctuation.definition.comment#7f848eitalic
comment markup.link#5c6370
markup.changed.diff#F1FA8C
meta.diff.header.from-file,punctuation.definition.from-file.diff#A4FFFF
markup.inserted.diff#50FA7B
markup.deleted.diff#e06c75
meta.function.c,meta.function.cpp#e06c75
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#abb2bf
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#A4FFFF
support.constant.math#F1FA8C
support.constant.property.math#e06c75
variable.other.constant#F1FA8C
storage.type.annotation.java#F1FA8C
source.java#e06c75
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#A4FFFF
storage.modifier.import.java,storage.type.java#F1FA8C
meta.definition.variable.name.java#e06c75
keyword.operator.logical.js#8BE9FD
keyword.operator.bitwise#8BE9FD
keyword.operator.channel#8BE9FD
support.constant.property-value.scss,support.constant.property-value.css#FFB86C
keyword.operator.css,keyword.operator.scss,keyword.operator.less#8BE9FD
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#FFB86C
punctuation.separator.list.comma.css#abb2bf
support.constant.color.w3c-standard-color-name.css#FFB86C
support.type.vendored.property-name.css#8BE9FD
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#e06c75
support.module.node, support.type.object.module, support.module.node#FFB86C
entity.name.type.module#F1FA8C
support.variable.property, support.variable.object.process, support.variable.object.node, variable.other.readwrite, meta.object-literal.key#F1FA8C
comment.line.double-slash, comment.block.documentationitalic
support.constant.json#FFB86C
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional#BD93F9
support.type.object.console#e06c75
support.variable.property.process#FFB86C
entity.name.function,support.function.console#A4FFFF
keyword.operator#8BE9FD
support.type.object.dom#8BE9FD
support.variable.dom,support.variable.property.dom#e06c75
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.increment#8BE9FD
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#BD93F9
punctuation.separator.delimiter#abb2bf
punctuation.separator.c,punctuation.separator.cpp#BD93F9
support.type.posix-reserved.c,support.type.posix-reserved.cpp#8BE9FD
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#BD93F9
variable.parameter.function.language.python#FFB86C
support.type.python#8BE9FD
keyword.operator.logical.python#BD93F9
variable.parameter.function.python#FFB86C
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#abb2bf
meta.function-call.generic.python#A4FFFF
constant.character.format.placeholder.other.python#50FA7B
none#abb2bf
keyword.operator#abb2bf
keyword.operator.assignment.compound#BD93F9
keyword#BD93F9
variable#e06c75
variable.language#F1FA8C
token.variable.parameter.java#abb2bf
import.storage.java#F1FA8C
token.package.keyword#BD93F9
token.package#abb2bf
entity.name.function, meta.require, support.function.any-method, variable.function#A4FFFF
entity.name.type.namespace#F1FA8C
support.class, entity.name.type.class#F1FA8C
entity.name.class.identifier.namespace.type#F1FA8C
entity.name.class, variable.other.class.js, variable.other.class.ts#F1FA8C
variable.other.class.php#e06c75
entity.name.type#F1FA8C
keyword.control#BD93F9
keyword.control.import.python, keyword.control.flow.pythonitalic
control.elements, keyword.operator.less#FFB86C
keyword.other.special-method#A4FFFF
storage#BD93F9
token.storage#BD93F9
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#BD93F9
token.storage.type.java#F1FA8C
support.function#8BE9FD
support.type.property-name#8BE9FD
support.constant.property-value#abb2bf
support.constant.font-name#FFB86C
meta.tag#abb2bf
string, entity.other.inherited-class#50FA7B
constant.other.symbol#8BE9FD
constant.numeric#FFB86C
none#FFB86C
none#50FA7B
constant#FFB86C
punctuation.definition.constant#FFB86C
entity.name.tag#e06c75
entity.other.attribute-name#FFB86C
entity.other.attribute-name.id#A4FFFFnormal
entity.other.attribute-name.class.css#FFB86Cnormal
meta.selector#BD93F9
none#FFB86C
markup.heading#e06c75bold
markup.heading punctuation.definition.heading, entity.name.section#A4FFFF
keyword.other.unit#e06c75
markup.bold,todo.bold#FFB86Cbold
punctuation.definition.bold#F1FA8C
markup.italic, punctuation.definition.italic, todo.emphasis#BD93F9
emphasis md#BD93F9
entity.name.section.markdown#e06c75
punctuation.definition.heading.markdown#e06c75
punctuation.definition.list.begin.markdown#e06c75
markup.heading.setext#abb2bf
punctuation.definition.bold.markdown#FFB86C
markup.inline.raw.markdown#50FA7B
markup.inline.raw.string.markdown#50FA7B
punctuation.definition.list.markdown#e06c75
markup.quote.markdown#5c6370italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#e06c75
beginning.punctuation.definition.list.markdown#e06c75
punctuation.definition.metadata.markdown#e06c75
markup.underline.link.markdown, markup.underline.link.image.markdown#BD93F9
string.other.link.title.markdown, string.other.link.description.markdown#A4FFFF
markup.italic.markdownitalic
markup.bold.markdownbold
string.regexp#8BE9FD
constant.character.escape#8BE9FD
punctuation.section.embedded, variable.interpolation#e06c75
invalid.illegal#f8f8f2
invalid.broken#f8f8f2
invalid.deprecated#f8f8f2
invalid.unimplemented#f8f8f2
source.json meta.structure.dictionary.json > string.quoted.json#e06c75
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#e06c75
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#50FA7B
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#8BE9FD
support.type.property-name.json#e06c75
support.type.property-name.json punctuation#e06c75
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#BD93F9
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#BD93F9
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#F1FA8C
keyword.operator.red-control.php#BD93F9
keyword.operator.type.php#BD93F9
punctuation.section.array.begin.php#abb2bf
punctuation.section.array.end.php#abb2bf
invalid.illegal.non-null-typehinted.php#ff5555
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#F1FA8C
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#A4FFFF
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#abb2bf
support.constant.ext.php, support.constant.std.php, support.constant.core.php, support.constant.parser-token.php#FFB86C
entity.name.goto-label.php,support.other.php#A4FFFF
keyword.operator.logical.php, keyword.operator.bitwise.php, keyword.operator.arithmetic.php#8BE9FD
keyword.operator.regexp.php#BD93F9
keyword.operator.comparison.php#8BE9FD
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#BD93F9
meta.function.decorator.python#A4FFFF
support.token.decorator.python, meta.function.decorator.identifier.python#8BE9FD
function.parameter.js#8BE9FD
function.brace#abb2bf
function.parameter.ruby, function.parameter.cs#abb2bf
constant.language.symbol.ruby#8BE9FD
rgb-value#8BE9FD
inline-color-decoration rgb-value#FFB86C
less rgb-value#FFB86C
selector.sass#e06c75
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#F1FA8C
block.scope.end,block.scope.begin#abb2bf
storage.type.cs#F1FA8C
entity.name.variable.local.cs#e06c75
token.info-token#A4FFFF
token.warn-token#FFB86C
token.red-token#ff5555
token.debug-token#BD93F9
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#BD93F9
meta.template.expression#abb2bf
keyword.operator.module#BD93F9
support.type.type.flowtype#A4FFFF
support.type.primitive#F1FA8C
meta.property.object#e06c75
variable.parameter.function.js#e06c75
keyword.other.template.begin#50FA7B
keyword.other.template.end#50FA7B
keyword.other.substitution.begin#50FA7B
keyword.other.substitution.end#50FA7B
keyword.operator.assignment#8BE9FD
keyword.operator.assignment.go, keyword.operator.address.go#F1FA8C
entity.name.package.go#F1FA8C
support.type.prelude.elm#8BE9FD
support.constant.elm#FFB86C
punctuation.quasi.element#BD93F9
constant.character.entity#e06c75
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#8BE9FD
entity.global.clojure#F1FA8C
meta.symbol.clojure#e06c75
constant.keyword.clojure#8BE9FD
meta.arguments.coffee, variable.parameter.function.coffee#e06c75
source.ini#50FA7B
meta.scope.prerequisites.makefile#e06c75
source.makefile#F1FA8C
storage.modifier.import.groovy#F1FA8C
meta.method.groovy#A4FFFF
meta.definition.variable.name.groovy#e06c75
meta.definition.class.inherited.classes.groovy#50FA7B
support.variable.semantic.hlsl#F1FA8C
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl#BD93F9
text.variable, text.bracketed#e06c75
support.type.swift, support.type.vb.asp#F1FA8C

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Vulgocode Theme by Alexandre Ramos - VS Code Theme