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.background#0e0a0a
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#0099ff
  • activityBarBadge.foreground#ffffff
  • badge.background#181a1f
  • button.background#528bff
  • debugToolBar.background#181a1f
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#1d1f23
  • dropdown.border#181a1f
  • editor.background#121212
  • editor.findMatchBackground#314365
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#31436580
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#1d1f23
  • editor.selectionBackground#3e4451
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#484e5b80
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#497FFD
  • editorCursor.foreground#497FFD
  • editorError.foreground#704040
  • editorGroup.border#181a1f
  • editorGroup.emptyBackground#181a1f
  • editorGroupHeader.tabsBackground#181a1f
  • editorHoverWidget.background#181a1f
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground1#c8c8c859
  • editorIndentGuide.background1#3b4048
  • editorLineNumber.activeForeground#495162
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#181a1f
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#181a1f
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#407040
  • editorWhitespace.foreground#484a50
  • editorWidget.background#181a1f
  • focusBorder#181a1f
  • input.background#1d1f23
  • list.activeSelectionBackground#0e0a0a
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#0e0a0a
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#0e0a0a
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#d19a66
  • menu.foreground#c8c8c8
  • peekViewEditor.background#202020
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#17171b
  • sideBarSectionHeader.background#0e0a0a
  • statusBar.background#000000
  • statusBar.debuggingBackground#020202
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#e0e0e0
  • statusBar.noFolderBackground#020202
  • statusBarItem.hoverBackground#2c313a
  • statusBarItem.remoteBackground#517bce
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#121212
  • tab.activeForeground#dcdcdc
  • tab.border#181a1f
  • tab.hoverBackground#323842
  • tab.inactiveBackground#181a1f
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#1E90FF
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#00BFFF
  • terminal.ansiBrightCyan#00FFFF
  • terminal.ansiBrightGreen#7CFC00
  • terminal.ansiBrightMagenta#FF00FF
  • terminal.ansiBrightRed#FF4500
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD700
  • terminal.ansiCyan#00CED1
  • terminal.ansiGreen#32CD32
  • terminal.ansiMagenta#DA70D6
  • terminal.ansiRed#FF0000
  • terminal.ansiWhite#F5F5F5
  • terminal.ansiYellow#FFA500
  • terminal.background#0e0a0a
  • terminal.border#abb2bf
  • terminal.foreground#abb2bf
  • terminal.selectionBackground#abb2bf30
  • textLink.foreground#61afef
  • titleBar.activeBackground#020202
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#020202
  • titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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