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#282c34
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#282c34
  • button.background#404754
  • debugToolBar.background#21252b
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#21252b
  • dropdown.border#21252b
  • editor.background#282c34
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#314365
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#ddd
  • editor.wordHighlightBackground#484e5b
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorActiveLineNumber.foreground#737984
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#c24038
  • editorGroup.background#181a1f
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#21252b
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.background#3b4048
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#21252b
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#21252b
  • focusBorder#464646
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • peekViewEditor.matchHighlightBackground#29244b
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#21252b
  • sideBarSectionHeader.background#282c34
  • statusBar.background#21252b
  • statusBar.debuggingBackground#7e0097
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252b
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#282c34
  • tab.border#181a1f
  • tab.hoverBackground#323842
  • tab.inactiveBackground#21252b
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBrightMagenta#7c63ca
  • textLink.foreground#61afef
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#21252b
  • titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.constant.edge#c678dd
constant.other.character-class.regexp#bbbbbb
keyword.operator.quantifier.regexp#d19a66
string.quoted.double, string.quoted.single#a0bd6f
variable.parameter.function#bbbbbb
comment, punctuation.definition.comment#7f848eitalic
comment markup.link#5c6370
markup.changed.diff#e5c07b
meta.diff.header.from-file,punctuation.definition.from-file.diff#6c72e8
markup.inserted.diff#a0bd6f
markup.deleted.diff#df6a73
meta.function.c#bbbbbb
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#bbbbbb
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
variable.parameter,variable.language.super#d19a66
keyword.operator.expression.import#6c72e8
meta.import#65adb2
support.constant.math#e5c07b
support.constant.property.math#d19a66
variable.other.constant#bbbbbb
storage.type.annotation.java#e5c07b
source.java#bbbbbb
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,storage.type.generic.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,meta.method.body.java#bbbbbb
meta.method.java#6c72e8
storage.modifier.import.java,storage.type.java#e5c07b
meta.definition.variable.name.java#bbbbbb
keyword.operator.logical.js#6c72e8
keyword.operator.bitwise#6c72e8
keyword.operator.channel#6c72e8
support.constant.property-value.scss,support.constant.property-value.css#d19a66
keyword.operator.css,keyword.operator.scss,keyword.operator.less#6c72e8
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#d19a66
punctuation.separator.list.comma.css#bbbbbb
support.constant.color.w3c-standard-color-name.css#d19a66
support.type.vendored.property-name.css#6c72e8
punctuation.definition.string.template.begin,punctuation.definition.string.template.end#61afef
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#61afef
support.module.node,support.type.object.module,support.module.node#65adb2
entity.name.type.module#65adb2
variable.other.readwrite,support.variable.property,support.variable.object.process,support.variable.object.node#bbbbbb
meta.jsx.children variable.other.readwrite#96bcd7
meta.object-literal.key, meta.object-literal.key string.quoted.double, meta.object-literal.key string.quoted.single, meta.object-literal.key string#96bcd7
punctuation.separator.key-value#96bcd7
meta.array.literal#6c72e8
comment.line.double-slash,comment.block.documentationitalic
support.constant.json#bbbbbb
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional#6c72e8
support.class.console#d19a66
support.variable.property.process#d19a66
support.function.console#bbbbbb
keyword.operator#6c72e8
support.type.object.dom#6c72e8
support.variable.dom,support.variable.property.dom#d19a66
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment#6c72e8
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c#c678dd
punctuation.separator.delimiter#bbbbbb
punctuation.accessor#65adb2
punctuation.separator.c#c678dd
punctuation.definition.binding-pattern.object#65adb2
meta.objectliteral#bbbbbb
meta.function#bbbbbb
meta.block#65adb2
meta.function.expression#bbbbbb
support.type.posix-reserved.c#6c72e8
keyword.operator.sizeof.c#c678dd
variable.parameter.function.language.python#d19a66
support.type.python#6c72e8
keyword.operator.logical.python#c678dd
meta.function-call.arguments.python#bbbbbb
meta.function-call.python#bbbbbb
variable.parameter.function.python#d19a66
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python,meta.function-call.arguments.python#bbbbbb
meta.function-call.generic.python#6c72e8
constant.character.format.placeholder.other.python#a0bd6f
none#bbbbbb
keyword.operator#6c72e8
keyword.operator.assignment.compound#6c72e8
keyword#c678dd
variable#bbbbbb
token.variable.parameter.java#bbbbbb
import.storage.java#e5c07b
token.package.keyword#c678dd
token.package#bbbbbb
meta.function-call#bbbbbb
meta.function#65adb2
entity.name.type.namespace#bbbbbb
support.class, entity.name.type.class#bbbbbb
entity.name.class.identifier.namespace.type#bbbbbb
entity.name.class, variable.other.class.js, variable.other.class.ts#bbbbbb
variable.other.class.php#bbbbbb
support.class.component#a0bd6f
entity.name.type#e5c07b
keyword.control#6c72e8
keyword.control.flow#61afef
keyword.control.import.python,keyword.control.flow.pythonitalic
control.elements, keyword.operator.less#6c72e8
keyword.other.special-method#6c72e8
storage#c678dd
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#65adb2
support.type.property-name#bbbbbb
support.constant.property-value#bbbbbb
support.constant.font-name#d19a66
meta.tag#bbbbbb
meta.embedded.expression, meta.embedded.expression#6c72e8
string, entity.other.inherited-class#a0bd6f
constant.other.symbol#6c72e8
constant.numeric#6c72e8
none#d19a66
none#d19a66
constant#d19a66
punctuation.definition.constant#d19a66
constant.language.import-export-all#65adb2
entity.name.tag#d19a66
entity.other.attribute-name#61afef
entity.other.attribute-name.id#6c72e8normal
entity.other.attribute-name.class.css#65adb2normal
meta.selector#c678dd
none#d19a66
markup.headingbold
entity.name.section#6c72e8
keyword.other.unit#bbbbbb
todo.bold#c678ddbold
punctuation.definition.bold#e5c07b
markup.italic, punctuation.definition.italic,todo.emphasis#d19a66
emphasis md#c678dd
markup.heading, markup.heading entity.name.section#65adb2
markup.heading.setext#bbbbbb
punctuation.definition.bold.markdown#c678dd
markup.inline.raw.markdown#a0bd6f
markup.inline.raw.string.markdown#a0bd6f
markup.quote.markdown#5c6370italic
markup.list.numbered#e5c07b
markup.list.unnumbered#96bcd7
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#bbbbbb
punctuation.definition.metadata.markdown#bbbbbb
markup.underline.link.markdown,markup.underline.link.image.markdown#61afef
string.other.link.title.markdown,string.other.link.description.markdown#6c72e8
markup.italic.markdownitalic
markup.bold.markdown#c678ddbold
string.regexp#6c72e8
constant.character.escape#6c72e8
punctuation.section.embedded, variable.interpolation#bbbbbb
invalid.illegal#ffffff
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.unimplemented#ffffff
meta.structure.dictionary.json#bbbbbb
meta.structure.array.json#61afef
punctuation.separator.array.json#bbbbbb
source.json meta.structure.dictionary.json > string.quoted.json#bbbbbb
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#bbbbbb
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#a0bd6f
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#6c72e8
support.type.property-name.json#bbbbbb
string.quoted.double.json, string.quoted.single.json#a0bd6f
support.type.property-name.json punctuation#bbbbbb
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,support.other.namespace.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#bbbbbb
punctuation.section.array.end.php#bbbbbb
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#6c72e8
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#bbbbbb
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#d19a66
entity.name.goto-label.php,support.other.php#6c72e8
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#6c72e8
keyword.operator.regexp.php#c678dd
keyword.operator.comparison.php#6c72e8
punctuation.definition.variable.php#bbbbbb
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#c678dd
meta.function.decorator.python#6c72e8
support.token.decorator.python,meta.function.decorator.identifier.python#6c72e8
function.parameter#d19a66
function.parameter#bbbbbb
function.brace#bbbbbb
function.parameter.ruby, function.parameter.cs#bbbbbb
constant.language.symbol.ruby#6c72e8
rgb-value#6c72e8
inline-color-decoration rgb-value#d19a66
less rgb-value#d19a66
selector.sass#bbbbbb
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsxitalic
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#d19a66
meta.field.declaration.js.jsx variable, meta.field.declaration.ts variable, meta.field.declaration.tsx variable#d19a66
meta.method.declaration.js.jsx, meta.method.declaration.ts, meta.method.declaration.tsx#65adb2
block.scope.end,block.scope.begin#6c72e8
storage.type.cs#e5c07b
entity.name.variable.local.cs#bbbbbb
token.info-token#6c72e8
token.warn-token#d19a66
token.error-token#f44747
token.debug-token#c678dd
meta.template.expression#bbbbbb
keyword.operator.module#c678dd
support.type.type.flowtype#6c72e8
support.type.primitive#e5c07b
meta.property.object#bbbbbb
variable.parameter.function.js#bbbbbb
keyword.operator.assignment#bbbbbb
keyword.operator.assignment.go, keyword.operator.address.go#e5c07b
entity.name.package.go#e5c07b
support.type.prelude.elm#6c72e8
support.constant.elm#d19a66
punctuation.quasi.element#c678dd
constant.character.entity#bbbbbb
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#6c72e8
entity.global.clojure#e5c07b
meta.symbol.clojure#bbbbbb
constant.keyword.clojure#6c72e8
meta.arguments.coffee, variable.parameter.function.coffee#bbbbbb
source.ini#a0bd6f
meta.scope.prerequisites.makefile#bbbbbb
source.makefile#e5c07b
storage.modifier.import.groovy#e5c07b
meta.method.groovy#6c72e8
meta.definition.variable.name.groovy#bbbbbb
meta.definition.class.inherited.classes.groovy#a0bd6f
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#bbbbbb
support.type.swift, support.type.vb.asp#e5c07b