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#242b47
  • activityBar.dropBackground#4CC9F080
  • activityBarBadge.background#4CC9F0
  • activityBarBadge.foreground#ffffff
  • badge.background#4CC9F0
  • badge.foreground#ffffff
  • button.background#4CC9F0
  • button.foreground#ffffff
  • debugToolBar.background#242b47
  • dropdown.background#293151
  • editor.background#171b2b
  • editor.foreground#e9edfb
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorGroup.dropBackground#4CC9F080
  • editorGroup.focusedEmptyBorder#4CC9F0
  • editorGroupHeader.tabsBackground#1f253d
  • editorHoverWidget.background#1f253d
  • editorLineNumber.activeForeground#4CC9F0
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#1f253d
  • editorWidget.background#1f253d
  • focusBorder#4CC9F0
  • foreground#e9edfb
  • input.background#293151
  • inputOption.activeBorder#4CC9F0
  • list.activeSelectionBackground#4CC9F080
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#4CC9F080
  • list.focusBackground#4CC9F080
  • list.focusForeground#FFFFFF
  • list.highlightForeground#4CC9F0
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#232943
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#e9edfb80
  • panelTitle.inactiveForeground#e9edfb80
  • peekView.border#4CC9F0
  • peekViewEditor.background#141828
  • peekViewResult.background#1f253d
  • peekViewTitle.background#1a1f33
  • pickerGroup.border#FFFFFF1a
  • selection.background#4CC9F0
  • sideBar.background#1a1f33
  • sideBarSectionHeader.background#242b47
  • statusBar.background#141828
  • statusBar.debuggingBackground#4CC9F0
  • statusBar.debuggingForeground#ffffff
  • statusBar.noFolderBackground#141828
  • statusBarItem.activeBackground#4CC9F080
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#4CC9F0
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorder#4CC9F0
  • tab.activeModifiedBorder#4CC9F0
  • tab.border#00000033
  • tab.inactiveBackground#242b47
  • tab.inactiveModifiedBorder#2d7890
  • tab.unfocusedActiveModifiedBorder#3ca0c0
  • tab.unfocusedInactiveModifiedBorder#2d7890
  • titleBar.activeBackground#141828

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#e9edfb
string#c0caf1
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#ffffff
constant.language.boolean#4CC9F0
constant.numeric#9DB0FC
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#72ffff
keyword, modifier, variable.language.this, support.type.object, constant.language#4CC9F0
entity.name.function, support.function#9DB0FC
storage.type, storage.modifier#4CC9F0
support.module, support.node#72ffffitalic
support.type#C47CB0
entity.name.type, entity.other.inherited-class#C47CB0
comment#4e5d99italic
entity.name.type.class#C47CB0underline
variable.object.property, meta.field.declaration entity.name.function#C47CB0
meta.definition.method entity.name.function#C47CB0
meta.function entity.name.function#C47CB0
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#4CC9F0
meta.embedded, source.groovy.embedded, meta.template.expression#e9edfb
entity.name.tag.yaml#72ffff
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#72ffff
constant.language.json#4CC9F0
entity.other.attribute-name.class#4CC9F0
entity.other.attribute-name.id#c0caf1
source.css entity.name.tag#C47CB0
meta.tag, punctuation.definition.tag#4CC9F0
entity.name.tag#72ffff
entity.other.attribute-name#9DB0FC
markup.heading#4CC9F0
text.html.markdown meta.link.inline, meta.link.reference#72ffff
text.html.markdown beginning.punctuation.definition.list#4CC9F0
markup.italic#72ffffitalic
markup.bold#72ffffbold
markup.bold markup.italic, markup.italic markup.bold#72ffffitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#c0caf1
markup.inline.raw.string.markdown#c0caf1
keyword.other.definition.ini#72ffff
entity.name.section.group-title.ini#4CC9F0
source.cs meta.class.identifier storage.type#C47CB0underline
source.cs meta.method.identifier entity.name.function#C47CB0
source.cs meta.method-call meta.method, source.cs entity.name.function#9DB0FC
source.cs storage.type#C47CB0
source.cs meta.method.return-type#C47CB0
source.cs meta.preprocessor#4e5d99
source.cs entity.name.type.namespace#e9edfb
Global settings#e9edfb

Shiki preview

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

Loading...

PinkBlue Theme by Giacomo002 - VS Code Theme