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.

  • activityBar.activeBorder#505057
  • activityBar.background#505057
  • activityBar.foreground#d1d1d1
  • activityBarBadge.background#838383
  • editor.background#faf9f0
  • editor.foreground#1e1e1e
  • editor.lineHighlightBackground#e7eed7
  • editor.selectionBackground#ccdab2
  • editorBracketMatch.background#dadada
  • editorBracketMatch.border#868686
  • editorGroupHeader.tabsBackground#fafbfc
  • editorGroupHeader.tabsBorder#e1e4e8
  • editorIndentGuide.background#eeeeee
  • editorLineNumber.foreground#cccccc
  • focusBorder#eeeee1
  • foreground#4d4d4d
  • inputOption.activeBorder#e36209
  • list.activeSelectionBackground#dfdfc4
  • list.activeSelectionForeground#636363
  • list.focusOutline#dfdfc4
  • list.hoverBackground#e2e2c9
  • list.inactiveFocusBackground#cacaaa
  • list.inactiveSelectionBackground#dfdfc4
  • notifications.background#54a3ff
  • quickInputList.focusBackground#e7e6e5
  • quickInputList.focusForeground#1e1e1e
  • scrollbar.shadow#00000000
  • selection.background#96b15b
  • sideBar.background#eeeee1
  • sideBarSectionHeader.background#c4cab6
  • sideBarSectionHeader.border#c4cab6
  • statusBar.background#fafbfc
  • statusBar.border#e1e4e8
  • statusBar.debuggingBackground#fafbfc
  • statusBar.debuggingForeground#1e1e1e
  • statusBar.foreground#1e1e1e
  • statusBar.noFolderBackground#fafbfc
  • statusBar.noFolderForeground#1e1e1e
  • tab.activeBackground#ffffff
  • tab.activeBorder#b195ff
  • tab.border#e1e4e8
  • tab.inactiveBackground#f3f3f3
  • tab.inactiveForeground#586069
  • titleBar.activeBackground#fafbfc
  • titleBar.border#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block#1e1e1eff
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdownbold
markup.italic.markdownitalic
meta.link.inline.markdown#005cc5underline
markup.fenced_code, markup.inline#6a737d
comment#6a737d
string#032f62
constant.numeric, constant.language, variable.language.this, variable.other.class, variable.other.constant, meta.property-name, meta.property-value, support#005cc5
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, support.function.node, support.type.property-name.json, punctuation.separator.key-value, punctuation.definition.template-expression#d73a49
variable.parameter.function#E27F2D
entity.name.tag, entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.name.function, constant.keyword.clojure, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#6f42c1
entity.other.attribute-name#7e7e7e
string.quoted, string.regexp, string.interpolated, string.template, keyword.other.template#22863a
token.info-token#316bcd
token.warn-token#cd9731
token.error-token, invalid#cd3131
token.debug-token#800080
markup.inserted#22863a
markup.deleted#d73a49
markup.changed#005cc5
meta.diff.header#6a737d
constant.numeric.css, support.constant.property-value.css, support.function.misc.css, constant.other.color.rgb-value.hex.css, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css#353535
bt-theme by bt-lang - VS Code Theme