Skip to main content
Coding Theme

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#202020
  • editor.foreground#FEFFD3
  • editor.inactiveSelectionBackground#3C3C3C
  • editor.lineHighlightBackground#525252
  • editor.selectionBackground#4C4C4C
  • editor.selectionForeground#f9f9f9
  • editorCursor.foreground#F18260
  • editorGutter.background#3e3e40
  • editorIndentGuide.background#F1826025
  • editorLineNumber.foreground#a0a0a0
  • editorOverviewRuler.addedForeground#141414
  • editorOverviewRuler.border#141414
  • editorRuler.foreground#141414
  • editorSuggestWidget.background#ececec
  • editorSuggestWidget.border#a3a3a3
  • editorSuggestWidget.foreground#232323
  • editorSuggestWidget.highlightForeground#f9f9f9
  • editorSuggestWidget.selectedBackground#0063e1
  • editorWhitespace.foreground#F18260
  • editorWidget.background#d3d3d3
  • editorWidget.border#a3a3a3
  • editorWidget.foreground#232323
  • list.activeSelectionBackground#0063e1
  • list.hoverBackground#ffffff00
  • list.inactiveSelectionBackground#cecece
  • scrollbar.shadow#ffffff00
  • scrollbarSlider.background#ffffff10
  • sideBar.background#ececec
  • sideBar.foreground#232323
  • statusBar.background#dedede
  • statusBar.foreground#232323
  • tab.activeBackground#d9d9d9
  • tab.activeBorder#a3a3a3
  • tab.activeBorderTop#d9d9d9
  • tab.activeForeground#535353
  • tab.border#a3a3a3
  • tab.hoverBackground#d3d3d3
  • tab.inactiveBackground#bbbbbb
  • tab.inactiveForeground#6c6c6c
  • titleBar.activeBackground#d9d9d9
  • titleBar.activeForeground#525252
  • widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#f9f9f9
source.ruby, text.html.erb, source.json.comments, source.css, source.js#f9f9f9
comment#726d73italic
storage#faf0a8
invalid.deprecated#dbb7b0italic underline
invalid.illegal#F8F8F8
-----------------------------------
text source
text.html.ruby source
entity.other.inherited-class#ac6f3citalic
string source#e4efb9
string constant#e7f1ba
string.regexp#E9C062
string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#CF7D34
support.function#e1d797
support.constant#da7f5e
meta.preprocessor.c, support.class.ruby#ac98ad
meta.preprocessor.c keyword#c0cfe0
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#bb996e
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#d7b67c
meta.selector.css entity.other.attribute-name.tag.pseudo-class#a0ab7d
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#faf0a8
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#a0ab7d
meta.diff, meta.diff.header, meta.separator#F8F8F8italic
markup.deleted#F8F8F8
markup.changed#F8F8F8
markup.inserted#F8F8F8
markup.list#faf0a8
markup.heading#da7f5e
markup.deleted.git_gutter#da7f5e
markup.inserted.git_gutter#a0ab7d
markup.changed.git_gutter#889ab5
markup.ignored.git_gutter#565656
markup.untracked.git_gutter#565656
deco.folding#6d7d78
comment#726d73italic
constant#da7f5e
entity#ac8350
keyword#d7b67c
storage#faf0a8
string#a0ab7d
support#ac98ad
variable#889ab5
invalid.deprecated#dbb7b0italic underline
source invalid.deprecateditalic underline
invalid.illegal#f9f9f9
-----------------------------------
meta.embedded.block, punctuation.whitespace.embedded
meta.embedded.line
entity.other.inherited-class#ac6f3citalic
string meta.embedded#e4efb9
string constant#e7f1ba
string.regexp#E9C062
string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#CF7D34
string variable#9fa9a6
support.function#e1d797
support.constant#da7f5e
meta.preprocessor.c, source.swift meta.preprocessor#9da7b6
meta.preprocessor.c keyword, source.swift meta.preprocessor keyword#c0cfe0
meta.tag.metadata.doctype, meta.tag.metadata.doctype entity, meta.tag.metadata.doctype string, meta.tag.metadata.processing.xml, meta.tag.metadata.processing.xml entity, meta.tag.metadata.processing.xml string#494949
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity#bb996e
declaration.tag.inline, declaration.tag.inline entity, meta.tag.inline, meta.tag.inline entity#e3cfa1
meta.selector.css entity.name.tag#d7b67c
meta.selector.css entity.other.attribute-name.tag.pseudo-class#a0ab7d
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#faf0a8
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#a0ab7d
meta.diff, meta.diff.header, meta.separator, meta.diff.range, meta.diff.index#F8F8F8italic
markup.deleted#F8F8F8
markup.changed#F8F8F8
markup.inserted#F8F8F8
markup.list#faf0a8
markup.heading#da7f5e
markup.raw.block
meta.test1
meta.test2
meta.test3
meta.test4
source.rubybold
variable.other.readwrite.instance.ruby, constant.other.symbol.ruby, constant.other.symbol.hashkey.ruby