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.activeBorder#F12727
  • activityBar.background#050000
  • activityBar.inactiveForeground#F12727
  • activityBarBadge.background#ff0000
  • dropdown.background#050000
  • dropdown.border#F12727
  • editor.background#050000
  • editor.lineHighlightBackground#410000
  • editorGroup.border#410000
  • editorGroupHeader.tabsBackground#050000
  • editorHoverWidget.background#410000
  • editorHoverWidget.border#410000
  • editorIndentGuide.background#410000
  • editorLineNumber.activeForeground#ffafaf
  • editorLineNumber.foreground#F12727
  • editorSuggestWidget.background#410000
  • editorSuggestWidget.border#410000
  • editorWidget.background#410000
  • focusBorder#F12727
  • foreground#dddddd
  • input.background#050000
  • list.activeSelectionBackground#410000
  • list.hoverBackground#410000
  • list.inactiveSelectionBackground#410000
  • panel.border#410000
  • peekViewEditor.background#050000
  • progressBar.background#ffafaf
  • scrollbarSlider.activeBackground#410000
  • scrollbarSlider.background#410000
  • scrollbarSlider.hoverBackground#410000
  • selection.background#ffafaf
  • sideBar.background#050000
  • sideBar.border#F12727
  • sideBarSectionHeader.background#410000
  • statusBar.background#050000
  • statusBar.noFolderBackground#050000
  • tab.activeBackground#410000
  • tab.activeBorder#ff0000
  • tab.border#050000
  • tab.inactiveBackground#050000
  • titleBar.activeBackground#050000
  • titleBar.inactiveBackground#050000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#F8F8F8
comment#E7C0C0italic
constant#994646
keyword#F12727
entity#FEC758
storage#FF6262bold
string#CD8D8D
support#9DF39F
variable#FB9A4Bitalic
invalid#FFFFFF
entity.other.inherited-class#AA5507underline
constant.character#EC0D1E
string constant, constant.character.escape#FFE862
string.regexp#FFB454
string variable#EDEF7D
support.function#FFB454
support.constant, support.variable#EB939A
declaration.sgml.html declaration.doctype, declaration.sgml.html declaration.doctype entity, declaration.sgml.html declaration.doctype string, declaration.xml-processing, declaration.xml-processing entity, declaration.xml-processing string#73817D
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity#EC0D1E
meta.selector.css entity.name.tag#AA5507
meta.selector.css entity.other.attribute-name.id#FEC758
meta.selector.css entity.other.attribute-name.class#41A83E
support.type.property-name.css#96DD3B
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#FFE862italic
meta.property-value support.constant.named-color.css, meta.property-value constant#FFE862
meta.preprocessor.at-rule keyword.control.at-rule#FD6209
meta.constructor.argument.css#EC9799
meta.diff, meta.diff.header#F8F8F8italic
markup.deleted#EC9799
markup.changed#F8F8F8
markup.inserted#41A83E
markup.quote#F12727
markup.list#FF6262
markup.bold, markup.italic#FB9A4B
markup.boldbold
markup.italicitalic
markup.inline.raw#CD8D8D
markup.heading, markup.heading.setext, punctuation.definition.heading, entity.name.section#FEC758bold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, .format.placeholder#EC0D1E
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6

Shiki preview

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

Loading...

GX_Classic for VSCode by Douglas Camargo - VS Code Theme