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.activeBackground#305070
  • activityBar.activeBorder#305070
  • activityBarBadge.background#007acc
  • breadcrumb.background#eeeeee
  • breadcrumb.foreground#000000
  • contrastActiveBorder#aaccee
  • contrastBorder#aaaaaa
  • editor.background#ffffff
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#e5ebf1
  • editor.selectionHighlightBackground#add6ff80
  • editorGroupHeader.tabsBackground#eeeeee
  • editorIndentGuide.activeBackground#939393
  • editorIndentGuide.background#d3d3d3
  • editorSuggestWidget.background#f3f3f3
  • foreground#000000
  • input.border#aaaaaa
  • input.placeholderForeground#767676
  • list.hoverBackground#e8e8e8
  • panel.background#eeeeee
  • panel.border#aaaaaa
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#555555
  • settings.numberInputBorder#cecece
  • settings.textInputBorder#cecece
  • sideBar.background#eeeeee
  • sideBarSectionHeader.background#aaccee
  • sideBarTitle.foreground#000000
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#aaccee
  • tab.activeForeground#000000
  • tab.border#cccccc
  • tab.inactiveBackground#eeeeee
  • tab.inactiveForeground#000000
  • terminal.background#ffffdd
  • terminal.foreground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#08080e
meta.embedded, source.groovy.embedded#08080e
comment#579b91
storage.type.class.doxygen.c#6bbeb1
string#995c00
punctuation.definition.template-expression, punctuation.section.embedded#a64242
meta.template.expression#080808
constant.numeric#ef4c9c
keyword.other.unit#e2a6c3
constant.language, support.constant#1e824c
constant.character, constant.other#acac00bold
variable#080808
keyword#1c00c4bold
keyword.control.directive, meta.preprocessor#00AA00
storage#1c00c4bold
entity.name.type, entity.name.class, entity.name.namespace, entity.name.function.declaration, entity.name.scope-resolution#ad00c4
entity.other.inherited-class#ad00c4italic
entity.name.function#1b2b86
entity.name.function.preprocessor#1e824c
variable.parameter#990033italic
entity.name.tag#1b2b86
entity.other.attribute-name#1b7a12
support.function#208181
support.type, support.class#ad00c4italic
invalid#F8F8F0
invalid.deprecated#F8F8F0
meta.structure.dictionary.json string.quoted.double.json#472f00
meta.diff, meta.diff.header#aabbaa
markup.deleted#e40303
markup.inserted#aaff00
markup.changed#e69500
constant.numeric.line-number.find-in-files - match#7936f7a0
entity.name.filename.find-in-files#999900
markup.quote#a64242
markup.list#999900
markup.bold, markup.italic#66D9EF
markup.inline.raw#FD971F
markup.heading#A6E22E
markup.heading.setext#A6E22E
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
variable.language, variable.object#933401
punctuation.terminator, punctuation.separator, keyword.operator.separator#f4000cbold
punctuation.section#f4000c
keyword.operator, punctuation.accessor#f4000cbold

Shiki preview

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

Loading...

Summer Night by Ehab Helaly - VS Code Theme