Skip to main content
CodingTheme

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#21252c
  • activityBar.border#1C2026
  • activityBar.foreground#f1f1f1
  • activityBarBadge.background#1287DB
  • breadcrumbPicker.background#21252c
  • button.background#1287DB
  • editor.background#1C2026
  • editor.foreground#f1f1f1
  • editor.lineHighlightBorder#1C2026
  • editorGroupHeader.tabsBackground#1c2026
  • editorIndentGuide.activeBackground#e6e6e6
  • editorIndentGuide.background#3d4853
  • editorLineNumber.activeForeground#f1f1f1
  • editorLineNumber.foreground#3d4853
  • editorWidget.background#1C2026
  • editorWidget.border#3d4853
  • focusBorder#3d4853
  • list.activeSelectionBackground#fff1
  • list.hoverBackground#3d4853
  • list.inactiveSelectionBackground#fff1
  • list.inactiveSelectionForeground#f1f1f1
  • panel.border#21252c
  • sideBar.background#21252c
  • sideBar.border#0000
  • sideBarSectionHeader.background#21252c
  • sideBarSectionHeader.border#1C2026
  • sideBarSectionHeader.foreground#f1f1f1
  • statusBar.background#1C2026
  • statusBar.border#1C2026
  • tab.border#1c2026
  • tab.inactiveBackground#1c2026
  • titleBar.activeBackground#21252c
  • titleBar.border#1C2026
  • tree.indentGuidesStroke#fff1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#2CC02C
support.other.variable, string.other.link, string.regexp, entity.name.tag, entity.other.attribute-name, meta.tag, declaration.tag, punctuation.definition.template-expression, meta.template.expression#dfdfdf
constant.numeric#FF7BA6
string#E5D48B
meta.template.expression#f1f1f1
entity.other.inherited-class#FFEEAD
keyword, storage, keyword.operator.new, entity.other.attribute-name, support.type.primitive, constant.language#1287DB
keyword.operator#F1f1f1
support.class.builtin#9289FE
keyword.control.conditional#9289FE
markup.inserted.diff, meta.diff.header.to-file#718c00
markup.deleted.diff, meta.diff.header.from-file#c82829
meta.diff.header.from-file, meta.diff.header.to-file#FFFFFF
meta.diff.range#3e999f
markup.quote#FFC58F
markup.list#BBDAFF
markup.bold, markup.italic#FFC58F
markup.inline.raw#FF9DA4
meta.decorator entity.name.function#E5BA8F
meta.function-call, support.function, keyword.other.special-method, meta.block-level#0dc49f
variable.other.object.property, variable.object.property, variable, meta.type.parameters entity.name.type, punctuation.accessor#F1F1F1
variable.language.this, support.variable.dom#40A893
support.type.property-name.json#E2EDFF
source.css variable#9289FE
source.css.scss meta.property-value.scss, source.css meta.property-value.css, source.css keyword.other.unit#ffeead
comment, entity.other.inherited-class, entity.other.attribute-name, meta.class meta.method.declaration meta.var.expr storage.type.js, meta.delimiter.period, meta.selector, entity.name.tag.doctype, meta.tag.sgml.doctype, italic, quote, source.elixir .punctuation.binary.elixir, meta.tag.sgml.doctype.html, markup.italic.markdown, variable.language.this, source.css.scss meta.property-value.scss, source.css meta.property-value.css, storage.type, keyword.operator.new, keyword.control.conditional, meta.return.typeitalic
entity.other.ng-binding-name.template.html#e2ad5e
entity.other.ng-binding-name.property.html#e2675e
entity.other.ng-binding-name.event.html#7ecc25
meta.tag.custom.start.html, meta.tag.custom.end.html, meta.tag.custom.start.html entity.name.tag.html, meta.tag.custom.end.html entity.name.tag.html#95999e

Shiki preview

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

Loading...