Skip to main content
Coding Theme

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#FFFFFF
  • editor.foreground#000000
  • editor.lineHighlightBackground#f1f6f6bf
  • editor.selectionBackground#eeeec4bf
  • editor.snippetTabstopHighlightBackground#eeeec4bf
  • editorCursor.foreground#9A9D9F
  • editorSuggestWidget.focusHighlightForeground#ff7e22
  • editorSuggestWidget.highlightForeground#ff7e22
  • editorWhitespace.foreground#FFFFFF26
  • list.focusHighlightForeground#ffb078
  • sideBar.background#f5f5e1
  • sideBar.border#e3e3e3
  • sideBar.foreground#321818
  • sideBarSectionHeader.background#d6ebec
  • sideBarSectionHeader.border#652747
  • statusBar.background#72ab77
  • statusBar.debuggingBackground#d38416
  • statusBar.noFolderBackground#18551b
  • statusBarItem.activeBackground#ae0331
  • tab.activeBackground#f9dafc
  • tab.activeForeground#443f3f
  • tab.inactiveBackground#f3f3f3
  • tab.inactiveForeground#a9a9a9
  • titleBar.activeBackground#aeb6b0
  • titleBar.activeForeground#5d5757

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#000000
punctuation - (punctuation.definition.string | punctuation.definition.comment)#3D3C0A
constant#e3770a
constant.language#4E7CFF
entity#EB4A51
entity.name.type#000000
entity.name.type.class, entity.name.type.module, entity.name.type.trait, entity.name.type.struct, entity.name.type.enum, entity.name.type.declarationunderline
meta.function entity.name.type, entity.name.type.primitive, entity.name.type.numeric, entity.name.type.lifetime, entity.name.type.macro#e3770a
entity.name.function#bb23de
keyword#2020ff
keyword.operator#974687
constant.numeric#1E2F32
storage#6E5EBE
string, string.unquoted.heredoc string#109513
comment#ecafd0italic
support#74A98C
variable#2f9db0
variable.language#00a9a9
variable.other#1E2F32
variable.other.readwrite#20a3ba
variable.other.constant, meta.attribute#47a2b7
variable.object.property#ec8e01
support.class#E12323
meta.function-call entity.name.function, meta.function.call entity.name.function#c1148d
meta.macro entity.name.function#f31b29
invalid#989898
text source, string.unquoted.heredoc, source source, meta.embedded#002240
entity.other.inherited-class#000000italic
string.quoted source
string constant#00AD01
string.regexp#00BA62
string variable#40BB00
support.function#000000
support.function.macro#CD3B3B
punctuation.section.embedded#ACAA8C
support.constant#B50E1B
support.type.exception#FF1E00
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#73817D
meta.tag, meta.tag entity#1498cc
entity.other.attribute-name.id.css#cc08cc
entity.other.attribute-name.class.css#cc9b08
support.type.property-name.css#5ed3a8
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#3D3C1F
meta.preprocessor.at-rule keyword.control.at-rule#F6AA11
meta.property-value support.constant.named-color.css, meta.property-value constant#B430E0
meta.constructor.argument.css#EB939A
meta.diff, meta.diff.header#000000
markup.deleted#000000
markup.changed#000000
markup.inserted#000000
markup.raw
markup.quote
markup.list#C82088
markup.bold#C1AFFFbold
markup.italic#FF0000italic
markup.heading#D75914bold
string.json support.type.property-name.json#e3770a
text.html meta.attribute.data-x entity.other.attribute-name.html#deae00
meta.directive.vue entity.other.attribute-name.html#566200
text.asciidoc markup.heading.heading-0, text.asciidoc markup.heading.heading-1, text.asciidoc markup.heading.heading-2, text.asciidoc markup.heading.heading-3, text.asciidoc markup.heading.heading-4, text.asciidoc markup.heading.heading-5#0000FFunderline
Pennarelli-theme by tkmfujise - VS Code Theme