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#171520
  • activityBar.foreground#ffffffCC
  • activityBarBadge.background#f97e72
  • activityBarBadge.foreground#2a2139
  • descriptionForeground#FFFFFF
  • dropdown.background#343146
  • editor.background#262335
  • editor.lineHighlightBorder#7059AB66
  • editor.selectionBackground#ffffff20
  • editorCursor.foreground#f97e72
  • editorLineNumber.foreground#c29f68
  • editorSuggestWidget.foreground#E09969
  • editorSuggestWidget.highlightForeground#f97e72
  • editorSuggestWidget.selectedBackground#2A4857
  • editorWidget.background#262335
  • foreground#ff8b39
  • panelTitle.activeBorder#f97e72
  • scrollbarSlider.background#9d8bca30
  • scrollbarSlider.hoverBackground#9d8bca50
  • selection.background#FFFFFF
  • sideBar.background#262331
  • statusBar.background#241b2f
  • statusBar.debuggingBackground#f97e72
  • statusBar.debuggingForeground#08080f
  • statusBar.foreground#ffffff80
  • statusBar.noFolderBackground#241b2f
  • textLink.foreground#FFFFFF
  • titleBar.activeForeground#d63131
  • widget.shadow#8075EB

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8075EBitalic
string.quoted, string.template, punctuation.definition.string#ff8b39
variable, entity.name.variable#20B2AAitalic
storage.type, storage.modifier#ff8b39
entity.name.tag#E1777B
text.html.derivative#Faebd7
punctuation.definition.tag#E84E4A
punctuation.separator.key-value#FAEBD7
entity.other.attribute-name#DB51D0
entity.other.attribute-name.html#E1927Citalic
source.python#ff8b39italic
support.function.builtin.python#6CE08B
punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python#Faebd7
entity.name.type, meta.attribute.class.html#fe4450
entity.other.inherited-class#D50
entity.name.function, variable.function#DB4C01
support.class.console.js, meta.function-call.js#DB4C01
keyword.control.export.js, keyword.control.import.js#72f1b8
constant.numeric.decimal.js#DBBA35
keyword#BEC75F
support.type.property-name.css#72f1b8
support.constant.font-name#f97e72
entity.other.attribute-name.id#344ff6
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#D50
support.function.misc.css#fe4450
markup.heading, entity.name.section#FFFFFF
text.html, keyword.operator.assignment#Faebd7
markup.quote#b6b1b1ccitalic
beginning.punctuation.definition.list#ff7edb
markup.underline.link#D50
string.other.link.description#f97e72
markup.underline.link.markdown, markup.inline.raw.string.markdown#72f1b8italic
string.other.link.title.markdown#fede5d
markup.heading.markdown, entity.name.section.markdown#ff7edbbold
markup.italic.markdown#2EE2FAitalic
markup.bold.markdown#2EE2FAbold
punctuation.definition.quote.begin.markdown, markup.quote.markdown#72f1b8
support.type.property-name.json#fe4450

Shiki preview

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

Loading...

Wakanda Forever Theme by Shubham Singh - VS Code Theme