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#3d3f41
  • activityBar.border#2B2B2B
  • activityBar.foreground#ced0d6
  • breadcrumb.background#2B2B2B
  • dropdown.border#646464
  • dropdown.foreground#BBBBBB
  • dropdown.listBackground#646464
  • editor.background#2B2B2B
  • editor.inactiveSelectionBackground#43454a
  • editor.lineHighlightBackground#26282e
  • editor.selectionBackground#214283
  • editorCodeLens.foreground#6a6e78
  • editorGroup.border#505050
  • editorGroupHeader.tabsBackground#2B2B2B
  • editorGroupHeader.tabsBorder#323438
  • editorGutter.background#2B2B2B
  • editorIndentGuide.activeBackground1#54565c
  • editorIndentGuide.background1#2c2f32
  • editorLineNumber.activeForeground#9b9fa8
  • editorLineNumber.foreground#444953
  • editorRuler.foreground#464646
  • editorSuggestWidget.background#3C3F41
  • editorUnnecessaryCode#727379
  • editorWidget.background#313335
  • editorWidget.border#464646
  • gitDecoration.ignoredResourceForeground#505050
  • input.background#45494A
  • input.border#646464
  • input.foreground#BBBBBB
  • list.activeSelectionBackground#2e436e
  • list.activeSelectionForeground#d2e1e5
  • list.dropBackground#474B4D
  • list.hoverBackground#43454a
  • list.inactiveSelectionBackground#43454a
  • menu.background#3d3f41
  • menu.border#3c3d42
  • menu.foreground#bdbfc3
  • panel.background#3d3f41
  • panel.border#3d3f41
  • panelTitle.activeBorder#3574f0
  • panelTitle.activeForeground#dfe1e5
  • settings.headerForeground#BBBBBB
  • sideBar.background#3d3f41
  • sideBar.border#3d3f41
  • sideBar.foreground#ced0d6
  • sideBarSectionHeader.background#43454a
  • sideBarSectionHeader.border#43454a
  • statusBar.background#3d3f41
  • statusBar.border#2B2B2B
  • statusBar.debuggingBackground#864d30
  • statusBar.debuggingBorder#2B2B2B
  • statusBar.debuggingForeground#cccccc
  • statusBar.foreground#9da0a8
  • statusBar.noFolderBackground#313335
  • statusBar.noFolderBorder#2B2B2B
  • tab.activeBackground#2B2B2B
  • tab.activeBorder#3574f0
  • tab.border#555555
  • tab.hoverBackground#26282e
  • tab.hoverForeground#dcdfe4
  • tab.inactiveBackground#2B2B2B
  • tab.inactiveForeground#babcc1
  • tab.unfocusedActiveForeground#BBBBBB
  • tab.unfocusedHoverBackground#606466
  • tab.unfocusedInactiveForeground#BBBBBB
  • terminal.background#2B2B2B
  • terminal.foreground#bcbec4
  • titleBar.activeBackground#3d3f41
  • titleBar.border#3c3f41
  • titleBar.inactiveBackground#3c3f41

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
text#BABABA
source#bcbec4
emphasisitalic
strongbold
comment#808080
comment.block.documentation#629755italic
string.quoted#70c25e
constant.numeric#279cb2
variable.parameter.url, string.url#287BDE
constant.regexp#646695
constant.keyword, constant.language#bf7b41
meta.var storage.type#bf7b41
storage.type.function#bf7b41
support.function.builtin#747dc2
variable.language.special#94558d
variable.language#bf7b41
support.constant.handlebars#ad9665
support.type.primitive#bf7b41
source.python variable.parameter.function.language.special#94558d
source.python meta.function-call.arguments variable.parameter.function-call#aa4926
source.python constant.language, source.python constant.character.escape, source.python keyword.operator.logical, source.python constant.character.format.placeholder.other, source.python meta.function storage.type.function , source.python meta.class storage.type.class, source.python keyword.control.flow, source.python keyword.control.import, source.python storage.type.format, source.python storage.modifier#bf7b41
source.python support.function.magic, source.python support.variable.magic#b200b2
source.python string.quoted#70865e
source.python string.quoted.docstring, source.python string.quoted.docstring punctuation.definition.string.begin, source.python string.quoted.docstring punctuation.definition.string.end#70865eitalic
source.python meta.function.decorator support.type, source.python meta.function.decorator entity.name.function.decorator #adad57
source.python support.type, source.python meta.function-call.arguments support.type, source.python meta.function-call support.function.builtin, source.python meta.item-access meta.item-access.arguments support.type#8888c1
source.python entity.name.function#f6c87b
source.python string.quoted.binary.single, source.python string.quoted.binary.single punctuation.definition.string.begin, source.python string.quoted.binary.single punctuation.definition.string.end, source.python string.quoted.binary.single storage.type.string#abc16d
source.python support.type.exception, source.python meta.class.inheritance support.type.exception, source.python meta.class.inheritance support.type.metaclass#767ec3
text.xml punctuation.definition.tag, text.xml keyword.other#ad9665
text.xml entity.name.tag.localname#ad9665
text.xml entity.name.tag.namespace, text.xml entity.other.attribute-name.namespace#9876AA
text.xml string#6A8759
text.html meta.tag.metadata.script.end punctuation.definition.tag.begin source, text.html meta.tag.metadata.style.end punctuation.definition.tag.begin source#ad9665
text.html punctuation.definition.tag.begin, text.html punctuation.definition.tag.end#ad9665
text.html meta.tag entity.name.tag, text.html entity.name.tag.inline.any, text.html entity.name.tag.block.any#ad9665
text.html meta.tag punctuation, text.html meta.tag string.unquoted, text.html meta.tag string.quoted, text.html meta.attribute.style.html meta.embedded.line.css source.css#588f66
text.html constant#6D9CBE
text.html constant.character.escape#bf7b41
text.html.jinja keyword.control#AD9665bold
text.html.jinja entity.other.jinja.delimiter.variable, text.html.jinja entity.other.jinja.delimiter.tag, text.html.jinja variable.entity.other.jinja.delimiter, text.html.jinja meta.attribute.unrecognized.{{.html, text.html.jinja meta.attribute.unrecognized.}}.html#bf7b41
text.html.django keyword.control#bf7b41bold
text.html.django entity.other.django.delimiter.variable#bf7b41
text.html.django entity.other.django.delimiter.tag#bf7b41
text.html.django meta.tag#ad9665
text.html.django meta.tag entity.other.attribute-name#BABABA
entity.tag.tagbraces#bf7b41
text.html.django storage.type.templatetag keyword.operator.django, text.html.django storage.type.templatetag keyword.control.tag-name, text.html.django storage.type.customtemplatetag constant.other.tag.name#bf7b41bold
source.css constant#6897BB
support.type.property-name.css#BABABA
meta.at-rule.import.css, meta.at-rule.font-face.css, entity.name.tag.css, punctuation.terminator.rule.css, punctuation.separator.css, punctuation.separator.list.comma.css#B87800
constant.other.color.rgb-value.hex.css#6897BB
constant.other.unicode-range.css, support.function.url.css, punctuation.section.function.css, meta.selector.css#ad9665
meta.property-value.css#588f66
punctuation.definition.variable.less, variable.other.less#D0D0FF
source.css.less entity.other.attribute-name.class.mixin.css, source.css.less constant.other.unicode-range.css#A5C261
source.css.less meta.property-list.css meta.property-value.css entity.name.tag.css, source.css.less meta.property-list.css meta.property-value.css constant.numeric.css#588f66
keyword.other.DML.sql, keyword.other.alias.sql, keyword.other.order.sql, keyword.other.sql, storage.type.sql, source.sql keyword, keyword.other.DDL, source.sql support, support.function.logical.sql#bf7b41
support.function.aggregate.sql, support.function.analytic.sql#3d85ccitalic
constant.other.table-name.sql#aa6b8c
text.html.markdown markup.heading, text.html.markdown markup.heading.setext#99688aitalic
text.html.markdown meta.paragraph meta.link.inet markup.underline.link#4a88c3
text.html.markdown meta.link.reference constant.other.reference#bf7b41
text.html.markdown meta.link.reference punctuation.definition.constant#bf7b41bold
text.html.markdown meta.link.inet punctuation#287BDE
text.html.markdown meta.link.inline punctuation.definition.string#287BDE
text.html.markdown meta.paragraph meta.link.reference punctuation.definition.string#287BDE
text.html.markdown meta.link.reference markup.underline.link#4a88c3italic
text.html.markdown meta.link.inline markup.underline.link#4a88c3italic
text.html.markdown meta.link.reference string.other.link.description.title#808080italic
text.html.markdown meta.link.reference string.other.link.title, text.html.markdown meta.reference.link.inline, text.html.markdown meta.reference.link constant.other#4a88c3
text.html.markdown punctuation.definition.bold, text.html.markdown punctuation.definition.italic, text.html.markdown punctuation.definition.strikethrough#af7353
text.html.markdown markup.fenced_code.block, text.html.markdown markup.raw.block, text.html.markdown markup.inline.raw#808080
punctuation.definition.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.heading.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, fenced_code.block.language.markdown, punctuation.definition.table.markdown, punctuation.separator.table.markdown, text.html.markdown meta.separator.markdown, constant.character.escape.markdown#af7353
text.html.markdown markup.quote, text.html.markdown markup.quote meta.paragraph, text.html.markdown markup.quote heading#6A8759
text.html.markdown beginning.punctuation.definition.quote#608b4e
text.html.markdown beginning.punctuation.definition.list#6796e6
markup.heading.restructuredtext#6897BB
support.directive.restructuredtext, punctuation.separator.key-value.restructuredtext, meta.link.footnote.def.restructuredtext constant.other.footnote.link.restructuredtext, entity.name.tag.restructuredtext, markup.other.command.restructuredtext#bf7b41
source.shell string.interpolated punctuation.definition, source.shell string.quoted punctuation.definition, source.shell support.function.builtin, source.shell keyword#bf7b41
source.json meta.structure.dictionary support.type.property-name#9876AA
source.json string.quoted.double#6A8759
source.json punctuation.separator.dictionary.key-value, source.json punctuation.separator.array, source.json constant.language#bf7b41
source.json comment.block, source.json comment.block.documentation#808080
source.json string.quoted.double#6A8759
source.json punctuation.separator.dictionary.pair, source.json punctuation.separator.element, source.json punctuation.separator.arguments, source.json punctuation.separator.parameters, source.json punctuation.separator.continuation#bf7b41
source.json constant.character.escape.js#bf7b41
source.js string.regexp#9876AA
source.js keyword.operator.new.js, source.js keyword.operator.expression.js, source.js keyword.operator.cast.js, source.js keyword.operator.sizeof.js#bf7b41
source.js storage.type.class, source.js storage.type.interface#bf7b41
source.js meta.decorator entity.name.function, source.js punctuation.decorator#BBB529
entity.name.function.js, source.js meta.function meta.definition.function.js entity.name.function, source.js meta.function.expression.js entity.name.function#4784b8
source.js variable.other.property#9876AA
source.js meta.object.member variable.other.property, source.js variable.other.object.property#9876AA
source.js string.quoted.single, source.js string.quoted.double#6A8759
source.powershell keyword.control, source.powershell storage.type, source.powershell support.variable.automatic#bf7b41
source.powershell support.variable.automatic variable.other.member#9876AA
source.powershell entity.name.function, source.powershell support.function#ad9665
source.batchfile keyword.control.repeat, source.batchfile keyword.control.statement, source.batchfile keyword.control.conditional, source.batchfile keyword.command, source.batchfile keyword.operator.at, source.batchfile keyword.operator.logical, source.batchfile keyword.operator.comparison, source.batchfile keyword.operator.assignment, source.batchfile keyword.operator.arithmetic, source.batchfile keyword.operator.redirection, source.batchfile keyword.other.special-method#bf7b41
source.batchfile keyword.other.special-method#ad9665
source.batchfile keyword.command.rem#808080
source.reg entity.name.function.section.delete entity.section, source.reg entity.name.function.section.delete punctuation.definition.section, source.reg keyword.operator.arithmetic.minus#BBB529
source.reg entity.name.function.section.add entity.section, source.reg entity.name.function.section.add punctuation.definition.section#bf7b41
source.reg keyword.control.import, source.reg punctuation.definition.equals#9876AA
source.ini entity.name.section#bf7b41
source.ini keyword#9876AA
source.toml keyword.key, source.toml entity.other, support.type.property-name.toml#bf7b41
support.type.property-name.table.toml, support.type.property-name.array.toml#56A8F5
source.toml string.quoted.single.basic.line#6A8759
source.yaml string.unquoted entity.name.tag#bf7b41
source.yaml entity.name, source.yaml variable.other#E8BF6A
source.yaml comment.line#629755
source.ts punctuation.separator.comma, source.ts punctuation.terminator.statement#bf7b41
source.ts storage.type, source.ts storage.modifier, source.ts keyword.control, source.ts keyword.operator.expression, source.ts keyword.operator.new#bf7b41
source.ts punctuation.decorator, source.ts meta.decorator entity.name.function#BBB529
source.ts meta.class variable.other.object.property, source.ts meta.class variable.other.property, source.ts meta.class variable.object.property, source.ts meta.class variable.other.property#9876AA
source.ts meta.class variable.other.object.property, source.ts meta.class variable.other.property, source.ts meta.class variable.object.property, source.ts meta.class variable.other.property#9876AA
source.ts meta.function-call entity.name.function, source.ts meta.definition.method entity.name.function, source.ts meta.definition.function entity.name.function, source.ts meta.function entity.name.function, source.ts meta.definition.variable entity.name.function#ad9665
invalid#FF0000
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.regexp, string.regexp constant.character, string.regexp storage.type.string, string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d16969
string.regexp entity.name.tag#F23B7A
string.regexp support.other.parenthesis, string.regexp punctuation.character.set#E8BF6A
string.regexp keyword.operator#bf7b41
string.regexp keyword.operator.quantifier#6897BB
source.env string.quoted constant.character.escape#6a8759
source.env string.quoted string.interpolated#bf7b41
source.dockerfile keyword.other.special-method#bf7b41
support.function.git-rebase#9876AA
constant.sha.git-rebase#b5cea8
punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php#bf7b41