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#181020
  • activityBar.dropBackground#63261180
  • activityBar.foreground#ffffca
  • activityBarBadge.background#632611
  • activityBarBadge.foreground#f0e500
  • badge.background#632611
  • badge.foreground#f0e500
  • button.background#d9c400
  • button.foreground#000000
  • debugToolBar.background#21162c
  • dropdown.background#181020
  • editor.background#261933
  • editor.foreground#ffffca
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#632611
  • editor.selectionHighlightBackground#632611
  • editorGroup.dropBackground#d9c40080
  • editorGroup.focusedEmptyBorder#d9c400
  • editorGroupHeader.tabsBackground#261933
  • editorHoverWidget.background#261933
  • editorLineNumber.activeForeground#f0e500ff
  • editorLineNumber.foreground#b49a19dd
  • editorMarkerNavigation.background#261933
  • editorWidget.background#261933
  • focusBorder#d9c400
  • foreground#ffffca
  • input.background#181020
  • inputOption.activeBorder#d9c400
  • list.activeSelectionBackground#63261180
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#d9c40080
  • list.focusBackground#d9c40080
  • list.focusForeground#FFFFFF
  • list.highlightForeground#d9c400
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#261933
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#ffffca80
  • panelTitle.inactiveForeground#ffffca80
  • peekView.border#d9c400
  • peekViewEditor.background#21162c
  • peekViewResult.background#261933
  • peekViewTitle.background#261933
  • pickerGroup.border#FFFFFF1a
  • selection.background#632611
  • sideBar.background#21162c
  • sideBar.foreground#ffffca
  • sideBarSectionHeader.background#181020
  • statusBar.background#21162c
  • statusBar.debuggingBackground#d9c400
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#ffffca
  • statusBar.noFolderBackground#21162c
  • statusBarItem.activeBackground#d9c40080
  • statusBarItem.hoverBackground#FFFFFF1a
  • statusBarItem.remoteBackground#d9c400
  • statusBarItem.remoteForeground#000000
  • tab.activeBorder#d9c400
  • tab.activeModifiedBorder#d9c400
  • tab.border#00000033
  • tab.inactiveBackground#21162c
  • tab.inactiveModifiedBorder#908900
  • tab.unfocusedActiveModifiedBorder#c0b700
  • tab.unfocusedInactiveModifiedBorder#908900
  • titleBar.activeBackground#21162c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#ffffca
string#74e4f3
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#d9c400
constant.language.boolean#d9c400
constant.numeric#a99ade
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property, meta.definition.variable, support.constant, support.variable#e5caff
variable, support.class, entity.name.function#ffffca
keyword, modifier, variable.language.this, support.type.object, constant.language#d9c400
entity.name.function, support.function#d992ff
storage.type, storage.modifier#f0e500
support.module, support.node#d9c400italic
support.type#ff7e50
entity.name.type, entity.other.inherited-class#ff7e50
comment#bb8673italic
entity.name.type.class#ff7e50underline
variable.object.property, meta.field.declaration entity.name.function#ff7e50
meta.definition.method entity.name.function#d992ff
meta.function entity.name.function#d992ff
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#d9c400
meta.embedded, source.groovy.embedded, meta.template.expression#ffffca
entity.name.tag.yaml#d9c400
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#d9c400
constant.language.json#d9c400
entity.other.attribute-name.class#d9c400
entity.other.attribute-name.id#74e4f3
source.css entity.name.tag#ff7e50
meta.tag, punctuation.definition.tag#d9c400
entity.name.tag#d9c400
entity.other.attribute-name#d992ff
markup.heading#d9c400
text.html.markdown meta.link.inline, meta.link.reference#d9c400
text.html.markdown beginning.punctuation.definition.list#d9c400
markup.italic#d9c400italic
markup.bold#d9c400bold
markup.bold markup.italic, markup.italic markup.bold#d9c400italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#74e4f3
markup.inline.raw.string.markdown#74e4f3
keyword.other.definition.ini#d9c400
entity.name.section.group-title.ini#d9c400
source.cs meta.class.identifier storage.type#ff7e50underline
source.cs meta.method.identifier entity.name.function#ff7e50
source.cs meta.method-call meta.method, source.cs entity.name.function#d992ff
source.cs storage.type#ff7e50
source.cs meta.method.return-type#ff7e50
source.cs meta.preprocessor#f0e500
source.cs entity.name.type.namespace#ffffca
Global settings#ffffca

Shiki preview

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

Loading...