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#00be20
  • activityBar.inactiveForeground#505050
  • activityBarBadge.background#00be20
  • activityBarBadge.foreground#ffffff
  • badge.background#8d1515
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#00be20a1
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#00be20d5
  • 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#00be20
  • 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#00be20
  • gitDecoration.conflictingResourceForeground#ff62b1
  • gitDecoration.ignoredResourceForeground#31cfff
  • gitDecoration.modifiedResourceForeground#ba66ff
  • gitDecoration.untrackedResourceForeground#4bf53c
  • icon.foreground#ffffff
  • input.background#151515
  • input.border#00be20
  • input.foreground#ffffff
  • input.placeholderForeground#7d7d7dd0
  • list.activeSelectionBackground#00be20
  • list.dropBackground#a183d333
  • list.errorForeground#ca0d36
  • list.hoverBackground#2c145f7a
  • menu.background#000000
  • menu.foreground#fff
  • panel.background#000000
  • panel.border#00be20
  • panelSection.dropBackground#310303
  • panelTitle.activeBorder#00be20
  • 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#00be20
  • sideBarSectionHeader.border#888888
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#00be20
  • statusBar.border#080808
  • statusBar.debuggingBackground#292949
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#00be20
  • statusBarItem.activeBackground#2c2c62
  • statusBarItem.remoteBackground#312915
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#0f0f0f
  • tab.activeBorder#00be20
  • 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#00be20
  • textLink.activeForeground#fffee6
  • textLink.foreground#00be20
  • titleBar.activeBackground#00be20
  • titleBar.activeForeground#fff
  • titleBar.border#000000
  • titleBar.inactiveBackground#00be20
  • 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#51f04c
