Skip to main content
CodingTheme

Color themes

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.

  • editor.background#141414
  • editor.foreground#FEFFD3
  • editor.inactiveSelectionBackground#3C3C3C
  • editor.lineHighlightBackground#525254
  • editor.selectionBackground#4C4C4C
  • editorCursor.foreground#F18260
  • editorGutter.background#3d3d3f
  • editorIndentGuide.background#F1826025
  • editorOverviewRuler.addedForeground#141414
  • editorOverviewRuler.border#141414
  • editorRuler.foreground#141414
  • editorWhitespace.foreground#F18260
  • scrollbarSlider.background#25252699
  • sideBar.background#141414
  • statusBar.background#262626
  • statusBar.foreground#232323
  • tab.activeBackground#141414
  • tab.hoverBackground#252526
  • tab.inactiveBackground#1f1f1f
  • titleBar.activeBackground#1f1f1f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#FEFFD3
entity.other.inherited-class.js, entity.name.type.module.js, meta.embedded.expression.js, source.ruby, text.html.erb, source.json.comments#ffffff
storage.modifier.js#ab98ac
#C2A86C
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#d7b67c
string.json.comments, string, support#AFB979
meta.tag#ac8350
comment#5F5A60italic
constant#CF6A4C
entity#ac8350
keyword#d7b67c
storage#faf0a8
variable#889ab5
invalid.deprecated#D2A8A1italic underline
entity.other.inherited-class#9B5C2Eitalic
string source#DAEFA3
string constant#DDF2A4
string.regexp#E9C062
string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#CF7D34
string variable#8A9A95
support.function#DAD085
support.constant#CF6A4C
meta.preprocessor.c, support.class.ruby#8996A8
meta.preprocessor.c keyword#AFC4DB
meta.tag.sgml.doctype, meta.tag.sgml.doctype entity, meta.tag.sgml.doctype string, meta.tag.preprocessor.xml, meta.tag.preprocessor.xml entity, meta.tag.preprocessor.xml string#494949
declaration.tag, declaration.tag entity, meta.tag entity#AC885B
declaration.tag.inline, declaration.tag.inline entity, source entity.name.tag, source entity.other.attribute-name, meta.tag.inline, meta.tag.inline entity#ffffff
meta.selector.css entity.name.tag#CDA869
meta.selector.css entity.other.attribute-name.tag.pseudo-class#8F9D6A
meta.selector.css entity.other.attribute-name.id#8B98AB
meta.selector.css entity.other.attribute-name.class#ac8350
support.type.property-name.css#C5AF75
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#F9EE98
meta.preprocessor.at-rule keyword.control.at-rule#8693A5
meta.property-value support.constant.named-color.css, meta.property-value constant#CA7840
meta.constructor.argument.css#8F9D6A
meta.diff, meta.diff.header, meta.separator#F8F8F8italic
markup.deleted#F8F8F8
markup.changed#F8F8F8
markup.inserted#F8F8F8
markup.list#F9EE98
markup.heading#CF6A4C
markup.deleted.git_gutter#CF6A4C
markup.inserted.git_gutter#8F9D6A
markup.changed.git_gutter#889ab5
markup.ignored.git_gutter#565656
markup.untracked.git_gutter#565656

Shiki preview

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

Loading...

Textmate by ckpedersen - VS Code Theme