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#282c34
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#282c34
  • button.background#404754
  • button.secondaryBackground#30333d
  • button.secondaryForeground#c0bdbd
  • checkbox.border#404754
  • debugToolBar.background#21252b
  • descriptionForeground#e4ebff
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#21252b
  • dropdown.border#21252b
  • editor.background#282c34
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#6199ff2f
  • editor.foreground#e4ebff
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#e4ebff26
  • editor.wordHighlightStrongBorder#7f848e
  • editorBracketHighlight.foreground1#66ffb4
  • editorBracketHighlight.foreground2#c678dd
  • editorBracketHighlight.foreground3#56b6c2
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#c24038
  • editorGroup.background#181a1f
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#21252b
  • editorGutter.addedBackground#109868
  • editorGutter.deletedBackground#9A353D
  • editorGutter.modifiedBackground#948B60
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorHoverWidget.highlightForeground#61afef
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.background#3b4048
  • editorInlayHint.background#2c313c
  • editorInlayHint.foreground#e4ebff
  • editorLineNumber.activeForeground#e4ebff
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#21252b
  • editorOverviewRuler.addedBackground#109868
  • editorOverviewRuler.deletedBackground#9A353D
  • editorOverviewRuler.modifiedBackground#948B60
  • editorRuler.foreground#e4ebff26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#66ffb4
  • editorWhitespace.foreground#ffffff1d
  • editorWidget.background#21252b
  • focusBorder#3e4452
  • gitDecoration.ignoredResourceForeground#636b78
  • input.background#1d1f23
  • input.foreground#e4ebff
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#323842
  • list.focusForeground#f0f0f0
  • list.highlightForeground#ecebeb
  • list.hoverBackground#2c313a
  • list.hoverForeground#e4ebff
  • list.inactiveSelectionBackground#323842
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#66ffb4
  • menu.foreground#e4ebff
  • menu.separatorBackground#343a45
  • minimapGutter.addedBackground#109868
  • minimapGutter.deletedBackground#9A353D
  • minimapGutter.modifiedBackground#948B60
  • panel.border#3e4452
  • panelSectionHeader.background#21252b
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbar.shadow#23252c
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • settings.focusedRowBackground#282c34
  • settings.headerForeground#fff
  • sideBar.background#21252b
  • sideBar.foreground#e4ebff
  • sideBarSectionHeader.background#282c34
  • sideBarSectionHeader.foreground#e4ebff
  • statusBar.background#21252b
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#ff000000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252b
  • statusBarItem.remoteBackground#4d78cc
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#282c34
  • tab.activeBorder#b4b4b4
  • tab.activeForeground#dcdcdc
  • tab.border#181a1f
  • tab.hoverBackground#323842
  • tab.inactiveBackground#21252b
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#3f4451
  • terminal.ansiBlue#4aa5f0
  • terminal.ansiBrightBlack#4f5666
  • terminal.ansiBrightBlue#4dc4ff
  • terminal.ansiBrightCyan#4cd1e0
  • terminal.ansiBrightGreen#a5e075
  • terminal.ansiBrightMagenta#de73ff
  • terminal.ansiBrightRed#ff616e
  • terminal.ansiBrightWhite#e6e6e6
  • terminal.ansiBrightYellow#f0a45d
  • terminal.ansiCyan#42b3c2
  • terminal.ansiGreen#8cc265
  • terminal.ansiMagenta#c162de
  • terminal.ansiRed#e05561
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#d18f52
  • terminal.background#282c34
  • terminal.border#3e4452
  • terminal.foreground#e4ebff
  • terminal.selectionBackground#e4ebff30
  • textBlockQuote.background#2e3440
  • textBlockQuote.border#4b5362
  • textLink.foreground#61afef
  • textPreformat.foreground#66ffb4
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#282c34
  • titleBar.inactiveForeground#6b717d
  • tree.indentGuidesStroke#ffffff1d
  • walkThrough.embeddedEditorBackground#2e3440
  • welcomePage.buttonHoverBackground#404754

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded#e4ebff
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#e06c75
variable.other.generic-type.haskell#c678dd
storage.type.haskell#66ffb4
support.variable.magic.python#e06c75
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#e4ebff
variable.parameter.function.language.special.self.python#e5c07b
variable.parameter.function.language.special.cls.python#e5c07b
storage.modifier.lifetime.rust#e4ebff
support.function.std.rust#61afef
entity.name.lifetime.rust#e5c07b
variable.language.rust#e06c75
support.constant.edge#c678dd
constant.other.character-class.regexp#e06c75
keyword.operator.word#c678dd
keyword.operator.quantifier.regexp#66ffb4
variable.parameter.function#e4ebff
comment markup.link#5c6370
markup.changed.diff#e5c07b
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#61afef
markup.inserted.diff#9ECE6A
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#e4ebff
punctuation.separator.key-value#e4ebff
keyword.operator.expression.import#61afef
support.constant.math#e5c07b
support.constant.property.math#66ffb4
variable.other.constant#e5c07b
storage.type.annotation.java, storage.type.object.array.java#e5c07b
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,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#e4ebff
meta.method.java#61afef
storage.modifier.import.java,storage.type.java,storage.type.generic.java#e5c07b
keyword.operator.instanceof.java#c678dd
meta.definition.variable.name.java#e06c75
keyword.operator.logical#56b6c2
keyword.operator.bitwise#56b6c2
keyword.operator.channel#56b6c2
support.constant.property-value.scss,support.constant.property-value.css#66ffb4
keyword.operator.css,keyword.operator.scss,keyword.operator.less#56b6c2
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#66ffb4
punctuation.separator.list.comma.css#e4ebff
support.constant.color.w3c-standard-color-name.css#66ffb4
support.type.vendored.property-name.css#56b6c2
support.module.node,support.type.object.module,support.module.node#e5c07b
entity.name.type.module#e5c07b
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#e06c75
support.constant.json#66ffb4
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#c678dd
support.type.object.console#e06c75
support.variable.property.process#66ffb4
entity.name.function,support.function.console#61afef
keyword.operator.misc.rust#e4ebff
keyword.operator.sigil.rust#c678dd
keyword.operator.delete#c678dd
support.type.object.dom#56b6c2
support.variable.dom,support.variable.property.dom#e06c75
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#56b6c2
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#c678dd
punctuation.separator.delimiter#e4ebff
punctuation.separator.c,punctuation.separator.cpp#c678dd
support.type.posix-reserved.c,support.type.posix-reserved.cpp#56b6c2
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#c678dd
variable.parameter.function.language.python#66ffb4
support.type.python#56b6c2
keyword.operator.logical.python#c678dd
variable.parameter.function.python#66ffb4
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#e4ebff
meta.function-call.generic.python#61afef
constant.character.format.placeholder.other.python#66ffb4
keyword.operator#e4ebff
keyword.operator.assignment.compound#c678dd
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#56b6c2
keyword#c678dd
entity.name.namespace#e5c07b
variable#e06c75
variable.c#e4ebff
variable.language#e5c07b
token.variable.parameter.java#e4ebff
import.storage.java#e5c07b
token.package.keyword#c678dd
token.package#e4ebff
entity.name.function, meta.require, support.function.any-method, variable.function#61afef
entity.name.type.namespace#e5c07b
support.class, entity.name.type.class#e5c07b
entity.name.class.identifier.namespace.type#e5c07b
entity.name.class, variable.other.class.js, variable.other.class.ts#e5c07b
variable.other.class.php#e06c75
entity.name.type#e5c07b
keyword.control#c678dditalic
control.elements, keyword.operator.less#66ffb4
keyword.other.special-method#61afef
storage#c678dditalic
token.storage#c678dd
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#c678dd
token.storage.type.java#e5c07b
support.function#56b6c2
support.type.property-name#e4ebff
support.type.property-name.toml, support.type.property-name.table.toml, support.type.property-name.array.toml#e06c75
support.constant.property-value#e4ebff
support.constant.font-name#66ffb4
meta.tag#e4ebff
string#9ECE6A
constant.other.symbol#56b6c2
constant.numeric#66ffb4
constant#66ffb4
punctuation.definition.constant#66ffb4
entity.name.tag#e06c75
entity.other.attribute-name#66ffb4
entity.other.attribute-name.id#61afef
entity.other.attribute-name.class.css#66ffb4
meta.selector#c678dd
markup.heading#e06c75
markup.heading punctuation.definition.heading, entity.name.section#61afef
keyword.other.unit#e06c75
markup.bold,todo.bold#66ffb4
punctuation.definition.bold#e5c07b
markup.italic, punctuation.definition.italic,todo.emphasis#c678dd
emphasis md#c678dd
entity.name.section.markdown#e06c75
punctuation.definition.heading.markdown#e06c75
punctuation.definition.list.begin.markdown#e5c07b
markup.heading.setext#e4ebff
punctuation.definition.bold.markdown#66ffb4
markup.inline.raw.markdown#9ECE6A
markup.inline.raw.string.markdown#9ECE6A
punctuation.definition.raw.markdown#e5c07b
punctuation.definition.list.markdown#e5c07b
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#c678dd
string.other.link.title.markdown,string.other.link.description.markdown#61afef
markup.raw.monospace.asciidoc#9ECE6A
punctuation.definition.asciidoc#e5c07b
markup.list.asciidoc#e5c07b
markup.link.asciidoc,markup.other.url.asciidoc#c678dd
string.unquoted.asciidoc,markup.other.url.asciidoc#61afef
string.regexp#56b6c2
punctuation.section.embedded, variable.interpolation#e06c75
punctuation.section.embedded.begin,punctuation.section.embedded.end#c678dd
invalid.illegal#ffffff
invalid.illegal.bad-ampersand.html#e4ebff
invalid.illegal.unrecognized-tag.html#e06c75
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.deprecated.entity.other.attribute-name.html#66ffb4
invalid.unimplemented#ffffff
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#9ECE6A
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#56b6c2
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#c678dd
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#c678dd
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php#e5c07b
keyword.operator.error-control.php#c678dd
keyword.operator.type.php#c678dd
punctuation.section.array.begin.php#e4ebff
punctuation.section.array.end.php#e4ebff
invalid.illegal.non-null-typehinted.php#f44747
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#e5c07b
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#61afef
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#e4ebff
support.constant.core.rust#66ffb4
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#66ffb4
entity.name.goto-label.php,support.other.php#61afef
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#56b6c2
keyword.operator.regexp.php#c678dd
keyword.operator.comparison.php#56b6c2
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#c678dd
meta.function.decorator.python#61afef
support.token.decorator.python,meta.function.decorator.identifier.python#56b6c2
function.parameter#e4ebff
function.brace#e4ebff
function.parameter.ruby, function.parameter.cs#e4ebff
constant.language.symbol.ruby#56b6c2
constant.language.symbol.hashkey.ruby#56b6c2
rgb-value#56b6c2
inline-color-decoration rgb-value#66ffb4
less rgb-value#66ffb4
selector.sass#e06c75
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#e5c07b
block.scope.end,block.scope.begin#e4ebff
storage.type.cs#e5c07b
entity.name.variable.local.cs#e06c75
token.info-token#61afef
token.warn-token#66ffb4
token.error-token#f44747
token.debug-token#c678dd
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#c678dd
meta.template.expression#e4ebff
keyword.operator.module#c678dd
support.type.type.flowtype#61afef
support.type.primitive#e5c07b
meta.property.object#e06c75
variable.parameter.function.js#e06c75
keyword.other.template.begin#9ECE6A
keyword.other.template.end#9ECE6A
keyword.other.substitution.begin#9ECE6A
keyword.other.substitution.end#9ECE6A
keyword.operator.assignment#56b6c2
keyword.operator.assignment.go#e5c07b
keyword.operator.arithmetic.go, keyword.operator.address.go#c678dd
entity.name.package.go#e5c07b
support.type.prelude.elm#56b6c2
support.constant.elm#66ffb4
punctuation.quasi.element#c678dd
constant.character.entity#e06c75
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#56b6c2
entity.global.clojure#e5c07b
meta.symbol.clojure#e06c75
constant.keyword.clojure#56b6c2
meta.arguments.coffee, variable.parameter.function.coffee#e06c75
source.ini#9ECE6A
meta.scope.prerequisites.makefile#e06c75
source.makefile#e5c07b
storage.modifier.import.groovy#e5c07b
meta.method.groovy#61afef
meta.definition.variable.name.groovy#e06c75
meta.definition.class.inherited.classes.groovy#9ECE6A
support.variable.semantic.hlsl#e5c07b
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#c678dd
text.variable, text.bracketed#e06c75
support.type.swift, support.type.vb.asp#e5c07b
entity.name.function.xi#e5c07b
entity.name.class.xi#56b6c2
constant.character.character-class.regexp.xi#e06c75
constant.regexp.xi#c678dd
keyword.control.xi#56b6c2
invalid.xi#e4ebff
beginning.punctuation.definition.quote.markdown.xi#9ECE6A
beginning.punctuation.definition.list.markdown.xi#7f848e
constant.character.xi#61afef
accent.xi#61afef
wikiword.xi#66ffb4
constant.other.color.rgb-value.xi#ffffff
punctuation.definition.tag.xi#5c6370
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#e5c07b
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#e06c75
meta.brace.square#e4ebff
comment, punctuation.definition.comment#7f848eitalic
markup.quote.markdown#5c6370
punctuation.definition.block.sequence.item.yaml#e4ebff
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir#56b6c2
entity.name.variable.parameter.cs#e5c07b
entity.name.variable.field.cs#e06c75
markup.deleted#e06c75
markup.inserted#9ECE6A
markup.underlineunderline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#BE5046
support.other.namespace.php#e4ebff
variable.parameter.function.latex#e06c75
variable.other.object#e5c07b
variable.other.constant.property#e06c75
entity.other.inherited-class#e5c07b
variable.other.readwrite.c#e06c75
entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php#e4ebff
constant.numeric.decimal.asm.x86_64#c678dd
support.other.parenthesis.regexp#66ffb4
constant.character.escape#56b6c2
string.regexp#e06c75
log.info#9ECE6A
log.warning#e5c07b
log.error#e06c75
keyword.operator.expression.is#c678dd
entity.name.label#e06c75
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
markup.italic.markdownitalic

Shiki preview

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

Loading...