Skip to main content
CodingTheme

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#545c6a
  • activityBar.foreground#f2f2f2
  • activityBarBadge.background#AB6526
  • activityBarBadge.foreground#f2f2f2
  • button.background#545c6a
  • button.foreground#f2f2f2
  • button.hoverBackground#000000
  • editor.background#fcfcfc
  • editor.findMatchBackground#545c6a22
  • editor.findMatchHighlightBackground#545c6a22
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#545c6a22
  • editor.lineHighlightBackground#f0f0f0
  • editor.selectionBackground#545c6a55
  • editorLineNumber.activeForeground#AB6526
  • editorLineNumber.foreground#545c6a99
  • editorLink.activeForeground#AB6526
  • extensionButton.prominentBackground#545c6a
  • extensionButton.prominentForeground#fcfcfc
  • extensionButton.prominentHoverBackground#363a4c
  • focusBorder#f2f2f2
  • list.activeSelectionBackground#545c6a99
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#eeeeee
  • list.focusForeground#363a4c
  • list.hoverBackground#eeeeee
  • list.hoverForeground#363a4c
  • list.inactiveSelectionBackground#545c6a66
  • list.inactiveSelectionForeground#363a4c
  • panel.background#fcfcfc
  • panel.border#fcfcfc
  • panelTitle.activeForeground#AB6526
  • panelTitle.inactiveForeground#545c6a
  • scrollbarSlider.activeBackground#545c6a44
  • scrollbarSlider.background#545c6a22
  • scrollbarSlider.hoverBackground#545c6a66
  • sideBar.background#fcfcfc
  • sideBar.foreground#545c6a
  • sideBarSectionHeader.background#eeeeee
  • sideBarSectionHeader.foreground#AB6526
  • statusBar.background#AB6526
  • statusBar.foreground#f2f2f2
  • statusBar.noFolderBackground#545c6a
  • statusBar.noFolderForeground#f2f2f2
  • tab.activeBackground#fcfcfc
  • tab.activeForeground#AB6526
  • tab.border#eeeeee
  • tab.inactiveBackground#eeeeee
  • tab.inactiveForeground#545c6a
  • textLink.activeForeground#AB6526
  • textLink.foreground#AB6526
  • titleBar.activeBackground#545c6a
  • titleBar.activeForeground#f2f2f2
  • titleBar.inactiveBackground#545c6a99
  • titleBar.inactiveForeground#f2f2f2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#000000
comment, punctuation.definition.comment#999999italic
comment.block.preprocessor#999999
comment.documentation, comment.block.documentation#999999
invalid.deprecated
invalid.illegal#660000
keyword.operator#777777
keyword, storage#545c6a
storage.type, support.type#999999italic
constant.language, support.constant, variable.language#AB6526
variable, support.variable#545c6a
entity.name.function, support.function#AB6526italic
entity.name.type, entity.other.inherited-class, support.class#AB6526bold
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#AB6526
string#545c6a
constant.character.escape#777777
string.regexp#545c6a
constant.other.symbol#AB6526
punctuation#777777
string source, text source
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#545c6a
entity.name.tag#AB6526
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#363a4citalic
constant.character.entity, punctuation.definition.entity#AB6526
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#363a4c
meta.property-name, support.type.property-name#545c6a
meta.property-value, meta.property-value constant.other, support.constant.property-value#545c6a
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#AB6526
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#545c6abold
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quoteitalic
markup.list#363a4c
markup.bold, markup.italic#000000
markup.inline.raw#363a4c
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...

Grueling Hare by Tim Franklin - VS Code Theme