Skip to main content
CodingTheme

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#141820
  • activityBar.foreground#636d83
  • activityBarBadge.background#8074da
  • badge.background#363f52
  • button.background#262d3a
  • editor.background#171b27
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#262d3a
  • editor.selectionBackground#3d4148
  • editorBracketMatch.background#262d3a
  • editorBracketMatch.border#42464c
  • editorCursor.foreground#f8f8f0
  • editorGroupHeader.tabsBackground#161a24
  • editorLineNumber.foreground#636d83
  • editorWhitespace.foreground#383c44
  • focusBorder#738dd4
  • input.background#262d3a
  • input.foreground#636d83
  • input.placeholderForeground#636d83
  • list.activeSelectionBackground#1c212d
  • list.hoverBackground#1b212e
  • list.inactiveSelectionBackground#1c212d
  • scrollbarSlider.background#333c4d
  • scrollbarSlider.hoverBackground#3c475a
  • sideBar.background#161a24
  • sideBar.foreground#68758e
  • statusBar.background#222935
  • statusBar.foreground#636d83
  • statusBar.noFolderBackground#21252b
  • statusBar.noFolderForeground#636d83
  • tab.activeBorder#738dd4
  • tab.border#21252b
  • tab.inactiveBackground#161a24
  • titleBar.activeBackground#1d2127

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5C6370italic
constant.numeric#D19A66
constant.language#D19A66
constant.character, constant.other#56B6C2
storage#C678DDitalic
entity.name.class#E5C07B
entity.other.inherited-class#E5C07Bitalic underline
entity.name.function#61AFEF
variable.parameter#ABB2BF
support.function#56B6C2
support.constant#D19A66
support.type, support.class#E06C75
support.other.variable
invalid#FFFFFF
invalid.deprecated#523D14
meta.structure.dictionary.json string.quoted.double.json#98C379
meta.diff, meta.diff.header#75715E
markup.deleted#F92672
markup.inserted#A6E22E
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#E6DB74
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
variable, entity.other.inherited-class.js#ABB2BF
entity.name.function.js, variable.language.super.js, support.function.dom, support.function.js, entity.name.type.js, meta.function-call.object.js, meta.function-call.js#73aedf
keyword.operator, punctuation.accessor.js, storage.modifier.js#e06e9a
keyword, support.constant.handlebars, meta.function.block.start.handlebars, support.constant.edge, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js#738dd4
keyword.control.import, keyword.control.export, keyword.other.unit.vh.css, keyword.other.unit.css, storage.type#8074da
variable.other.readwrite.alias, variable.language.this.js#c3b88a
meta.object-literal.key.js, entity.name.tag.js, support.class.component.js, support.type.property-name.json, entity.name.tag#7e8fb7
entity.other.attribute-name.class.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name#e5c07b
support.type.property-name.css#abb2bf
meta.function.inline.other.handlebars, constant.numeric.css, keyword.other.unit.px, punctuation.definition.constant, constant.other.color.rgb-value, support.constant.property-value, keyword.other.unit.deg.css, keyword.other.unit.s.css, keyword.other.unit.percentage.css#8074da
entity.other.attribute-name.generic.html#c2a571
variable.language.this.js, variable.language.super.jsitalic
string, string.quoted#90b0c3
support.type, entity.name.type.ts, entity.name.type.tsx#4cd0cc
support.class#7e8fb7

Shiki preview

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

Loading...

Afeem Theme by Prasanjit Singh - VS Code Theme