Skip to main content
Coding Theme

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#170000
  • activityBar.dropBackground#48120080
  • activityBar.foreground#ffcccc
  • activityBarBadge.background#481200
  • activityBarBadge.foreground#ffcc99
  • badge.background#481200
  • badge.foreground#ffcc99
  • button.background#938198
  • button.foreground#000000
  • debugToolBar.background#260000
  • dropdown.background#170000
  • editor.background#040001
  • editor.foreground#ffcccc
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#481200
  • editor.selectionHighlightBackground#481200
  • editorGroup.dropBackground#93819880
  • editorGroup.focusedEmptyBorder#938198
  • editorGroupHeader.tabsBackground#040001
  • editorHoverWidget.background#040001
  • editorLineNumber.activeForeground#ffcc99ff
  • editorLineNumber.foreground#a45a52dd
  • editorMarkerNavigation.background#040001
  • editorWidget.background#040001
  • focusBorder#938198
  • foreground#ffcccc
  • input.background#170000
  • inputOption.activeBorder#938198
  • list.activeSelectionBackground#48120080
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#93819880
  • list.focusBackground#93819880
  • list.focusForeground#FFFFFF
  • list.highlightForeground#938198
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#040001
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#ffcccc80
  • panelTitle.inactiveForeground#ffcccc80
  • peekView.border#938198
  • peekViewEditor.background#260000
  • peekViewResult.background#040001
  • peekViewTitle.background#040001
  • pickerGroup.border#FFFFFF1a
  • selection.background#481200
  • sideBar.background#260000
  • sideBar.foreground#ffcccc
  • sideBarSectionHeader.background#170000
  • statusBar.background#260000
  • statusBar.debuggingBackground#938198
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#ffcccc
  • statusBar.noFolderBackground#260000
  • statusBarItem.activeBackground#93819880
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#938198
  • statusBarItem.remoteForeground#000000
  • tab.activeBorder#938198
  • tab.activeModifiedBorder#938198
  • tab.border#00000033
  • tab.inactiveBackground#260000
  • tab.inactiveModifiedBorder#908900
  • tab.unfocusedActiveModifiedBorder#c0b700
  • tab.unfocusedInactiveModifiedBorder#908900
  • titleBar.activeBackground#260000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#ffcccc
string#ddaaaa
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#938198
constant.language.boolean#938198
constant.numeric#b4a0dc
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property, meta.definition.variable, support.constant, support.variable#ff8c69
variable, support.class, entity.name.function#ffcccc
keyword, modifier, variable.language.this, support.type.object, constant.language#938198
entity.name.function, support.function#e6817e
storage.type, storage.modifier#ffcc99
support.module, support.node#938198italic
support.type#c15bac
entity.name.type, entity.other.inherited-class#c15bac
comment#a59e85italic
entity.name.type.class#c15bacunderline
variable.object.property, meta.field.declaration entity.name.function#c15bac
meta.definition.method entity.name.function#e6817e
meta.function entity.name.function#e6817e
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#938198
meta.embedded, source.groovy.embedded, meta.template.expression#ffcccc
entity.name.tag.yaml#938198
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#938198
constant.language.json#938198
entity.other.attribute-name.class#938198
entity.other.attribute-name.id#ddaaaa
source.css entity.name.tag#c15bac
meta.tag, punctuation.definition.tag#938198
entity.name.tag#938198
entity.other.attribute-name#e6817e
markup.heading#938198
text.html.markdown meta.link.inline, meta.link.reference#938198
text.html.markdown beginning.punctuation.definition.list#938198
markup.italic#938198italic
markup.bold#938198bold
markup.bold markup.italic, markup.italic markup.bold#938198italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#ddaaaa
markup.inline.raw.string.markdown#ddaaaa
keyword.other.definition.ini#938198
entity.name.section.group-title.ini#938198
source.cs meta.class.identifier storage.type#c15bacunderline
source.cs meta.method.identifier entity.name.function#c15bac
source.cs meta.method-call meta.method, source.cs entity.name.function#e6817e
source.cs storage.type#c15bac
source.cs meta.method.return-type#c15bac
source.cs meta.preprocessor#ffcc99
source.cs entity.name.type.namespace#ffcccc
Global settings#ffcccc

Shiki preview

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

Loading...