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#ff99e280
  • activityBarBadge.background#ff99e2
  • activityBarBadge.foreground#ffffff
  • badge.background#ff99e2
  • badge.foreground#ffffff
  • button.background#ff99e2b6
  • button.foreground#ffffff
  • button.hoverBackground#ff99e269
  • debugToolBar.background#242b47
  • dropdown.background#293151
  • editor.background#1a1f33
  • editor.foreground#ffccff
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorGroup.dropBackground#ff99e280
  • editorGroup.focusedEmptyBorder#ff99e2
  • editorGroupHeader.tabsBackground#1f253d
  • editorHoverWidget.background#1f253d
  • editorLineNumber.activeForeground#ff99e2
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#1f253d
  • editorWidget.background#1f253d
  • focusBorder#ff99e2
  • foreground#ffccff91
  • input.background#293151
  • inputOption.activeBorder#ff99e2
  • list.activeSelectionBackground#ff99e280
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#ff99e280
  • list.focusBackground#ff99e280
  • list.focusForeground#FFFFFF
  • list.highlightForeground#ff99e2
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#1f253d
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#ffccff80
  • panelTitle.inactiveForeground#ffccff80
  • peekView.border#ff99e2
  • peekViewEditor.background#141828
  • peekViewResult.background#1f253d
  • peekViewTitle.background#1a1f33
  • pickerGroup.border#FFFFFF1a
  • selection.background#ff99e2
  • sideBar.background#151a2b
  • sideBarSectionHeader.background#242b47
  • statusBar.background#141828
  • statusBar.debuggingBackground#ff99e2
  • statusBar.debuggingForeground#ffffff
  • statusBar.noFolderBackground#141828
  • statusBarItem.activeBackground#ff99e280
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#ff99e2
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorder#ff99e2
  • tab.activeModifiedBorder#ff99e2
  • tab.border#00000033
  • tab.inactiveBackground#242b47
  • tab.inactiveModifiedBorder#995b87
  • tab.unfocusedActiveModifiedBorder#cc7ab4
  • tab.unfocusedInactiveModifiedBorder#995b87
  • terminal.foreground#b9c7ff
  • titleBar.activeBackground#141828

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#fcf
string#30c1ff
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#48ffff
constant.language.boolean#ff99e2
constant.numeric#f6fc9c
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#ffe5ff
keyword, modifier, variable.language.this, support.type.object, constant.language#ff99e2
entity.name.function, support.function#f6fc9c
storage.type, storage.modifier#ff99e2
support.module, support.node#ffe5ffitalic
support.type#89dcc0
entity.name.type, entity.other.inherited-class#89dcc0
comment#4e5d99italic
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#ff99e2
meta.embedded, source.groovy.embedded, meta.template.expression#ffccff
entity.name.tag.yaml#ffe5ff
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#ffe5ff
constant.language.json#ff99e2
entity.other.attribute-name.class#ff99e2
entity.other.attribute-name.id#30c1ff
source.css entity.name.tag#89dcc0
meta.tag, punctuation.definition.tag#ff99e2
entity.name.tag#ffe5ff
entity.other.attribute-name#f6fc9c
markup.heading#ff99e2
text.html.markdown meta.link.inline, meta.link.reference#ffe5ff
text.html.markdown beginning.punctuation.definition.list#ff99e2
markup.italic#ffe5ffitalic
markup.bold#ffe5ffbold
markup.bold markup.italic, markup.italic markup.bold#ffe5ffitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#30c1ff
markup.inline.raw.string.markdown#30c1ff
keyword.other.definition.ini#ffe5ff
entity.name.section.group-title.ini#ff99e2
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#4e5d99
source.cs entity.name.type.namespace#ffccff
Global settings#ffccff

Shiki preview

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

Loading...

PinkBlue Theme by Giacomo002 - VS Code Theme