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#2f2f2f
  • activityBar.dropBackground#33cc1180
  • activityBarBadge.background#33cc11
  • debugToolBar.background#2f2f2f
  • dropdown.background#363636
  • editor.background#222222
  • editor.foreground#dddddd
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorGroup.dropBackground#33cc1180
  • editorGroup.focusedEmptyBorder#33cc11
  • editorGroupHeader.tabsBackground#282828
  • editorHoverWidget.background#282828
  • editorLineNumber.activeForeground#33cc11
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#282828
  • editorWidget.background#282828
  • focusBorder#33cc11
  • foreground#dddddd
  • input.background#363636
  • inputOption.activeBorder#33cc11
  • list.activeSelectionBackground#33cc1180
  • list.dropBackground#33cc1180
  • list.focusBackground#33cc1180
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#282828
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#dddddd80
  • panelTitle.inactiveForeground#dddddd80
  • peekView.border#33cc11
  • peekViewEditor.background#1b1b1b
  • peekViewResult.background#282828
  • peekViewTitle.background#222222
  • pickerGroup.border#FFFFFF1a
  • selection.background#33cc11
  • sideBar.background#282828
  • sideBarSectionHeader.background#2f2f2f
  • statusBar.background#009900
  • statusBar.debuggingBackground#33cc11
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#1b1b1b
  • statusBarItem.activeBackground#33cc1180
  • statusBarItem.hoverBackground#FFFFFF1a
  • tab.activeBorder#33cc11
  • tab.activeModifiedBorder#33cc11
  • tab.border#00000033
  • tab.inactiveBackground#2f2f2f
  • tab.inactiveModifiedBorder#1e7a0a
  • tab.unfocusedActiveModifiedBorder#28a30d
  • tab.unfocusedInactiveModifiedBorder#1e7a0a
  • titleBar.activeBackground#009900
  • titleBar.activeForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#dddddd
string#ddee88
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#ffffe5
constant.language.boolean#33cc11
constant.numeric#33cc11
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#aacc99
keyword, modifier, variable.language.this, support.type.object, constant.language#88dd55
entity.name.function, support.function#88dd55
storage.type, storage.modifier#33cc11
support.module, support.node#aacc99italic
support.type#228800
entity.name.type, entity.other.inherited-class#228800
comment#228800italic
entity.name.type.class#ddee88underline
variable.object.property, meta.field.declaration entity.name.function#ddee88
meta.definition.method entity.name.function#ddee88
meta.function entity.name.function#88dd55
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#88dd55
meta.embedded, source.groovy.embedded, meta.template.expression#dddddd
entity.name.tag.yaml#aacc99
modifier#88dd55
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#aacc99
constant.language.json#88dd55
entity.other.attribute-name.class#88dd55
entity.other.attribute-name.id#88dd55
source.css entity.name.tag#88dd55
meta.tag, punctuation.definition.tag#88dd55
entity.name.tag#aacc99
entity.other.attribute-name#88dd55
markup.heading#88dd55
text.html.markdown meta.link.inline, meta.link.reference#aacc99
text.html.markdown beginning.punctuation.definition.list#88dd55
markup.italic#aacc99italic
markup.bold#aacc99bold
markup.bold markup.italic, markup.italic markup.bold#aacc99italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#ddee88
markup.inline.raw.string.markdown#ddee88
keyword.other.definition.ini#aacc99
entity.name.section.group-title.ini#88dd55
source.cs meta.class.identifier storage.type#ddee88underline
source.cs meta.method.identifier entity.name.function#ddee88
source.cs meta.method-call meta.method, source.cs entity.name.function#88dd55
source.cs storage.type#228800
source.cs meta.method.return-type#228800
source.cs meta.preprocessor#228800
source.cs entity.name.type.namespace#dddddd
Global settings#dddddd

Shiki preview

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

Loading...