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#020202
  • activityBar.border#202020
  • activityBar.foreground#ff3276
  • activityBar.inactiveForeground#505050
  • activityBarBadge.background#ff3276
  • activityBarBadge.foreground#ffffff
  • badge.background#8d1515
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ff3276a1
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#ff3276d5
  • breadcrumb.foreground#a8a8a8
  • breadcrumbPicker.background#111111
  • button.background#12122c
  • button.hoverBackground#2b2b5a
  • debugToolBar.background#191936
  • debugToolBar.border#191936
  • diffEditor.insertedTextBackground#1eff0013
  • diffEditor.removedTextBackground#ff027822
  • dropdown.background#000000
  • dropdown.border#999999
  • editor.background#000000
  • editor.findMatchBackground#ff802bcc
  • editor.findMatchBorder#ff802b
  • editor.findMatchHighlightBackground#ff2b7c8e
  • editor.findMatchHighlightBorder#ff4444aa
  • editor.findRangeHighlightBackground#3a3a3a
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#2b2b2b50
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#3a3a3a
  • editor.selectionBackground#00c3ff3a
  • editor.selectionForeground#eff8ff
  • editor.selectionHighlightBackground#6241a450
  • editor.selectionHighlightBorder#e18cc9
  • editor.wordHighlightBackground#575757
  • editorBracketMatch.background#ffffff13
  • editorCursor.background#5f3b23
  • editorCursor.foreground#ffffff
  • editorGroup.border#666666
  • editorGroup.dropBackground#2b2b5acc
  • editorGroupHeader.tabsBackground#000
  • editorGutter.addedBackground#ff3276
  • editorGutter.background#050505
  • editorGutter.commentRangeForeground#f1ff28
  • editorGutter.deletedBackground#ff0055
  • editorGutter.modifiedBackground#9765c9
  • editorOverviewRuler.bracketMatchForeground#985bd143
  • editorWhitespace.foreground#ffffff40
  • editorWidget.background#000000
  • editorWidget.border#ffffff
  • focusBorder#223344
  • gitDecoration.addedResourceForeground#ff3276
  • gitDecoration.conflictingResourceForeground#ff62b1
  • gitDecoration.ignoredResourceForeground#31cfff
  • gitDecoration.modifiedResourceForeground#ba66ff
  • gitDecoration.untrackedResourceForeground#4bf53c
  • icon.foreground#ffffff
  • input.background#151515
  • input.border#ff3276
  • input.foreground#ffffff
  • input.placeholderForeground#7d7d7dd0
  • list.activeSelectionBackground#ff3276
  • list.activeSelectionForeground#fff
  • list.dropBackground#a183d333
  • list.errorForeground#ca0d36
  • list.hoverBackground#2c145f7a
  • menu.background#000000
  • menu.foreground#fff
  • panel.background#000000
  • panel.border#ff3276
  • panelSection.dropBackground#310303
  • panelTitle.activeBorder#ff3276
  • panelTitle.activeForeground#ffffff
  • peekView.border#0000ff
  • peekViewEditor.background#000033
  • peekViewEditorGutter.background#00074b
  • peekViewResult.background#090b13
  • peekViewResult.fileForeground#7998fd
  • peekViewTitle.background#1a1a58
  • progressBar.background#ff5500
  • sideBar.background#000
  • sideBar.border#525252
  • sideBar.foreground#b4b4b4
  • sideBarSectionHeader.background#ff3276
  • sideBarSectionHeader.border#888888
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#ff3276
  • statusBar.border#080808
  • statusBar.debuggingBackground#292949
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#ff3276
  • statusBarItem.activeBackground#2c2c62
  • statusBarItem.remoteBackground#312915
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#0f0f0f
  • tab.activeBorder#ff3276
  • tab.activeForeground#e0e0e0
  • tab.border#070707
  • tab.hoverBackground#303030
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#000
  • tab.inactiveForeground#969696
  • tab.inactiveModifiedBorder#ffcc00
  • terminal.background#000000
  • terminal.border#ff3276
  • textLink.activeForeground#fffee6
  • textLink.foreground#ff3276
  • titleBar.activeBackground#ff3276
  • titleBar.activeForeground#fff
  • titleBar.border#000000
  • titleBar.inactiveBackground#ff3276
  • titleBar.inactiveForeground#fff
  • tree.indentGuidesStroke#808080
  • welcomePage.background#000000
  • welcomePage.buttonBackground#424242
  • welcomePage.buttonHoverBackground#1b1b35

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
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#ff2a98
variable.other.generic-type.haskell#8928ff
storage.type.haskell#00ffb3
support.variable.magic.python#ff2a98
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#d4d4d4
variable.parameter.function.language.special.self.python#fffd77
storage.modifier.lifetime.rust#d4d4d4
support.function.std.rust#0ba3ff
entity.name.lifetime.rust#fffd77
variable.language.rust#ff2a98
support.constant.edge#8928ff
constant.other.character-class.regexp#ff2a98
keyword.operator.quantifier.regexp#00ffb3
punctuation.definition.string.begin,punctuation.definition.string.end#00dada
variable.parameter.function#d4d4d4
comment markup.link#777777d5
markup.changed.diff#fffd77
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#0ba3ff
markup.inserted.diff#c9c9c9
markup.deleted.diff#ff2a98
meta.function.c,meta.function.cpp#ff2a98
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#d4d4d4
punctuation.separator.key-value#d4d4d4
keyword.operator.expression.import#0ba3ff
support.constant.math#fffd77
support.constant.property.math#00ffb3
variable.other.constant#fffd77
storage.type.annotation.java, storage.type.object.array.java#fffd77
source.java#ff2a98
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,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,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java#d4d4d4
meta.method.java#0ba3ff
storage.modifier.import.java,storage.type.java,storage.type.generic.java#fffd77
keyword.operator.instanceof.java#8928ff
meta.definition.variable.name.java#ff2a98
keyword.operator.logical#bababa
keyword.operator.bitwise#bababa
keyword.operator.channel#bababa
support.constant.font-name.css,support.constant.property-value.scss,constant.numeric.css,support.constant.property-value.css#ffc0cb
keyword.operator.css,keyword.operator.scss,keyword.operator.less#bababa
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#0f00
punctuation.separator.list.comma.css#d3e700
entity.other.attribute-name.id.css#FF2A98bold
support.type.property-name.css#a6ff9a
punctuation.terminator.rule.css#d3e700
support.module.node,support.type.object.module,support.module.node#fffd77
entity.name.type.module#fffd77
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#d8d8d8
support.constant.json#00ffb3
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#8928ff
support.type.object.console#ff2a98
support.variable.property.process#00ffb3
entity.name.function,support.function.console#0ba3ff
keyword.operator.misc.rust#d4d4d4
keyword.operator.sigil.rust#8928ff
keyword.operator.delete#8928ff
support.type.object.dom#bababa
support.variable.dom,support.variable.property.dom#ff2a98
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#bababa
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#8928ff
punctuation.separator.delimiter#d4d4d4
punctuation.separator.c,punctuation.separator.cpp#8928ff
support.type.posix-reserved.c,support.type.posix-reserved.cpp#bababa
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#8928ff
variable.parameter.function.language.python#00ffb3
support.type.python#bababa
keyword.operator.logical.python#8928ff
variable.parameter.function.python#00ffb3
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#d4d4d4
meta.function-call.generic.python#0ba3ff
constant.character.format.placeholder.other.python#00ffb3
keyword.operator#d4d4d4
keyword.operator.assignment.compound#8928ff
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#bababa
keyword#8928ff
entity.name.namespace#fffd77
variable#ff2a98
variable.c#d4d4d4
variable.language#fffd77
token.variable.parameter.java#d4d4d4
import.storage.java#fffd77
token.package.keyword#8928ff
token.package#d4d4d4
entity.name.function, meta.require, support.function.any-method, variable.function#0ba3ff
entity.name.type.namespace#fffd77
support.class, entity.name.type.class#fffd77
entity.name.class.identifier.namespace.type#fffd77
entity.name.class, variable.other.class.js, variable.other.class.ts#fffd77
variable.other.class.php#ff2a98
entity.name.type#fffd77
keyword.control#8928ff
control.elements, keyword.operator.less#00ffb3
keyword.other.special-method#0ba3ff
storage#8928ff
token.storage#8928ff
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#8928ff
token.storage.type.java#fffd77
support.function#bababa
support.type.property-name#d4d4d4
support.constant.property-value#d4d4d4
support.constant.font-name#7de00f
meta.tag#d4d4d4
string#ffcae3
entity.other.inherited-class#fffd77
constant.other.symbol#bababa
constant.numeric#00ffb3
constant#00ffb3
punctuation.definition.constant#00ffb3
entity.name.tag#ff2a98
entity.other.attribute-name#00ffb3
entity.other.attribute-name.id#0ba3ffbold
entity.other.attribute-name.class.css#00ffb3bold
meta.selector#8928ff
markup.heading#ff2a98
markup.heading punctuation.definition.heading, entity.name.section#0ba3ff
keyword.other.unit#ff2a98
markup.bold,todo.bold#00ffb3
punctuation.definition.bold#fffd77
markup., punctuation.definition.italic,todo.emphasis#8928ff
emphasis md#8928ff
entity.name.section.markdown#ff2a98
punctuation.definition.heading.markdown#ff2a98
punctuation.definition.list.begin.markdown#ff2a98
markup.heading.setext#00ffb3
punctuation.definition.bold.markdown#00ffb3
markup.inline.raw.markdown#c9c9c9
markup.inline.raw.string.markdown#c9c9c9
punctuation.definition.list.markdown#ff2a98
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#ff2a98
beginning.punctuation.definition.list.markdown#ff2a98
punctuation.definition.metadata.markdown#ff2a98
markup.underline.link.markdown,markup.underline.link.image.markdown#8928ff
string.other.link.title.markdown,string.other.link.description.markdown#0ba3ff
string.regexp#bababa
constant.character.escape#bababa
punctuation.section.embedded, variable.interpolation#ff2a98
punctuation.section.embedded.begin,punctuation.section.embedded.end#8928ff
invalid.illegal#ffffff
invalid.illegal.bad-ampersand.html#d4d4d4
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#ff2a98
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#ff2a98
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#c9c9c9
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#bababa
support.type.property-name.json#ff2a98
support.type.property-name.json punctuation#ff2a98
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#8928ff
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#8928ff
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#fffd77
keyword.operator.error-control.php#8928ff
keyword.operator.type.php#8928ff
punctuation.section.array.begin.php#d4d4d4
punctuation.section.array.end.php#d4d4d4
invalid.illegal.non-null-typehinted.php#f44747
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#fffd77
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#0ba3ff
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#d4d4d4
support.constant.core.rust#00ffb3
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#00ffb3
entity.name.goto-label.php,support.other.php#0ba3ff
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#bababa
keyword.operator.regexp.php#8928ff
keyword.operator.comparison.php#bababa
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#8928ff
meta.function.decorator.python#0ba3ff
support.token.decorator.python,meta.function.decorator.identifier.python#bababa
function.parameter#d4d4d4
function.brace#d4d4d4
function.parameter.ruby, function.parameter.cs#d4d4d4
constant.language.symbol.ruby#bababa
rgb-value#bababa
inline-color-decoration rgb-value#00ffb3
less rgb-value#00ffb3
selector.sass#ff2a98
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#fffd77
block.scope.end,block.scope.begin#d4d4d4
storage.type.cs#fffd77
entity.name.variable.local.cs#ff2a98
token.info-token#0ba3ff
token.warn-token#00ffb3
token.error-token#f44747
token.debug-token#8928ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#8928ff
meta.template.expression#d4d4d4
keyword.operator.module#8928ff
support.type.type.flowtype#0ba3ff
support.type.primitive#fffd77
meta.property.object#ff2a98
variable.parameter.function.js#ff2a98
keyword.other.template.begin#c9c9c9
keyword.other.template.end#c9c9c9
keyword.other.substitution.begin#c9c9c9
keyword.other.substitution.end#c9c9c9
keyword.operator.assignment#bababa
keyword.operator.assignment.go#fffd77
keyword.operator.arithmetic.go, keyword.operator.address.go#8928ff
entity.name.package.go#fffd77
support.type.prelude.elm#bababa
support.constant.elm#00ffb3
punctuation.quasi.element#8928ff
constant.character.entity#ff2a98
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#bababa
entity.global.clojure#fffd77
meta.symbol.clojure#ff2a98
constant.keyword.clojure#bababa
meta.arguments.coffee, variable.parameter.function.coffee#ff2a98
source.ini#c9c9c9
meta.scope.prerequisites.makefile#ff2a98
source.makefile#fffd77
storage.modifier.import.groovy#fffd77
meta.method.groovy#0ba3ff
meta.definition.variable.name.groovy#ff2a98
meta.definition.class.inherited.classes.groovy#c9c9c9
support.variable.semantic.hlsl#fffd77
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#8928ff
text.variable, text.bracketed#ff2a98
support.type.swift, support.type.vb.asp#fffd77
entity.name.function.xi#fffd77
entity.name.class.xi#bababa
constant.character.character-class.regexp.xi#ff2a98
constant.regexp.xi#8928ff
keyword.control.xi#bababa
invalid.xi#d4d4d4
beginning.punctuation.definition.quote.markdown.xi#c9c9c9
beginning.punctuation.definition.list.markdown.xi#999999
constant.character.xi#0ba3ff
accent.xi#0ba3ff
wikiword.xi#00ffb3
constant.other.color.rgb-value.xi#ffffff
punctuation.definition.tag.xi#777777d5
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#fffd77
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#ff2a98
meta.brace.square#d4d4d4
comment, punctuation.definition.comment#777777d5
markup.quote.markdown#777777d5
punctuation.definition.block.sequence.item.yaml#d4d4d4
constant.language.symbol.elixir#bababa
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
comment.line.double-slash,comment.block.documentation
keyword.control.import.python,keyword.control.flow.python
markup..markdown

Shiki preview

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

Loading...

Colourfull by Ammar-Khan - VS Code Theme