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#1f1f23
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#1f1f23
  • button.background#404754
  • button.secondaryBackground#30333d
  • button.secondaryForeground#c0bdbd
  • checkbox.border#404754
  • debugToolBar.background#21252b
  • descriptionForeground#abb2bf
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#21252b
  • dropdown.border#21252b
  • editor.background#1f1f23
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#6199ff2f
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#26262B
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#5F636A
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#5F636A
  • editorBracketHighlight.foreground1#d19a66
  • editorBracketHighlight.foreground2#3690FF
  • editorBracketHighlight.foreground3#56b6c2
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#c24038
  • editorGroup.background#181a1f
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#21252b
  • editorGutter.addedBackground#109868
  • editorGutter.deletedBackground#9A353D
  • editorGutter.modifiedBackground#948B60
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorHoverWidget.highlightForeground#32cb86
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.background#3b4048
  • editorInlayHint.background#26262B
  • editorInlayHint.foreground#abb2bf
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#21252b
  • editorOverviewRuler.addedBackground#109868
  • editorOverviewRuler.deletedBackground#9A353D
  • editorOverviewRuler.modifiedBackground#948B60
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#d19a66
  • editorWhitespace.foreground#ffffff1d
  • editorWidget.background#21252b
  • focusBorder#3e4452
  • gitDecoration.ignoredResourceForeground#636b78
  • input.background#1d1f23
  • input.foreground#abb2bf
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#323842
  • list.focusForeground#f0f0f0
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#2c313a
  • list.hoverForeground#abb2bf
  • list.inactiveSelectionBackground#323842
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#d19a66
  • menu.foreground#abb2bf
  • menu.separatorBackground#343a45
  • minimapGutter.addedBackground#109868
  • minimapGutter.deletedBackground#9A353D
  • minimapGutter.modifiedBackground#948B60
  • panel.border#3e4452
  • panelSectionHeader.background#21252b
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbar.shadow#23252c
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • settings.focusedRowBackground#1f1f23
  • settings.headerForeground#fff
  • sideBar.background#21252b
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#1f1f23
  • sideBarSectionHeader.foreground#abb2bf
  • statusBar.background#21252b
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#ff000000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252b
  • statusBarItem.remoteBackground#4d78cc
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#1f1f23
  • tab.activeBorder#b4b4b4
  • tab.activeForeground#dcdcdc
  • tab.border#181a1f
  • tab.hoverBackground#323842
  • tab.inactiveBackground#21252b
  • 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#1f1f23
  • terminal.border#3e4452
  • terminal.foreground#abb2bf
  • terminal.selectionBackground#abb2bf30
  • textBlockQuote.background#2e3440
  • textBlockQuote.border#4b5362
  • textLink.foreground#32cb86
  • textPreformat.foreground#d19a66
  • titleBar.activeBackground#1f1f23
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#21252b
  • titleBar.inactiveForeground#6b717d
  • tree.indentGuidesStroke#ffffff1d
  • walkThrough.embeddedEditorBackground#2e3440
  • welcomePage.buttonHoverBackground#404754

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#D19A66
variable.other.generic-type.haskell#3690FF
storage.type.haskell#d19a66
support.variable.magic.python#D19A66
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#abb2bf
variable.parameter.function.language.special.self.python#DB3066
variable.parameter.function.language.special.cls.python#DB3066
storage.modifier.lifetime.rust#abb2bf
support.function.std.rust#32cb86
entity.name.lifetime.rust#DB3066
variable.language.rust#D19A66
support.constant.edge#3690FF
constant.other.character-class.regexp#D19A66
keyword.operator.word#3690FF
keyword.operator.quantifier.regexp#d19a66
variable.parameter.function#abb2bf
comment markup.link#5c6370
markup.changed.diff#DB3066
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#32cb86
markup.inserted.diff#b57eef
markup.deleted.diff#D19A66
meta.function.c,meta.function.cpp#D19A66
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#32cb86
support.constant.math#DB3066
support.constant.property.math#d19a66
variable.other.constant#DB3066
storage.type.annotation.java, storage.type.object.array.java#DB3066
source.java#D19A66
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#32cb86
storage.modifier.import.java,storage.type.java,storage.type.generic.java#DB3066
keyword.operator.instanceof.java#3690FF
meta.definition.variable.name.java#D19A66
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#DB3066
entity.name.type.module#DB3066
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#D19A66
support.constant.json#d19a66
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#3690FF
support.type.object.console#D19A66
support.variable.property.process#d19a66
entity.name.function,support.function.console#32cb86
keyword.operator.misc.rust#abb2bf
keyword.operator.sigil.rust#3690FF
keyword.operator.delete#3690FF
support.type.object.dom#56b6c2
support.variable.dom,support.variable.property.dom#D19A66
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#3690FF
punctuation.separator.delimiter#abb2bf
punctuation.separator.c,punctuation.separator.cpp#3690FF
support.type.posix-reserved.c,support.type.posix-reserved.cpp#56b6c2
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#3690FF
variable.parameter.function.language.python#d19a66
support.type.python#56b6c2
keyword.operator.logical.python#3690FF
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#32cb86
constant.character.format.placeholder.other.python#d19a66
keyword.operator#abb2bf
keyword.operator.assignment.compound#3690FF
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#56b6c2
keyword#3690FF
entity.name.namespace#DB3066
variable#D19A66
variable.c#abb2bf
variable.language#DB3066
token.variable.parameter.java#abb2bf
import.storage.java#DB3066
token.package.keyword#3690FF
token.package#abb2bf
entity.name.function, meta.require, support.function.any-method, variable.function#32cb86
entity.name.type.namespace#DB3066
support.class, entity.name.type.class#DB3066
entity.name.class.identifier.namespace.type#DB3066
entity.name.class, variable.other.class.js, variable.other.class.ts#DB3066
variable.other.class.php#D19A66
entity.name.type#DB3066
keyword.control#3690FF
control.elements, keyword.operator.less#d19a66
keyword.other.special-method#32cb86
storage#3690FF
token.storage#3690FF
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#3690FF
token.storage.type.java#DB3066
support.function#56b6c2
support.type.property-name#abb2bf
support.constant.property-value#abb2bf
support.constant.font-name#d19a66
meta.tag#abb2bf
string#b57eef
constant.other.symbol#56b6c2
constant.numeric#d19a66
constant#d19a66
punctuation.definition.constant#d19a66
entity.name.tag#D19A66
entity.other.attribute-name#d19a66
entity.other.attribute-name.id#32cb86
entity.other.attribute-name.class.css#d19a66
meta.selector#3690FF
markup.heading#D19A66
markup.heading punctuation.definition.heading, entity.name.section#32cb86
keyword.other.unit#D19A66
markup.bold,todo.bold#d19a66
punctuation.definition.bold#DB3066
markup.italic, punctuation.definition.italic,todo.emphasis#3690FF
emphasis md#3690FF
entity.name.section.markdown#D19A66
punctuation.definition.heading.markdown#D19A66
punctuation.definition.list.begin.markdown#DB3066
markup.heading.setext#abb2bf
punctuation.definition.bold.markdown#d19a66
markup.inline.raw.markdown#b57eef
markup.inline.raw.string.markdown#b57eef
punctuation.definition.raw.markdown#DB3066
punctuation.definition.list.markdown#DB3066
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#D19A66
beginning.punctuation.definition.list.markdown#D19A66
punctuation.definition.metadata.markdown#D19A66
markup.underline.link.markdown,markup.underline.link.image.markdown#3690FF
string.other.link.title.markdown,string.other.link.description.markdown#32cb86
markup.raw.monospace.asciidoc#b57eef
punctuation.definition.asciidoc#DB3066
markup.list.asciidoc#DB3066
markup.link.asciidoc,markup.other.url.asciidoc#3690FF
string.unquoted.asciidoc,markup.other.url.asciidoc#32cb86
string.regexp#56b6c2
punctuation.section.embedded, variable.interpolation#D19A66
punctuation.section.embedded.begin,punctuation.section.embedded.end#3690FF
invalid.illegal#ffffff
invalid.illegal.bad-ampersand.html#abb2bf
invalid.illegal.unrecognized-tag.html#D19A66
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#D19A66
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#D19A66
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#b57eef
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#56b6c2
support.type.property-name.json#D19A66
support.type.property-name.json punctuation#D19A66
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#3690FF
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#3690FF
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php#DB3066
keyword.operator.error-control.php#3690FF
keyword.operator.type.php#3690FF
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#DB3066
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#32cb86
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#32cb86
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#56b6c2
keyword.operator.regexp.php#3690FF
keyword.operator.comparison.php#56b6c2
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#3690FF
meta.function.decorator.python#32cb86
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
rgb-value#56b6c2
inline-color-decoration rgb-value#d19a66
less rgb-value#d19a66
selector.sass#D19A66
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#DB3066
block.scope.end,block.scope.begin#abb2bf
storage.type.cs#DB3066
entity.name.variable.local.cs#D19A66
token.info-token#32cb86
token.warn-token#d19a66
token.error-token#f44747
token.debug-token#3690FF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#3690FF
meta.template.expression#abb2bf
keyword.operator.module#3690FF
support.type.type.flowtype#32cb86
support.type.primitive#DB3066
meta.property.object#D19A66
variable.parameter.function.js#D19A66
keyword.other.template.begin#b57eef
keyword.other.template.end#b57eef
keyword.other.substitution.begin#b57eef
keyword.other.substitution.end#b57eef
keyword.operator.assignment#56b6c2
keyword.operator.assignment.go#DB3066
keyword.operator.arithmetic.go, keyword.operator.address.go#3690FF
entity.name.package.go#DB3066
support.type.prelude.elm#56b6c2
support.constant.elm#d19a66
punctuation.quasi.element#3690FF
constant.character.entity#D19A66
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#56b6c2
entity.global.clojure#DB3066
meta.symbol.clojure#D19A66
constant.keyword.clojure#56b6c2
meta.arguments.coffee, variable.parameter.function.coffee#D19A66
source.ini#b57eef
meta.scope.prerequisites.makefile#D19A66
source.makefile#DB3066
storage.modifier.import.groovy#DB3066
meta.method.groovy#32cb86
meta.definition.variable.name.groovy#D19A66
meta.definition.class.inherited.classes.groovy#b57eef
support.variable.semantic.hlsl#DB3066
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#3690FF
text.variable, text.bracketed#D19A66
support.type.swift, support.type.vb.asp#DB3066
entity.name.function.xi#DB3066
entity.name.class.xi#56b6c2
constant.character.character-class.regexp.xi#D19A66
constant.regexp.xi#3690FF
keyword.control.xi#56b6c2
invalid.xi#abb2bf
beginning.punctuation.definition.quote.markdown.xi#b57eef
beginning.punctuation.definition.list.markdown.xi#a3bcda
constant.character.xi#32cb86
accent.xi#32cb86
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#DB3066
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#D19A66
meta.brace.square#abb2bf
comment, punctuation.definition.comment#5F636Aitalic
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#DB3066
entity.name.variable.field.cs#D19A66
markup.deleted#D19A66
markup.inserted#b57eef
markup.underlineunderline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#BE5046
support.other.namespace.php#abb2bf
variable.other.object#DB3066
variable.other.constant.property#D19A66
entity.other.inherited-class#DB3066
variable.other.readwrite.c#D19A66
entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php#abb2bf
constant.numeric.decimal.asm.x86_64#3690FF
support.other.parenthesis.regexp#d19a66
constant.character.escape#56b6c2
string.regexp#D19A66
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
keyword.control.import.python,keyword.control.flow.python,keyword.operator.logical.pythonitalic
markup.italic.markdownitalic