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#f6f8fa
  • activityBar.border#e1e4e8
  • activityBar.foreground#000000
  • editor.background#ffffff
  • editor.foreground#000000
  • editor.lineHighlightBackground#fffbdd
  • editor.selectionBackground#add2fc
  • editorCursor.foreground#000000
  • editorGroupHeader.tabsBackground#fafbfc
  • editorLineNumber.foreground#babbbd
  • editorWhitespace.foreground#000000
  • sideBar.background#ffffff
  • sideBar.border#e1e4e8
  • sideBarSectionHeader.background#f6f8fa
  • sideBarSectionHeader.border#d1d5da
  • statusBar.background#ffffff
  • statusBar.border#e1e4e8
  • statusBar.debuggingBackground#e36209
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#ffffff
  • tab.activeBorderTop#e36209
  • tab.border#e1e4e8
  • tab.inactiveBackground#fafbfc
  • titleBar.activeBackground#24292e
  • titleBar.activeForeground#ffffff
  • titleBar.border#e1e4e8
  • titleBar.inactiveBackground#3f4448
  • titleBar.inactiveForeground#cfd0d1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#000000
comment#969896
string, string support, string keyword#032f62
constant.language#0086b3
constant.other#005cc5
variable
source.shell keyword.operator.assign#000000
keyword#d73a49
keyword.operator.arithmetic.shell#d73a49
keyword.core.apacheconf#005cc5
storage, support.type.return, support.type.receiver#d73a49
entity.name.class, entity.section.ini, entity.name.section, source.ts entity.name.type, support.constant.dom.js, entity.name.type.class, entity.name.type.interface#6f42c1
entity.other.inherited-class#6f42c1
entity.name.function, variable.function.js#6f42c1
variable.parameter#000000
meta.function-call.python variable.parameter.python#e36209
entity.name.tag, entity.tag.apacheconf#22863a
entity.name.tag.doctype#000000
entity.other.attribute-name, entity.other.pseudo-element#795da3
support.function, variable.language.this.js, variable.language.js, variable.language.python, support.variable.magic.python, variable.language.this.ts, meta.function-call.js#005cc5
source.css support.type, support.constant.color, constant.codepoint-range.css, support.constant.unicode-range.prefix.css#005cc5
support.constant#005cc5
support.type, support.other.namespace#005cc5
source.js support.type#6f42c1
support.class#005cc5
support.other.variable
invalid#fafbfc
meta.property-name.css, meta.property-value.css support, meta.property-value.css support.constant, meta.property-value.css#005cc5
meta.property-value.css punctuation#000000
string constant#183691
constant.character.entity#005cc5
constant.numeric#005cc5
constant.language#005cc5
entity.name.label#6f42c1
variable.other.exported.go, entity.name.type.exported.go, variable.parameter.go, variable.other.receiver.go, variable.parameter.function.keyword.python, variable.parameter.ts#e36209
support.type.go#000000
variable.parameter.misc.css#e36209

Shiki preview

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

Loading...

GitHub 3 by Sergey Makinen - VS Code Theme