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.

  • actionBar.toggledBackground#383a49
  • activityBar.activeBorder#0078d4
  • activityBar.background#181818
  • activityBar.border#2b2b2b
  • activityBar.foreground#d7d7d7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#0078d4
  • activityBarBadge.foreground#ffffff
  • badge.background#616161
  • badge.foreground#f8f8f8
  • button.background#0078d4
  • button.border#ffffff12
  • button.foreground#ffffff
  • button.hoverBackground#026ec1
  • button.secondaryBackground#313131
  • button.secondaryForeground#cccccc
  • button.secondaryHoverBackground#3c3c3c
  • chat.editedFileForeground#e2c08d
  • chat.slashCommandBackground#34414b
  • chat.slashCommandForeground#40a6ff
  • checkbox.background#313131
  • checkbox.border#3c3c3c
  • debugToolBar.background#181818
  • descriptionForeground#9d9d9d
  • dropdown.background#313131
  • dropdown.border#3c3c3c
  • dropdown.foreground#cccccc
  • dropdown.listBackground#1f1f1f
  • editor.background#1f1f1f
  • editor.findMatchBackground#9e6a03
  • editor.foreground#cccccc
  • editor.selectionHighlightBackground#add6ff26
  • editorGroup.border#ffffff17
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#2b2b2b
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#0078d4
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#cccccc
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#010409
  • editorWidget.background#202020
  • errorForeground#f85149
  • focusBorder#0078d4
  • foreground#cccccc
  • icon.foreground#cccccc
  • input.background#313131
  • input.border#3c3c3c
  • input.foreground#cccccc
  • input.placeholderForeground#989898
  • inputOption.activeBackground#2489db82
  • inputOption.activeBorder#2488db
  • keybindingLabel.foreground#cccccc
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383b3d
  • menu.background#1f1f1f
  • menu.border#454545
  • menu.foreground#cccccc
  • menu.selectionBackground#0078d4
  • menu.separatorBackground#454545
  • notificationCenterHeader.background#1f1f1f
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#1f1f1f
  • notifications.border#2b2b2b
  • notifications.foreground#cccccc
  • panel.background#181818
  • panel.border#2b2b2b
  • panelInput.border#2b2b2b
  • panelTitle.activeBorder#0078d4
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#9d9d9d
  • peekViewEditor.background#1f1f1f
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#1f1f1f
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#3c3c3c
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#0078d4
  • quickInput.background#222222
  • quickInput.foreground#cccccc
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3c3c3c
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#181818
  • sideBar.border#2b2b2b
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#2b2b2b
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#cccccc
  • statusBar.background#181818
  • statusBar.border#2b2b2b
  • statusBar.debuggingBackground#0078d4
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#0078d4
  • statusBar.foreground#cccccc
  • statusBar.noFolderBackground#1f1f1f
  • statusBarItem.focusBorder#0078d4
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#0078d4
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#1f1f1f
  • tab.activeBorder#1f1f1f
  • tab.activeBorderTop#0078d4
  • tab.activeForeground#ffffff
  • tab.border#2b2b2b
  • tab.hoverBackground#1f1f1f
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#9d9d9d
  • tab.lastPinnedBorder#cccccc33
  • tab.selectedBackground#222222
  • tab.selectedBorderTop#6caddf
  • tab.selectedForeground#ffffffa0
  • tab.unfocusedActiveBorder#1f1f1f
  • tab.unfocusedActiveBorderTop#2b2b2b
  • tab.unfocusedHoverBackground#1f1f1f
  • terminal.foreground#cccccc
  • terminal.inactiveSelectionBackground#3a3d41
  • terminal.tab.activeBorder#0078d4
  • textBlockQuote.background#2b2b2b
  • textBlockQuote.border#616161
  • textCodeBlock.background#2b2b2b
  • textLink.activeForeground#4daafc
  • textLink.foreground#4daafc
  • textPreformat.background#3c3c3c
  • textPreformat.foreground#d0d0d0
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#cccccc
  • titleBar.border#2b2b2b
  • titleBar.inactiveBackground#1f1f1f
  • titleBar.inactiveForeground#9d9d9d
  • welcomePage.progress.foreground#0078d4
  • welcomePage.tileBackground#2b2b2b
  • widget.border#313131

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