Skip to main content
Coding Theme

Puff - Theme

Publisher: Jasper CrowleyThemes in package: 1

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#111320
  • activityBar.foreground#B4E1FD
  • activityBarBadge.background#FF0883
  • activityBarBadge.foreground#ffffff
  • debugToolBar.background#111320
  • editor.background#111320
  • editor.foreground#e1e1e1
  • editor.hoverHighlightBackground#272a3d
  • editor.lineHighlightBackground#1b1e31
  • editor.selectionBackground#30343B
  • editorCursor.foreground#F8F8F0
  • editorGroupHeader.tabsBackground#111320
  • editorIndentGuide.activeBackground#38a870
  • editorIndentGuide.background#272a3d
  • editorWhitespace.foreground#373B41
  • list.activeSelectionBackground#272a3d
  • list.activeSelectionForeground#00ff80
  • list.dropBackground#111320
  • list.errorForeground#ff0000
  • list.focusBackground#8a1e54
  • list.highlightForeground#00ff80
  • list.hoverBackground#35374d
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#FF0883
  • list.inactiveSelectionBackground#272a3d
  • list.inactiveSelectionForeground#FF0883
  • panel.background#111320
  • scrollbar.shadow#111320
  • scrollbarSlider.activeBackground#38a870
  • scrollbarSlider.background#1c1e2e
  • scrollbarSlider.hoverBackground#272a3d
  • sideBar.background#111320
  • sideBar.border#111320
  • sideBar.foreground#B4E1FD
  • sideBarTitle.foreground#fff
  • statusBar.background#191c2c
  • tab.inactiveBackground#191c2c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#fff
comment#343f46italic
string#7FD6FA
string.regex#8abeb7
string.other.link#f25a55
constant#277BD3
constant.numeric#FF8308
constant.language#de347a
constant.character, constant.other#FF0883
variable.function#48a3ff
variable.other#b7a7e2
variable#fff
variable.assignment#f25a55
keyword#FF0883
keyword.control#0883FF
keyword.control.definition#FF0883
keyword.operator#8E1EFF
keyword.other.unit#8E1EFFitalic
storage#FF0883italic
storage.type#08FF83
storage.import#83FF08italic
entity.name.function#83FF08
entity.name.class#83FF08
entity.name.type.class#83FF08
entity.name.tag#08FF83
entity.name.section#277BD3
entity.other.inherited-class#83FF08
entity.other.attribute-name#277BD3
entity.other.attribute-name.html#277BD3
entity.other.attribute-name.id#277BD3
entity.name.function#ff65b2
variable.parameter#08FF83italic
entity.name.tag#08FF83
entity.other.attribute-name#08FF83
support.function#08FF83
support.constant#DE347A
support.type, support.class#B4E1FDitalic
support.other.variable#3299CC
invalid#ffaaaa
invalid.deprecated#ffaaaa
punctuation.definition.comment#404449
punctuation.definition.array#BFD7DB
punctuation.definition.parameters#BFD7DB
punctuation.definition.heading#277BD3

Shiki preview

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

Loading...

Puff - Theme - Coding Theme