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#fffcf7
  • activityBar.foreground#3455db
  • button.background#fffcf7
  • button.foreground#1a2309
  • button.hoverBackground#F92672
  • editor.background#fffcf7
  • editor.foreground#1a2309
  • editor.selectionHighlightBackground#fffcf7
  • editor.selectionHighlightBorder#7600a8
  • editorLineNumber.activeForeground#F92672
  • sideBar.background#fffcf7
  • sideBar.foreground#233991
  • sideBarTitle.foreground#1a2309
  • statusBar.background#fffcf7
  • statusBar.debuggingBackground#F92672
  • statusBar.debuggingForeground#fffcf7
  • statusBar.foreground#3455db
  • tab.activeBackground#3455dbc4
  • tab.activeForeground#fffcf7
  • tab.hoverBackground#F92672
  • tab.inactiveBackground#fffcf7
  • tab.inactiveForeground#3455db

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AAAAAAitalic
comment.block.preprocessor#AAAAAA
comment.documentation, comment.block.documentation#1e824c
invalid.illegal#660000
keyword.operator#777777
keyword, storage#2a7ab0
storage.type, support.type#1e824citalic
constant.language, support.constant, variable.language#4f5a65
variable, support.variable#F92672
entity.name.function, support.function#dc2a2abold
entity.name.type, entity.other.inherited-class, support.class#F92672bold
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#3a539b
source.css support.constant.property-value.css, source.sass support.constant.property-value.css, source.scss support.constant.property-value.css, source.less support.constant.property-value.css, source.stylus support.constant.property-value.css, source.postcss support.constant.property-value.css, source.css meta.property-value.css, source.sass meta.property-value.css, source.scss meta.property-value.css, source.less meta.property-value.css, source.stylus meta.property-value.css, source.postcss meta.property-value.css, source.css keyword.other.unit.em.css, source.sass keyword.other.unit.em.css, source.scss keyword.other.unit.em.css, source.less keyword.other.unit.em.css, source.stylus keyword.other.unit.em.css, source.postcss keyword.other.unit.em.css, source.css constant.numeric.css, source.sass constant.numeric.css, source.scss constant.numeric.css, source.less constant.numeric.css, source.stylus constant.numeric.css, source.postcss constant.numeric.css, source.css support.constant.font-name.css, source.sass support.constant.font-name.css, source.scss support.constant.font-name.css, source.less support.constant.font-name.css, source.stylus support.constant.font-name.css, source.postcss support.constant.font-name.css, source.css keyword.other.unit.percentage.css, source.sass keyword.other.unit.percentage.css, source.scss keyword.other.unit.percentage.css, source.less keyword.other.unit.percentage.css, source.stylus keyword.other.unit.percentage.css, source.postcss keyword.other.unit.percentage.css, source.css keyword.other.unit.px.css, source.sass keyword.other.unit.px.css, source.scss keyword.other.unit.px.css, source.less keyword.other.unit.px.css, source.stylus keyword.other.unit.px.css, source.postcss keyword.other.unit.px.css, source.css keyword.other.unit.rem.css, source.sass keyword.other.unit.rem.css, source.scss keyword.other.unit.rem.css, source.less keyword.other.unit.rem.css, source.stylus keyword.other.unit.rem.css, source.postcss keyword.other.unit.rem.css, source.css keyword.other.unit.s.css, source.sass keyword.other.unit.s.css, source.scss keyword.other.unit.s.css, source.less keyword.other.unit.s.css, source.stylus keyword.other.unit.s.css, source.postcss keyword.other.unit.s.css#3a539b
string#1e824c
constant.character.escape#777777
string.regexp#2a7ab0
constant.other.symbol#4f5a65
punctuation#777777
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#2574a9
entity.name.tag#3455db
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#2574a9italic
constant.character.entity, punctuation.definition.entity#4f5a65
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#F92672
meta.property-name, support.type.property-name#4f5a65
meta.property-value, meta.property-value constant.other, support.constant.property-value#1e824c
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#2a7ab0
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#dc2a2a
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#F92672
markup.list#2a7ab0
markup.bold, markup.italic#1e824c
markup.inline.raw#4f5a65
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343

Shiki preview

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

Loading...

Save-Eyes-Light by alexlab - VS Code Theme