variable.other.generic-type.haskell#d1e6a2
storage.type.haskell#ff2c7d
support.variable.magic.python#fff
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#b8c9b6
variable.parameter.function.language.special.self.python#c5fb34
storage.modifier.lifetime.rust#b8c9b6
support.function.std.rust#ffa700
entity.name.lifetime.rust#c5fb34
variable.language.rust#51f04c
support.constant.edge#d1e6a2
constant.other.character-class.regexp#51f04c
keyword.operator.quantifier.regexp#ff2c7d
punctuation.definition.string.begin,punctuation.definition.string.end#969f90
variable.parameter.function#b8c9b6
comment markup.link#475e3f
markup.changed.diff#c5fb34
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#ffa700
markup.inserted.diff#969f90
markup.deleted.diff#51f04c
meta.function.c,meta.function.cpp#51f04c
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#b8c9b6
punctuation.separator.key-value#b8c9b6
keyword.operator.expression.import#ffa700
support.constant.math#c5fb34
support.constant.property.math#ff2c7d
variable.other.constant#c5fb34
storage.type.annotation.java, storage.type.object.array.java#c5fb34
source.java#51f04c
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#b8c9b6
meta.method.java#ffa700
storage.modifier.import.java,storage.type.java,storage.type.generic.java#c5fb34
keyword.operator.instanceof.java#d1e6a2
meta.definition.variable.name.java#51f04c
keyword.operator.logical#afffa2
keyword.operator.bitwise#afffa2
keyword.operator.channel#afffa2
support.constant.property-value.scss,support.constant.property-value.css#ff533c
keyword.operator.css,keyword.operator.scss,keyword.operator.less#afffa2
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#ff533c
punctuation.separator.list.comma.css#B8C9B6
support.constant.color.w3c-standard-color-name.css#e70060
support.type.vendored.property-name.css#afffa2
support.module.node,support.type.object.module,support.module.node#c5fb34
entity.name.type.module#c5fb34
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#51f04c
support.constant.json#ff533c
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#d1e6a2
support.type.object.console#51f04c
support.variable.property.process#ff533c
entity.name.function,support.function.console#ffa700
keyword.operator.misc.rust#b8c9b6
keyword.operator.sigil.rust#d1e6a2
keyword.operator.delete#d1e6a2
support.type.object.dom#afffa2
support.variable.dom,support.variable.property.dom#51f04c
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#afffa2
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#d1e6a2
punctuation.separator.delimiter#b8c9b6
punctuation.separator.c,punctuation.separator.cpp#d1e6a2
support.type.posix-reserved.c,support.type.posix-reserved.cpp#afffa2
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#d1e6a2
variable.parameter.function.language.python#ff2c7d
support.type.python#afffa2
keyword.operator.logical.python#d1e6a2
variable.parameter.function.python#ff2c7d
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#b8c9b6
meta.function-call.generic.python#ffa700
constant.character.format.placeholder.other.python#ff2c7d
keyword.operator#b8c9b6
keyword.operator.assignment.compound#d1e6a2
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#afffa2
keyword#d1e6a2
entity.name.namespace#c5fb34
variable#51f04c
variable.c#b8c9b6
variable.language#c5fb34
token.variable.parameter.java#b8c9b6
import.storage.java#c5fb34
token.package.keyword#d1e6a2
token.package#b8c9b6
entity.name.function, meta.require, support.function.any-method, variable.function#ffa700
entity.name.type.namespace#c5fb34
support.class, entity.name.type.class#c5fb34
entity.name.class.identifier.namespace.type#c5fb34
entity.name.class, variable.other.class.js, variable.other.class.ts#c5fb34
variable.other.class.php#51f04c
entity.name.type#c5fb34
keyword.control#d1e6a2
control.elements, keyword.operator.less#ff2c7d
keyword.other.special-method#ffa700
storage#d1e6a2
token.storage#d1e6a2
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#d1e6a2
token.storage.type.java#c5fb34
support.function#afffa2
support.type.property-name#b8c9b6
support.constant.property-value#b8c9b6
support.constant.font-name#ff2c7d
meta.tag#b8c9b6
string#ffbc2c
entity.other.inherited-class#c5fb34
constant.other.symbol#afffa2
constant.numeric#ff2c7d
constant#ff2c7d
punctuation.definition.constant#ff2c7d
entity.name.tag#51f04c
entity.other.attribute-name#ff2c7d
entity.other.attribute-name.id#ffa700normal
entity.other.attribute-name.class.css#ff2c7dnormal
meta.selector#d1e6a2
markup.heading#51f04c
markup.heading punctuation.definition.heading, entity.name.section#ffa700
keyword.other.unit#51f04c
markup.bold,todo.bold#ff2c7d
punctuation.definition.bold#c5fb34
markup.italic, punctuation.definition.italic,todo.emphasis#d1e6a2
emphasis md#d1e6a2
entity.name.section.markdown#51f04c
punctuation.definition.heading.markdown#51f04c
punctuation.definition.list.begin.markdown#51f04c
markup.heading.setext#b8c9b6
punctuation.definition.bold.markdown#ff2c7d
markup.inline.raw.markdown#969f90
markup.inline.raw.string.markdown#969f90
punctuation.definition.list.markdown#51f04c
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#51f04c
beginning.punctuation.definition.list.markdown#51f04c
punctuation.definition.metadata.markdown#51f04c
markup.underline.link.markdown,markup.underline.link.image.markdown#d1e6a2
string.other.link.title.markdown,string.other.link.description.markdown#ffa700
string.regexp#afffa2
constant.character.escape#afffa2
punctuation.section.embedded, variable.interpolation#51f04c
punctuation.section.embedded.begin,punctuation.section.embedded.end#d1e6a2
invalid.illegal#ffffff
invalid.illegal.bad-ampersand.html#b8c9b6
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#51f04c
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#51f04c
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#969f90
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#afffa2
support.type.property-name.json#51f04c
support.type.property-name.json punctuation#51f04c
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#d1e6a2
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#d1e6a2
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#c5fb34
keyword.operator.error-control.php#d1e6a2
keyword.operator.type.php#d1e6a2
punctuation.section.array.begin.php#b8c9b6
punctuation.section.array.end.php#b8c9b6
invalid.illegal.non-null-typehinted.php#f44747
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#c5fb34
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#ffa700
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#b8c9b6
support.constant.core.rust#ff2c7d
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#ff2c7d
entity.name.goto-label.php,support.other.php#ffa700
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#afffa2
keyword.operator.regexp.php#d1e6a2
keyword.operator.comparison.php#afffa2
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#d1e6a2
meta.function.decorator.python#ffa700
support.token.decorator.python,meta.function.decorator.identifier.python#afffa2
function.parameter#b8c9b6
function.brace#b8c9b6
function.parameter.ruby, function.parameter.cs#b8c9b6
constant.language.symbol.ruby#afffa2
rgb-value#afffa2
inline-color-decoration rgb-value#ff2c7d
less rgb-value#ff2c7d
selector.sass#51f04c
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#c5fb34
block.scope.end,block.scope.begin#b8c9b6
storage.type.cs#c5fb34
entity.name.variable.local.cs#51f04c
token.info-token#ffa700
token.warn-token#ff2c7d
token.error-token#f44747
token.debug-token#d1e6a2
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#d1e6a2
meta.template.expression#b8c9b6
keyword.operator.module#d1e6a2
support.type.type.flowtype#ffa700
support.type.primitive#c5fb34
meta.property.object#51f04c
variable.parameter.function.js#51f04c
keyword.other.template.begin#969f90
keyword.other.template.end#969f90
keyword.other.substitution.begin#969f90
keyword.other.substitution.end#969f90
keyword.operator.assignment#afffa2
keyword.operator.assignment.go#c5fb34
keyword.operator.arithmetic.go, keyword.operator.address.go#d1e6a2
entity.name.package.go#c5fb34
support.type.prelude.elm#afffa2
support.constant.elm#ff2c7d
punctuation.quasi.element#d1e6a2
constant.character.entity#51f04c
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#afffa2
entity.global.clojure#c5fb34
meta.symbol.clojure#51f04c
constant.keyword.clojure#afffa2
meta.arguments.coffee, variable.parameter.function.coffee#51f04c
source.ini#969f90
meta.scope.prerequisites.makefile#51f04c
source.makefile#c5fb34
storage.modifier.import.groovy#c5fb34
meta.method.groovy#ffa700
meta.definition.variable.name.groovy#51f04c
meta.definition.class.inherited.classes.groovy#969f90
support.variable.semantic.hlsl#c5fb34
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#d1e6a2
text.variable, text.bracketed#51f04c
support.type.swift, support.type.vb.asp#c5fb34
entity.name.function.xi#c5fb34
entity.name.class.xi#afffa2
constant.character.character-class.regexp.xi#51f04c
constant.regexp.xi#d1e6a2
keyword.control.xi#afffa2
invalid.xi#b8c9b6
beginning.punctuation.definition.quote.markdown.xi#969f90
beginning.punctuation.definition.list.markdown.xi#475e3f
constant.character.xi#ffa700
accent.xi#ffa700
wikiword.xi#ff2c7d
constant.other.color.rgb-value.xi#ffffff
punctuation.definition.tag.xi#475e3f
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#c5fb34
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#51f04c
meta.brace.square#b8c9b6
comment, punctuation.definition.comment#999999italic
markup.quote.markdown#475e3f
punctuation.definition.block.sequence.item.yaml#b8c9b6
constant.language.symbol.elixir#afffa2
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
comment.line.double-slash,comment.block.documentationitalic
keyword.control.import.python,keyword.control.flow.pythonitalic
markup.italic.markdownitalic

Shiki preview

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

Loading...

Colourfull by Ammar-Khan - VS Code Theme