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#08131a
  • activityBar.border#FF0099
  • activityBar.foreground#FF0099
  • activityBarBadge.background#08131a
  • activityBarBadge.foreground#FF0099
  • button.background#c03cfd
  • editor.background#242424
  • editor.findMatchBackground#ff00994b
  • editor.findMatchHighlightBackground#ff00994b
  • editor.foreground#33FFCD
  • editor.lineHighlightBackground#3D3D3D
  • editor.selectionBackground#ff00994b
  • editor.selectionHighlightBackground#ff00994b
  • editor.wordHighlightBackground#ff00994b
  • editorCursor.foreground#F8F8F0
  • editorGroup.border#FF0099
  • editorWhitespace.foreground#3B3A32
  • menu.selectionBackground#c03cfd
  • searchEditor.findMatchBackground#ff00994b
  • sideBar.foreground#66ffff
  • sideBarSectionHeader.foreground#c03cfd
  • sideBarTitle.foreground#FF0099
  • statusBar.background#c03cfd
  • statusBar.border#c03cfd
  • tab.activeForeground#FF0099
  • terminal.foreground#66ffff
  • titleBar.activeForeground#FF0099

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#F8F8F2
comment#8C8C8C
string#FF0099
constant.numeric#FF80F4
constant.language#FF80F4
constant.character, constant.other#FF80F4
variable
keyword#03dbf7
storage#FFFF99
storage.type#dc98fcitalic
entity.name.class#03dbf7underline
entity.other.inherited-class#03dbf7italic underline
entity.name.function#03dbf7
variable.parameter#FFCC66italic
entity.name.tag#dc98fc
entity.other.attribute-name#fab574
support.function#83e6fa
support.constant#83e6fa
support.type, support.class#83e6faitalic
support.other.variable
support.other.namespace, entity.name.type.namespace#FFB2F9
support.other.namespace.use-as.php#83e6fa
variable.language.namespace.php#D66990
punctuation.separator.inheritance.php#F92672
support.function.misc.css, support.constant.property-value.css, support.constant.font-name.css#FFEE99
invalid#F8F8F0
invalid.deprecated#F8F8F0
text source
meta.diff, meta.diff.header#E0EDDDbold
markup.deleted#D3201F
markup.changed#BF3904
markup.inserted#60cf30
meta.diff, meta.diff.range#83e6fa
markup.heading.markdown, markup.heading.1.markdown, markup.heading.2.markdown#03dbf7
markup.bold.markdown#F8F8F2bold
markup.italic.markdown#F8F8F2italic
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.raw.markdown#D3201F
markup.list.unnumbered.markdown#FF80F4
markup.list.numbered.markdown#FF80F4
markup.raw.block.markdown, markup.raw.inline.markdown#FFEE99
markup.quote.markdown, punctuation.definition.blockquote.markdown#6C71C4
meta.separator.markdown#FF80F4
meta.image.inline.markdown, markup.underline.link.markdown#8C8C8Citalic
string.other.link.title.markdown, string.other.link.description.markdown#03dbf7
punctuation.definition.link.markdown#8C8C8C
punctuation.definition.metadata.markdown#8C8C8C
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.constant.markdown#8C8C8C
punctuation.definition.template-expression, punctuation.section.embedded#F92672
meta.template.expression#F8F8F2

Shiki preview

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

Loading...

Retro Doc by Michael Michaud - VS Code Theme