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.background#16191d
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#23272e
  • button.background#404754
  • button.secondaryBackground#30333d
  • button.secondaryForeground#c0bdbd
  • checkbox.border#404754
  • debugToolBar.background#1e2227
  • descriptionForeground#abb2bf
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#1e2227
  • dropdown.border#1e2227
  • editor.background#16191d
  • 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#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • 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.background#181a1f
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#16191d
  • editorGutter.addedBackground#109868
  • editorGutter.deletedBackground#9A353D
  • editorGutter.modifiedBackground#948B60
  • editorHoverWidget.background#1e2227
  • editorHoverWidget.border#181a1f
  • editorHoverWidget.highlightForeground#61afef
  • editorIndentGuide.activeBackground1#c8c8c859
  • editorIndentGuide.background1#3b4048
  • editorInlayHint.background#2c313c
  • editorInlayHint.foreground#abb2bf
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#667187
  • editorMarkerNavigation.background#1e2227
  • editorOverviewRuler.addedBackground#109868
  • editorOverviewRuler.deletedBackground#9A353D
  • editorOverviewRuler.modifiedBackground#948B60
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#1e2227
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#d19a66
  • editorWhitespace.foreground#ffffff1d
  • editorWidget.background#1e2227
  • 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#ecebeb
  • 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#1e2227
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbar.shadow#23252c
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • settings.focusedRowBackground#23272e
  • settings.headerForeground#fff
  • sideBar.background#16191d
  • sideBar.border#37393d
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#16191d
  • sideBarSectionHeader.foreground#abb2bf
  • statusBar.background#16191d
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#ff000000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#1e2227
  • statusBarItem.remoteBackground#4d78cc
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#23272e
  • tab.activeBorder#b4b4b4
  • tab.activeForeground#dcdcdc
  • tab.border#181a1f
  • tab.hoverBackground#323842
  • tab.inactiveBackground#16191d
  • 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#16191d
  • terminal.border#3e4452
  • terminal.foreground#abb2bf
  • terminal.selectionBackground#abb2bf30
  • textBlockQuote.background#2e3440
  • textBlockQuote.border#4b5362
  • textLink.foreground#61afef
  • textPreformat.foreground#d19a66
  • titleBar.activeBackground#16191d
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#16191d
  • titleBar.inactiveForeground#6b717d
  • tree.indentGuidesStroke#ffffff1d
  • walkThrough.embeddedEditorBackground#2e3440
  • welcomePage.buttonHoverBackground#404754

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation punctuation.definition.bracket, source.ocaml comment constant.regexp meta.separator, markup.other.anchor support.constant, markup.fenced_code, markup.fenced_code punctuation.definition, punctuation.definition.heading, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.strikethrough.markdown#8c93b1italic
entity.name, entity.name.package.go, entity.name.package.kotlin, entity.name.variable, markup.code, markup.fenced_code.block, meta.embedded.block variable punctuation.definition.variable.php, meta.function-call.arguments.python, meta.template.expression.kotlin, meta.toc-list.id.html, meta.var.clojure, parameter.variable.function, punctuation.definition.placeholder, punctuation.definition.variable, source.apacheconf, source.c, source.coffee, source.coffee.embedded.source, source.cpp, source.crystal, source.elixir.embedded.source, source.elm meta.declaration.module, source.elm meta.value, source.go, source.groovy.embedded.source, source.json meta.structure.dictionary.json support.type.property-name.json, source.julia, source.objc, source.powershell, source.python, source.reason variable.language, source.reason variable.language string.other.link, source.ruby, source.scala entity.name.import, source.shell, source.sql.embedded, source.swift, source.tf meta.template.expression, source.toml keyword, string constant.other.placeholder, string.quoted.double.class.other, string.quoted.double.kotlin entity.string.template.element.kotlin, string.quoted.interpolated.vala constant.character.escape.vala, support, support.variable, variable, variable.argument, variable.css, variable.global, variable.object, variable.other, variable.other.normal punctuation.definition.variable.shell, variable.other.readwrite, variable.scss#bcc7e6
entity.name.variable.parameter, variable.parameter, variable.import.parameter#e4d0caitalic
constant, variable.other.constant, variable.other.constant.object, support.constant, constant.character.entity, support.variable.magic, markup.quote, punctuation.bracket.angle, entity.name.function.preprocessor.c, storage.type.scala, entity.helper.apacheconf, variable.language.crystal, punctuation.definition.constant, support.constant punctuation.definition.variable, constant.character.math, support.class.math, source.graphql constant.character, source.reason constant.language.list, support.variable.class.hideshow, entity.other.attribute-name.class, text.html entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name, source.cs entity.other.attribute-name, constant.character.format.placeholder, constant.other.placeholder, source.vue entity.other.attribute-name, entity.other.attribute-name.mjml, source.vue meta.directive punctuation.separator.key-value, meta.definition.attribute-entry punctuation.separator, support.constant.property-value, constant.character.character-class.regexp, constant.language.empty-list.haskell, constant.language.unit.fsharp, source.reason constant.language.unit, constant.other, constant.other.caps, constant.others, constant.numeric, constant.language, constant.language.boolean, onstant.language.undefined, constant.language.null, meta.expression.implicit#a097f8
entity.name.namespace, entity.name.type.namespace, support.other.namespace, punctuation.separator.namespace.access#89d3ca
entity.name.module#89d3ca
variable.other.object, variable.other.class, entity.name.type, entity.name.type.class, entity.name.class, support.class, support.class.builtin, entity.other.inherited-class#ecb694
variable.other.struct, entity.name.type.struct, entity.name.struct#ee8da9
variable.other.enum, entity.name.type.enum, entity.name.enum#e7a0ac
variable.other.enummember, entity.name.type.enummember, entity.name.variable.enum-member, entity.name.enumMember, entity.name.enummember#e7a0acitalic
variable.other.interface, entity.name.type.interface, entity.name.type.trait, entity.name.interface#e7d7ac
variable.function, support.type.property-name, support.type.vendored.property-name, entity.name.function, string.other.link, markup.link, support.type.vendored, support.other.variable, meta.function-call.generic.python, meta.method-call.groovy meta.method.groovy, meta.class.body.groovy meta.method.body.java storage.type.groovy, punctuation.definition.decorator, support.function.any-method, text.tex support.function, text.tex punctuation.definition.function, entity.name.section.fsharp entity.name.section.fsharp, support.variable.class.function, keyword.control.cucumber.table, punctuation.decorator, source.tf support.class, support.function, support.function.construct., meta.group.simple.subexpression.powershell#92b9f8
constant.other.color, constant.string.documentation.powershell, entity.name.lifetime.rust, entity.name.section, entity.name.section.group-title.editorconfig, entity.name.type.primitive, entity.other.attribute-name.pseudo-element, keyword.contro.rust, keyword.control punctuation.definition.function, keyword.control.ahk2, keyword.control.async, keyword.control.await, keyword.control.bash, keyword.control.break, keyword.control.c, keyword.control.case, keyword.control.catch, keyword.control.class, keyword.control.conditional, keyword.control.context, keyword.control.continue, keyword.control.cpp, keyword.control.declare, keyword.control.def, keyword.control.default, keyword.control.directive, keyword.control.do, keyword.control.elixir, keyword.control.else, keyword.control.elseif, keyword.control.elvish, keyword.control.exception, keyword.control.export, keyword.control.finally, keyword.control.fish, keyword.control.flow, keyword.control.for, keyword.control.foreach, keyword.control.from, keyword.control.fun, keyword.control.go, keyword.control.goto, keyword.control.if, keyword.control.import, keyword.control.java, keyword.control.julia, keyword.control.lisp, keyword.control.loop, keyword.control.lua, keyword.control.module, keyword.control.perl, keyword.control.php, keyword.control.powershell, keyword.control.python, keyword.control.return, keyword.control.ruby, keyword.control.scala, keyword.control.sh, keyword.control.switch, keyword.control.throw, keyword.other.definition#b9b0e9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.logical, keyword.operator.comparison, storage.modifier, storage.type, storage.type.class, storage.type.interface, storage.type.function, storage.type.var, storage.type.let, storage.type.const#b9b0e9italic
entity.name.type.type-parameter, variable.type.type-parameter, meta.type.parameters entity.name.type#cec0d9
variable.other.event#a2e7c7
log.date#bcc7e6
log.info#79a0df
text.log, log.constant#a0dbe9
log.debug#c7a2f3
log.exceptiontype#ade6a7
log.error#dd7d9a
string, punctuation.definition.string, source.css support.constant, entity.name.import.go, markup.raw.texttt, markup.inserted.diff, source.scala punctuation.definition.character, constant.character.literal.scala, source.tf entity.name, string.quoted.double, string.unquoted#ade6a7
string.template, punctuation.definition.string.template, string.interpolated.python string.quoted.single.python, string.quoted.double.heredoc, string.quoted.interpolated.vala, string.quoted.interpolated.vala punctuation.definition.string, string.regexp.apacheconf, markup.inline.raw.string, markup.inline.raw punctuation.definition.raw, string.quoted.double.interpolated.crystal, string.quoted.double.interpolated.crystal punctuation.definition.string, text.tex markup.raw, storage.type.string.python, storage.type.string#ade6a7
constant.character.escape#a097f8
punctuation.definition.template-expression, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#8dbb77
punctuation.separator.decimal.period, constant.integer.apacheconf, constant.language punctuation.definition.variable, string.quoted.double.skinparam.value, source.toml constant, source.zig keyword.constant.bool, source.zig keyword.constant.default, entity.name.type.numeric, entity.other.keyframe-offset.percentage#a097f8
entity.name.variable.field, variable.other.field, variable.other.object.field, text.xml entity.other.attribute-name#e7b5d9
variable.other.object.property, variable.object.property, variable.other.property, entity.name.variable.property, meta.object-literal.key, support.variable.property#c7a2f3
variable.other.constant.property#c7a2f3e0italic
keyword.control.razor.comment, keyword.control.razor.comment.star, meta.comment.razor keyword.control.cshtml.transition#8c93b1italic
keyword.control.cshtml.transition#89d3ca
keyword.control.razor.directive, keyword.control.razor.directive.page, keyword.control.razor.directive.inherits, keyword.control.razor.directive.code, keyword.control.razor.directive.codeblock, keyword.control.razor.directive.codeblock.open, keyword.control.razor.directive.codeblock.close#89d3caitalic
constant.other.color#a0dbe9
meta.selector#a0dbe9
invalid, invalid.illegal#be7474
keyword.operator, keyword.operator.logical, keyword.operator.comparison, keyword.operator.increment, keyword.operator.decrement, storage.type.function.arrow, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.arrow, keyword.operator.null-conditional, keyword.operator.nullable-type, keyword.operator.expression.pattern, punctuation.accessor, punctuation.definition.colon, punctuation.separator.scope-resolution, keyword.operator.ternary#98e6c8
punctuation.terminator, punctuation.separator.question-mark, punctuation.definition.typeparameters, punctuation.separator.comma, punctuation.curlybrace, punctuation.curlybrace.open, punctuation.curlybrace.close, punctuation.definition.typeparameters.begin, punctuation.definition.typeparameters.end, punctuation.separator.key-value, punctuation.separator.array, punctuation.separator, meta.structure.dictionary.value, punctuation.parenthesis#c8c4e9
constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, entity.name.type.annotation.kotlin, punctuation.definition.typeparameters, comment.block.documentation.phpdoc.php keyword.other.type.php, punctuation.definition.storage.type.objc, punctuation.definition.directive, punctuation.section.embedded, punctuation.separator.inheritance, markup punctuation.definition, comment.block.documentation entity.name.type, source.groovy storage.type, storage.type.annotation, punctuation.definition.annotation, source.haskell storage.type, punctuation.separator.clause-head-body, source.go storage.type, support.type.vb, support.type.julia, constant.other.reference, source.graphql support.type, source.reason support.type string, support.class.crystal, storage.type.integral, source.tf meta.keyword.string, source.tf meta.keyword.number, source.scala entity.name.class, markup.raw.monospace, markup.mark#89d3caitalic
entity.mime-type.apacheconf, entity.name.function.call.kotlin, entity.name.function.infix, entity.name.scope-resolution.function.call, entity.other, keyword.language.gherkin.feature.scenario, keyword.operator.function.infix, markup.changed.git_gutter, markup.underline, markup.underline.link, markup.underline.link.image, meta.symbol.namespace.clojure, punctuation.definition.parameters, source.nim keyword.other.common.function, source.reason entity.other.attribute-name constant.language constant.numeric, source.wsd support.class.preprocessings, support.function.construct, text.tex support.function.texttt, text.tex support.function.verb#e7b5d9
punctuation.definition.italic, punctuation.definition.bold, entity.name.tag, entity.name.tag.css, variable.language punctuation.definition.variable, support.type.exception.python, storage.modifier.super, source.go keyword, keyword.function.go, meta.separator, keyword.other.fn.rust, storage.modifier.static.rust, source.r meta.function.r keyword.control.r, storage.type.def, meta.class.identifier storage.modifier, source.scala keyword.declaration, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation punctuation.definition.inline.tag, entity.tag.apacheconf, keyword.other.julia, source.julia storage.modifier, meta.function.powershell storage.type.powershell, punctuation.terminator.function, keyword.other.rust, keyword.other.declaration-specifier.swift, source.ocaml keyword markup.underline, source.ocaml storage.type markup.underline, binding.fsharp keyword, function.anonymous keyword, function.anonymous keyword.symbol.fsharp, meta.embedded.block variable.language punctuation.definition.variable.php, keyword.declaration.dart, source.wsd keyword.other.class, source.wsd keyword.other.linebegin, keyword.other.skinparam.keyword, keyword.other.nim, markup.deleted.diff, source.tf support.class.variable, meta.function.lua keyword.control.lua, markup.block entity.name.tag, markup.meta.attribute-list, source.zig keyword.default, source.zig keyword.structure#b9b0e9
markup.changed.git_gutter#cca356
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#c7a2f3
meta.class-method.js entity.name.function.js, variable.function.constructor#6a8cd4
entity.other.attribute-name, entity.other.attribute-name.pseudo-class, meta.attribute.id entity.other.attribute-name, entity.other.attribute#e7b5d9
punctuation.definition.attribute, meta.attribute.rust#e7b5d9italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#e7b5d9italic
entity.other.attribute-name.class#ecb694
source.sass keyword.control#a097f8
markup.inserted#accc7c
markup.deleted#c06271
markup.changed#b081cf
string.regexp#76b1c9italic
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6c8cd1italic
source.js constant.other.object.key.js string.unquoted.label.js#c74258italic
source.json meta.structure.dictionary.json support.type.property-name.json#92b9f8
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c7a2f3
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ecb694
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e7b5d9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#cf8799
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a097f8
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ee8da9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e7d7ac
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#89d3ca
text.html.markdown, punctuation.definition.list_item.markdown, meta.paragraph.markdown#a0dbe9
text.html.markdown markup.inline.raw.markdown#9175a3
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#5c6872
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#8fa175
entity.name.section.markdown#ecb694
markup.italic#a097f8italic
markup.bold, markup.bold string#e7b5d9bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#c7a2f3italic bold
markup.underline#cf8799underline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#8598c2
string.other.link.description.title.markdown#9e7bb6
constant.other.reference.link.markdown#bba06d
markup.raw.block#9d7bb6
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#bebebe
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#c9cece
entity.other.attribute-name.class.css, entity.other.attribute-name.class.css punctuation.definition.entity.css#ecb694
keyword.other.unit#98e6c8
support.type.property-name.css#c7a2f3
meta.property-value, support.constant.property-value.css#a097f8italic
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#a0a77d
punctuation.definition.tag#c8c4e9
entity.other.attribute-name.html#e7b5d9
entity.name.tag.html#b9b0e9
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#ade6a7
text, source.ignore#a0dbe9