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.

  • activityBar.activeBorder#0078d4
  • activityBar.background#181818
  • activityBar.border#ffffff15
  • activityBar.foreground#d7d7d7
  • activityBar.inactiveForeground#ffffff80
  • activityBarBadge.background#0078d4
  • activityBarBadge.foreground#ffffff
  • badge.background#0078d4
  • badge.foreground#ffffff
  • button.background#0078d4
  • button.border#ffffff12
  • button.foreground#ffffff
  • button.hoverBackground#0078d4e6
  • button.secondaryBackground#ffffff0f
  • button.secondaryForeground#cccccc
  • button.secondaryHoverBackground#ffffff15
  • checkbox.background#313131
  • checkbox.border#ffffff1f
  • debugToolBar.background#181818
  • descriptionForeground#8b949e
  • diffEditor.insertedLineBackground#23863633
  • diffEditor.insertedTextBackground#2386364d
  • diffEditor.removedLineBackground#da363333
  • diffEditor.removedTextBackground#da36334d
  • dropdown.background#313131
  • dropdown.border#ffffff1f
  • dropdown.foreground#cccccc
  • dropdown.listBackground#313131
  • editor.background#191919
  • editor.findMatchBackground#9e6a03
  • editor.foreground#cccccc
  • editor.inactiveSelectionBackground#3a3d41
  • editor.selectionHighlightBackground#add6ff26
  • editorGroup.border#ffffff17
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#ffffff15
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#0078d4
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorInlayHint.background#8b949e33
  • editorInlayHint.foreground#8b949e
  • editorInlayHint.typeBackground#8b949e33
  • editorInlayHint.typeForeground#8b949e
  • editorLineNumber.activeForeground#cccccc
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#010409
  • editorWidget.background#1f1f1f
  • errorForeground#f85149
  • focusBorder#0078d4
  • foreground#cccccc
  • icon.foreground#cccccc
  • input.background#2a2a2a
  • input.border#ffffff1f
  • input.foreground#cccccc
  • input.placeholderForeground#ffffff79
  • inputOption.activeBackground#2489db82
  • inputOption.activeBorder#2488db
  • keybindingLabel.foreground#cccccc
  • list.activeSelectionBackground#323232
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383b3d
  • menu.background#1f1f1f
  • menu.border#454545
  • menu.foreground#cccccc
  • menu.separatorBackground#454545
  • notificationCenterHeader.background#1f1f1f
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#1f1f1f
  • notifications.border#ffffff15
  • notifications.foreground#cccccc
  • panel.background#181818
  • panel.border#ffffff15
  • panelInput.border#ffffff15
  • panelTitle.activeBorder#0078d4
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#8b949e
  • peekViewEditor.background#1f1f1f
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#1f1f1f
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#ffffff15
  • pickerGroup.foreground#8b949e
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#0078d4
  • quickInput.background#1f1f1f
  • quickInput.foreground#cccccc
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#6e768187
  • scrollbarSlider.background#6e768133
  • scrollbarSlider.hoverBackground#6e768145
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#ffffff1f
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#181818
  • sideBar.border#ffffff15
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#ffffff15
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#cccccc
  • statusBar.background#007acc
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#68217a
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#1f1f1f
  • tab.activeBorder#1f1f1f
  • tab.activeBorderTop#0078d4
  • tab.activeForeground#ffffff
  • tab.border#ffffff15
  • tab.hoverBackground#1f1f1f
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#ffffff80
  • tab.lastPinnedBorder#cccccc33
  • tab.unfocusedActiveBorder#1f1f1f
  • tab.unfocusedActiveBorderTop#ffffff15
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.foreground#cccccc
  • terminal.inactiveSelectionBackground#3a3d41
  • terminal.tab.activeBorder#0078d4
  • textBlockQuote.background#010409
  • textBlockQuote.border#ffffff14
  • textCodeBlock.background#6e768166
  • textLink.activeForeground#40a6ff
  • textLink.foreground#40a6ff
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#cccccc
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#1f1f1f
  • titleBar.inactiveForeground#8b949e
  • welcomePage.progress.foreground#0078d4
  • welcomePage.tileBackground#ffffff0f
  • widget.border#ffffff15

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

Shiki preview

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

Loading...