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#2b3355
  • activityBar.dropBackground#2da9e080
  • activityBarBadge.background#2da9e0
  • activityBarBadge.foreground#ffffff
  • badge.background#2da9e0
  • badge.foreground#ffffff
  • button.background#2da9e0
  • button.foreground#ffffff
  • debugToolBar.background#2b3355
  • dropdown.background#313b61
  • editor.background#1f253d
  • editor.foreground#c9a4cf
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#313b61
  • editorGroup.dropBackground#2da9e080
  • editorGroup.focusedEmptyBorder#2da9e0
  • editorGroupHeader.tabsBackground#252c49
  • editorHoverWidget.background#252c49
  • editorLineNumber.activeForeground#2da9e0
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#252c49
  • editorWidget.background#252c49
  • focusBorder#2da9e0
  • foreground#c9a4cf
  • input.background#313b61
  • inputOption.activeBorder#2da9e0
  • list.activeSelectionBackground#2da9e080
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#2da9e080
  • list.focusBackground#2da9e080
  • list.focusForeground#FFFFFF
  • list.highlightForeground#2da9e0
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#252c49
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#c9a4cf80
  • panelTitle.inactiveForeground#c9a4cf80
  • peekView.border#2da9e0
  • peekViewEditor.background#181d30
  • peekViewResult.background#252c49
  • peekViewTitle.background#1f253d
  • pickerGroup.border#FFFFFF1a
  • selection.background#2da9e0
  • sideBar.background#252c49
  • sideBar.foreground#d3d7e9
  • sideBarSectionHeader.background#2b3355
  • statusBar.background#181d30
  • statusBar.debuggingBackground#2da9e0
  • statusBar.debuggingForeground#ffffff
  • statusBar.noFolderBackground#181d30
  • statusBarItem.activeBackground#2da9e080
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#2da9e0
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorder#2da9e0
  • tab.activeModifiedBorder#2da9e0
  • tab.border#00000033
  • tab.inactiveBackground#2b3355
  • tab.inactiveModifiedBorder#1b6586
  • tab.unfocusedActiveModifiedBorder#2487b3
  • tab.unfocusedInactiveModifiedBorder#1b6586
  • titleBar.activeBackground#181d30
  • welcomePage.background#313b61

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#c9a4cf
string#d181bf
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#ffc1ff
constant.language.boolean#2da9e0
constant.numeric#f6fc9c
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#43fdff
keyword, modifier, variable.language.this, support.type.object, constant.language#2da9e0
entity.name.function, support.function#f6fc9c
storage.type, storage.modifier#2da9e0
support.module, support.node#43fdffitalic
support.type#89dcc0
entity.name.type, entity.other.inherited-class#89dcc0
comment#5d6fb7italic
entity.name.type.class#89dcc0underline
variable.object.property, meta.field.declaration entity.name.function#89dcc0
meta.definition.method entity.name.function#89dcc0
meta.function entity.name.function#89dcc0
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#2da9e0
meta.embedded, source.groovy.embedded, meta.template.expression#c9a4cf
entity.name.tag.yaml#43fdff
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#43fdff
constant.language.json#2da9e0
entity.other.attribute-name.class#2da9e0
entity.other.attribute-name.id#d181bf
source.css entity.name.tag#89dcc0
meta.tag, punctuation.definition.tag#2da9e0
entity.name.tag#43fdff
entity.other.attribute-name#f6fc9c
markup.heading#2da9e0
text.html.markdown meta.link.inline, meta.link.reference#43fdff
text.html.markdown beginning.punctuation.definition.list#2da9e0
markup.italic#43fdffitalic
markup.bold#43fdffbold
markup.bold markup.italic, markup.italic markup.bold#43fdffitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#d181bf
markup.inline.raw.string.markdown#d181bf
keyword.other.definition.ini#43fdff
entity.name.section.group-title.ini#2da9e0
source.cs meta.class.identifier storage.type#89dcc0underline
source.cs meta.method.identifier entity.name.function#89dcc0
source.cs meta.method-call meta.method, source.cs entity.name.function#f6fc9c
source.cs storage.type#89dcc0
source.cs meta.method.return-type#89dcc0
source.cs meta.preprocessor#5d6fb7
source.cs entity.name.type.namespace#c9a4cf
Global settings#c9a4cf

Shiki preview

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

Loading...

PinkBlue Theme by Giacomo002 - VS Code Theme