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
  • button.secondaryBackground#30333d
  • button.secondaryForeground#c0bdbd
  • checkbox.border#404754
  • debugToolBar.background#21252b
  • descriptionForeground#b1b7c4bc
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#21252b
  • dropdown.border#21252b
  • editor.background#282c34
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#3961bc
  • editor.findMatchHighlightBackground#6199ff2f
  • editor.foreground#b1b7c4bc
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#5251513d
  • editor.wordHighlightStrongBorder#7f848e
  • editorBracketHighlight.foreground1#ce955fea
  • editorBracketHighlight.foreground2#823599
  • editorBracketHighlight.foreground3#52b4c17e
  • 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#508bbc
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.background#3b4048
  • editorInlayHint.background#2c313c
  • editorInlayHint.foreground#b1b7c4bc
  • editorLineNumber.activeForeground#b1b7c4bc
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#21252b
  • editorOverviewRuler.addedBackground#109868
  • editorOverviewRuler.deletedBackground#9A353D
  • editorOverviewRuler.modifiedBackground#948B60
  • editorRuler.foreground#b1b7c4bc26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#ce955fea
  • editorWhitespace.foreground#ffffff1d
  • editorWidget.background#21252b
  • focusBorder#3e4452
  • gitDecoration.igno7ea165ResourceForeground#636b78
  • input.background#1d1f23
  • input.foreground#b1b7c4bc
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#323842
  • list.focusForeground#f0f0f0
  • list.highlightForeground#ecebeb
  • list.hoverBackground#2c313a
  • list.hoverForeground#b1b7c4bc
  • list.inactiveSelectionBackground#323842
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#ce955fea
  • menu.foreground#b1b7c4bc
  • 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#282c34
  • settings.headerForeground#fff
  • sideBar.background#21252b
  • sideBar.foreground#b1b7c4bc
  • sideBarSectionHeader.background#282c34
  • sideBarSectionHeader.foreground#b1b7c4bc
  • 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#282c34
  • tab.activeBorder#b4b4b4
  • tab.activeForeground#dcdcdc
  • tab.border#181a1f
  • tab.hoverBackground#323842
  • tab.inactiveBackground#21252b
  • tab.unfocusedHoverBackground#323842
  • terminal.ansi7ea165#e05561
  • terminal.ansiBlack#3f4451
  • terminal.ansiBlue#4aa5f0
  • terminal.ansiBright7ea165#ff616e
  • terminal.ansiBrightBlack#4f5666
  • terminal.ansiBrightBlue#4dc4ff
  • terminal.ansiBrightCyan#4cd1e0
  • terminal.ansiBrightGreen#87b75f
  • terminal.ansiBrightMagenta#de73ff
  • terminal.ansiBrightWhite#e6e6e6
  • terminal.ansiBrightYellow#f0a45d
  • terminal.ansiCyan#42b3c2
  • terminal.ansiGreen#8cc265
  • terminal.ansiMagenta#c162de
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#d18f52
  • terminal.background#282c34
  • terminal.border#3e4452
  • terminal.foreground#b1b7c4bc
  • terminal.selectionBackground#abb2bf30
  • textBlockQuote.background#2e3440
  • textBlockQuote.border#4b5362
  • textLink.foreground#508bbc
  • textPreformat.foreground#ce955fea
  • titleBar.activeBackground#282c34
  • 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#b1b7c4bc
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#7ea165
variable.other.generic-type.haskell#823599
storage.type.haskell#ce955fea
support.variable.magic.python#7ea165
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#b1b7c4bc
variable.parameter.function.language.special.self.python#d1ac67de
variable.parameter.function.language.special.cls.python#d1ac67de
storage.modifier.lifetime.rust#b1b7c4bc
support.function.std.rust#508bbc
entity.name.lifetime.rust#d1ac67de
variable.language.rust#7ea165
support.constant.edge#823599
constant.other.character-class.regexp#7ea165
keyword.operator.word#823599
keyword.operator.quantifier.regexp#ce955fea
variable.parameter.function#b1b7c4bc
comment markup.link#5c6370
markup.changed.diff#d1ac67de
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#508bbc
markup.inserted.diff#b55b62
markup.deleted.diff#7ea165
meta.function.c,meta.function.cpp#7ea165
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#b1b7c4bc
punctuation.separator.key-value#b1b7c4bc
keyword.operator.expression.import#508bbc
support.constant.math#d1ac67de
support.constant.property.math#ce955fea
variable.other.constant#d1ac67de
storage.type.annotation.java, storage.type.object.array.java#d1ac67de
source.java#7ea165
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#b1b7c4bc
meta.method.java#508bbc
storage.modifier.import.java,storage.type.java,storage.type.generic.java#d1ac67de
keyword.operator.instanceof.java#823599
meta.definition.variable.name.java#7ea165
keyword.operator.logical#52b4c17e
keyword.operator.bitwise#52b4c17e
keyword.operator.channel#52b4c17e
support.constant.property-value.scss,support.constant.property-value.css#ce955fea
keyword.operator.css,keyword.operator.scss,keyword.operator.less#52b4c17e
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#ce955fea
punctuation.separator.list.comma.css#b1b7c4bc
support.constant.color.w3c-standard-color-name.css#ce955fea
support.type.vendo7ea165.property-name.css#52b4c17e
support.module.node,support.type.object.module,support.module.node#d1ac67de
entity.name.type.module#d1ac67de
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#7ea165
support.constant.json#ce955fea
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#823599
support.type.object.console#7ea165
support.variable.property.process#ce955fea
entity.name.function,support.function.console#508bbc
keyword.operator.misc.rust#b1b7c4bc
keyword.operator.sigil.rust#823599
keyword.operator.delete#823599
support.type.object.dom#52b4c17e
support.variable.dom,support.variable.property.dom#7ea165
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#52b4c17e
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#823599
punctuation.separator.delimiter#b1b7c4bc
punctuation.separator.c,punctuation.separator.cpp#823599
support.type.posix-reserved.c,support.type.posix-reserved.cpp#52b4c17e
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#823599
variable.parameter.function.language.python#ce955fea
support.type.python#52b4c17e
keyword.operator.logical.python#823599
variable.parameter.function.python#ce955fea
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#b1b7c4bc
meta.function-call.generic.python#508bbc
constant.character.format.placeholder.other.python#ce955fea
keyword.operator#b1b7c4bc
keyword.operator.assignment.compound#823599
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#52b4c17e
keyword#823599
entity.name.namespace#d1ac67de
variable#7ea165
variable.c#b1b7c4bc
variable.language#d1ac67de
token.variable.parameter.java#b1b7c4bc
import.storage.java#d1ac67de
token.package.keyword#823599
token.package#b1b7c4bc
entity.name.function, meta.require, support.function.any-method, variable.function#508bbc
entity.name.type.namespace#d1ac67de
support.class, entity.name.type.class#d1ac67de
entity.name.class.identifier.namespace.type#d1ac67de
entity.name.class, variable.other.class.js, variable.other.class.ts#d1ac67de
variable.other.class.php#7ea165
entity.name.type#d1ac67de
keyword.control#823599
control.elements, keyword.operator.less#ce955fea
keyword.other.special-method#508bbc
storage#823599
token.storage#823599
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#823599
token.storage.type.java#d1ac67de
support.function#52b4c17e
support.type.property-name#b1b7c4bc
support.type.property-name.toml, support.type.property-name.table.toml, support.type.property-name.array.toml#7ea165
support.constant.property-value#b1b7c4bc
support.constant.font-name#ce955fea
meta.tag#b1b7c4bc
string#b55b62
constant.other.symbol#52b4c17e
constant.numeric#ce955fea
constant#ce955fea
punctuation.definition.constant#ce955fea
entity.name.tag#7ea165
entity.other.attribute-name#ce955fea
entity.other.attribute-name.id#508bbc
entity.other.attribute-name.class.css#ce955fea
meta.selector#823599
markup.heading#7ea165
markup.heading punctuation.definition.heading, entity.name.section#508bbc
keyword.other.unit#7ea165
markup.bold,todo.bold#ce955fea
punctuation.definition.bold#d1ac67de
markup.italic, punctuation.definition.italic,todo.emphasis#823599
emphasis md#823599
entity.name.section.markdown#7ea165
punctuation.definition.heading.markdown#7ea165
punctuation.definition.list.begin.markdown#d1ac67de
markup.heading.setext#b1b7c4bc
punctuation.definition.bold.markdown#ce955fea
markup.inline.raw.markdown#b55b62
markup.inline.raw.string.markdown#b55b62
punctuation.definition.raw.markdown#d1ac67de
punctuation.definition.list.markdown#d1ac67de
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#7ea165
beginning.punctuation.definition.list.markdown#7ea165
punctuation.definition.metadata.markdown#7ea165
markup.underline.link.markdown,markup.underline.link.image.markdown#823599
string.other.link.title.markdown,string.other.link.description.markdown#508bbc
markup.raw.monospace.asciidoc#b55b62
punctuation.definition.asciidoc#d1ac67de
markup.list.asciidoc#d1ac67de
markup.link.asciidoc,markup.other.url.asciidoc#823599
string.unquoted.asciidoc,markup.other.url.asciidoc#508bbc
string.regexp#52b4c17e
punctuation.section.embedded, variable.interpolation#7ea165
punctuation.section.embedded.begin,punctuation.section.embedded.end#823599
invalid.illegal#ffffff
invalid.illegal.bad-ampersand.html#b1b7c4bc
invalid.illegal.unrecognized-tag.html#7ea165
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.deprecated.entity.other.attribute-name.html#ce955fea
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#7ea165
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#7ea165
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#b55b62
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#52b4c17e
support.type.property-name.json#7ea165
support.type.property-name.json punctuation#7ea165
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#823599
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#823599
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php#d1ac67de
keyword.operator.error-control.php#823599
keyword.operator.type.php#823599
punctuation.section.array.begin.php#b1b7c4bc
punctuation.section.array.end.php#b1b7c4bc
invalid.illegal.non-null-typehinted.php#da4b4bb9
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#d1ac67de
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#508bbc
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#b1b7c4bc
support.constant.core.rust#ce955fea
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#ce955fea
entity.name.goto-label.php,support.other.php#508bbc
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#52b4c17e
keyword.operator.regexp.php#823599
keyword.operator.comparison.php#52b4c17e
keyword.operator.he7ea165oc.php,keyword.operator.nowdoc.php#823599
meta.function.decorator.python#508bbc
support.token.decorator.python,meta.function.decorator.identifier.python#52b4c17e
function.parameter#b1b7c4bc
function.brace#b1b7c4bc
function.parameter.ruby, function.parameter.cs#b1b7c4bc
constant.language.symbol.ruby#52b4c17e
rgb-value#52b4c17e
inline-color-decoration rgb-value#ce955fea
less rgb-value#ce955fea
selector.sass#7ea165
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#d1ac67de
block.scope.end,block.scope.begin#b1b7c4bc
storage.type.cs#d1ac67de
entity.name.variable.local.cs#7ea165
token.info-token#508bbc
token.warn-token#ce955fea
token.error-token#da4b4bb9
token.debug-token#823599
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#823599
meta.template.expression#b1b7c4bc
keyword.operator.module#823599
support.type.type.flowtype#508bbc
support.type.primitive#d1ac67de
meta.property.object#7ea165
variable.parameter.function.js#7ea165
keyword.other.template.begin#b55b62
keyword.other.template.end#b55b62
keyword.other.substitution.begin#b55b62
keyword.other.substitution.end#b55b62
keyword.operator.assignment#52b4c17e
keyword.operator.assignment.go#d1ac67de
keyword.operator.arithmetic.go, keyword.operator.address.go#823599
entity.name.package.go#d1ac67de
support.type.prelude.elm#52b4c17e
support.constant.elm#ce955fea
punctuation.quasi.element#823599
constant.character.entity#7ea165
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#52b4c17e
entity.global.clojure#d1ac67de
meta.symbol.clojure#7ea165
constant.keyword.clojure#52b4c17e
meta.arguments.coffee, variable.parameter.function.coffee#7ea165
source.ini#b55b62
meta.scope.prerequisites.makefile#7ea165
source.makefile#d1ac67de
storage.modifier.import.groovy#d1ac67de
meta.method.groovy#508bbc
meta.definition.variable.name.groovy#7ea165
meta.definition.class.inherited.classes.groovy#b55b62
support.variable.semantic.hlsl#d1ac67de
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#823599
text.variable, text.bracketed#7ea165
support.type.swift, support.type.vb.asp#d1ac67de
entity.name.function.xi#d1ac67de
entity.name.class.xi#52b4c17e
constant.character.character-class.regexp.xi#7ea165
constant.regexp.xi#823599
keyword.control.xi#52b4c17e
invalid.xi#b1b7c4bc
beginning.punctuation.definition.quote.markdown.xi#b55b62
beginning.punctuation.definition.list.markdown.xi#7f848e
constant.character.xi#508bbc
accent.xi#508bbc
wikiword.xi#ce955fea
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#d1ac67de
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#7ea165
meta.brace.square#b1b7c4bc
comment, punctuation.definition.comment#7f848eitalic
markup.quote.markdown#5c6370
punctuation.definition.block.sequence.item.yaml#b1b7c4bc
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir#52b4c17e
entity.name.variable.parameter.cs#d1ac67de
entity.name.variable.field.cs#7ea165
markup.deleted#7ea165
markup.inserted#b55b62
markup.underlineunderline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#BE5046
support.other.namespace.php#b1b7c4bc
variable.other.object#d1ac67de
variable.other.constant.property#7ea165
entity.other.inherited-class#d1ac67de
variable.other.readwrite.c#7ea165
entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php#b1b7c4bc
constant.numeric.decimal.asm.x86_64#823599
support.other.parenthesis.regexp#ce955fea
constant.character.escape#52b4c17e
string.regexp#7ea165
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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Azalais Dark - Coding Theme