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.

  • activityBar.background#434444ce
  • activityBarBadge.background#ff5d13
  • activityBarBadge.foreground#fdfdfd
  • badge.background#d68762
  • badge.foreground#f8f8f8
  • button.background#3d3d3d
  • editor.background#1e1f1fce
  • editor.findMatchBackground#574c357a
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#292929b6
  • editor.lineHighlightBorder#42232300
  • editor.selectionBackground#99989849
  • editor.selectionForeground#a8a8a8
  • editor.selectionHighlightBorder#c20b0b15
  • editorGroup.border#b9ab9b41
  • editorGroupHeader.border#434444ce
  • editorGroupHeader.tabsBackground#434444ce
  • editorGroupHeader.tabsBorder#434444ce
  • input.background#525252
  • input.border#b9ab9b3d
  • input.foreground#ffffff
  • input.placeholderForeground#ffffff
  • inputOption.activeBorder#b9ab9b3d
  • list.activeSelectionBackground#63636398
  • list.activeSelectionIconForeground#fa9688
  • list.focusAndSelectionOutline#aaa9a8
  • list.focusBackground#8b8b8b
  • list.hoverBackground#525252
  • list.inactiveSelectionBackground#525353ce
  • scrollbarSlider.activeBackground#464646
  • scrollbarSlider.background#353535
  • scrollbarSlider.hoverBackground#3a3a3a
  • sideBar.background#1e1f1fce
  • sideBar.border#3f3f3f80
  • sideBar.foreground#fcfcfc
  • sideBarSectionHeader.background#434444ce
  • sideBarSectionHeader.foreground#f3f3f3
  • sideBarTitle.foreground#ffffff
  • statusBar.background#2e2e2e
  • statusBar.foreground#fcfcfc
  • tab.activeBackground#5f5f5fce
  • tab.activeForeground#ffffff
  • tab.border#b9ab9b00
  • tab.inactiveBackground#434444ce
  • tab.inactiveForeground#ffffff
  • titleBar.activeBackground#434444ce
  • titleBar.activeForeground#ececec
  • titleBar.border#91ff0000
  • titleBar.inactiveBackground#434444ce
  • titleBar.inactiveForeground#9b9b9b
  • window.activeBorder#f3f3f36b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#838282c7italic
comment.block.preprocessor#ddcec8c7
comment.documentation, comment.block.documentation#ddcec8c7
invalid.illegal#dda4a4
keyword.operator#ece797
keyword, storage#eeebe9
storage.type, support.type#ff6f2d
constant.language, support.constant, variable.language#fadcd4
variable, support.variable#dfdfdf
entity.name.function, support.function#f1f1f1
entity.name.type, entity.other.inherited-class, support.class#ff6f2d
entity.name.exception#ff9898
entity.name.sectionbold
constant.numeric, constant.character, constant#fbfcf2e7
string#a7f84ade
constant.character.escape#777777
string.regexp#b0cdf3
constant.other.symbol#b9b9b9
punctuation#c2c2c2
meta.attribute-value.html, string.quoted.html#b0abf3
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#caebf8
entity.name.tag#ffe8ce
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#f3d19fitalic
constant.character.entity, punctuation.definition.entity#ebc4a1
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#f79749
meta.property-name, support.type.property-name#f7f1d1da
meta.property-value, meta.property-value constant.other, support.constant.property-value#d7e7f3e1
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#6d2626
markup.inserted#000000
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#b16a67
markup.boldbold
markup.traceback#e99494
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#c7e6bb
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343

Shiki preview

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

Loading...