Skip to main content
Coding Theme

Workbench Themes

Publisher: ParticleThemes in package: 2

(Subcomponent) Dark and light themes for Workbench.

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#f5f5f5
  • activityBar.border#b1b1b1
  • activityBar.foreground#b1b1b1
  • activityBarBadge.background#00334f
  • activityBarBadge.foreground#ffffff
  • button.background#00334f
  • button.foreground#ffffff
  • button.hoverBackground#0075c9
  • debugExceptionWidget.border#ed1c24
  • editor.findMatchHighlightBackground#ffcd00
  • editor.lineHighlightBackground#e0f3fd
  • editorHoverWidget.border#00ae42
  • editorLineNumber.activeForeground#00334f
  • editorLineNumber.foreground#d9d8d6
  • editorLink.activeForeground#0063a5
  • editorMarkerNavigationError.background#ed1c24
  • editorMarkerNavigationWarning.background#5B7E7A
  • inputValidation.errorBackground#ed1c24
  • inputValidation.errorBorder#ed1c24
  • list.activeSelectionBackground#60a7da
  • panel.background#f5f5f5
  • panel.border#b1b1b1
  • progressBar.background#0075c9
  • sideBar.background#ffffff
  • sideBar.border#b1b1b1
  • sideBarSectionHeader.background#f5f5f5
  • statusBar.background#041e41
  • statusBar.noFolderBackground#041e41
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0075c9
  • terminal.ansiBrightBlack#4a4a4a
  • terminal.ansiBrightBlue#0071ce
  • terminal.ansiBrightCyan#7adbff
  • terminal.ansiBrightGreen#70d44b
  • terminal.ansiBrightMagenta#b31983
  • terminal.ansiBrightRed#ed1c24
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcd00
  • terminal.ansiCyan#00334f
  • terminal.ansiGreen#00ae42
  • terminal.ansiMagenta#ed40a9
  • terminal.ansiRed#ff555a
  • terminal.ansiWhite#d9d8d6
  • terminal.ansiYellow#f5a800
  • titleBar.activeBackground#cccccc
  • titleBar.activeForeground#4d4d4d
  • titleBar.inactiveBackground#d8d8d8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#b1b1b1
keyword#0071ce
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#002f87
meta.diff.header#4a4a4a
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars#0071ce
string.regexp#811f3f
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#0071ce
keyword.control#0071ce
constant.numeric#ed40a9
storage.type#813691
markup.inline.raw#612c6b
support.function#9966b8
support.constant#9966b8
support.type, support.class#813691italic
string#00ae42
entity.name.class, entity.name.type#ffcd00underline
constant.language#0071ce
meta.preprocessor#0071ce
storage#0071ce
storage.type#0071ce
storage.modifier#0071ce
meta.template.expression#4a4a4a
constant.numeric, constant.character, constant#4a4a4a
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#0071ce
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#4a4a4a
variable.language#0071ce
entity.other.inherited-class#f5a800italic underline
entity.name.function#f5a800
entity.other.attribute-name#f5a800
markup.deleted#ed1c24
markup.changed#ed1c24

Shiki preview

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

Loading...