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#525761
  • activityBar.activeBackground#222635
  • activityBar.background#0c0d13
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#10D1F4
  • activityBarBadge.foreground#f8fafd
  • badge.background#282c34
  • breadcrumb.background#0c0d13
  • button.background#404754
  • button.secondaryBackground#30333d
  • button.secondaryForeground#c0bdbd
  • checkbox.background#0c0d13
  • checkbox.border#404754
  • commandCenter.activeBackground#11141d
  • commandCenter.background#0f1118
  • debugToolBar.background#21252b
  • descriptionForeground#abb2bf
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#222635
  • dropdown.border#21252b
  • editor.background#11141d
  • editor.findMatchBackground#d19a6644
  • editor.findMatchBorder#ffffff5a
  • editor.findMatchHighlightBackground#ffffff22
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffd33d44
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#606892
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#606892
  • editorBracketHighlight.foreground1#d19a66
  • editorBracketHighlight.foreground2#c678dd
  • editorBracketHighlight.foreground3#56b6c2
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#c24038
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#0f1118
  • editorGutter.addedBackground#109868
  • editorGutter.background#11141d
  • editorGutter.deletedBackground#9A353D
  • editorGutter.modifiedBackground#948B60
  • editorHoverWidget.background#222635
  • editorHoverWidget.border#222635
  • editorHoverWidget.highlightForeground#61afef
  • editorIndentGuide.activeBackground1#c8c8c859
  • editorIndentGuide.background1#3b4048
  • editorInlayHint.background#2c313c
  • editorInlayHint.foreground#abb2bf
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#21252b
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#d19a66
  • editorWhitespace.foreground#ffffff1d
  • editorWidget.background#0f1118
  • focusBorder#3e4452
  • gitDecoration.ignoredResourceForeground#636b78
  • input.background#0c0d13
  • input.foreground#abb2bf
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#323842
  • list.focusForeground#f0f0f0
  • list.highlightForeground#ecebeb
  • list.hoverBackground#222635
  • list.hoverForeground#abb2bf
  • list.inactiveSelectionBackground#1a1e36
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#d19a66
  • menu.background#11141d
  • menu.foreground#abb2bf
  • menu.separatorBackground#343a45
  • menubar.selectionBackground#222635
  • minimap.background#0f1118
  • minimapGutter.addedBackground#109868
  • minimapGutter.deletedBackground#9A353D
  • minimapGutter.modifiedBackground#948B60
  • multiDiffEditor.headerBackground#21252b
  • panel.border#3e4452
  • panelSectionHeader.background#21252b
  • panelTitle.activeBorder#10D1F4
  • panelTitle.inactiveForeground#bfc7d580
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • quickInputList.focusBackground#222635
  • scrollbar.shadow#23252c
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • settings.focusedRowBackground#222635
  • settings.headerForeground#fff
  • sideBar.background#0f1118
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#0c0d13
  • sideBarSectionHeader.foreground#abb2bf
  • statusBar.background#0c0d13
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#ff000000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252b
  • statusBarItem.activeBackground#1a1e36
  • statusBarItem.compactHoverBackground#222635
  • statusBarItem.hoverBackground#222635
  • statusBarItem.remoteBackground#4d78cc
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#1a1e36
  • tab.activeBorder#10D1F4
  • tab.activeForeground#dcdcdc
  • tab.border#181a1f
  • tab.hoverBackground#222635
  • tab.inactiveBackground#11141d
  • 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#0f1118
  • terminal.border#3e4452
  • terminal.foreground#abb2bf
  • terminal.selectionBackground#abb2bf30
  • textBlockQuote.background#2e3440
  • textBlockQuote.border#4b5362
  • textLink.foreground#61afef
  • textPreformat.foreground#d19a66
  • titleBar.activeBackground#0c0d13
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#0c0d13de
  • titleBar.inactiveForeground#6b717d
  • tree.indentGuidesStroke#10D1F4
  • walkThrough.embeddedEditorBackground#2e3440
  • widget.shadow#232635

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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