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#2f2f2f
  • activityBar.dropBackground#cc55aa80
  • activityBarBadge.background#cc55aa
  • debugToolBar.background#2f2f2f
  • dropdown.background#363636
  • editor.background#222222
  • editor.foreground#dddddd
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorGroup.dropBackground#cc55aa80
  • editorGroup.focusedEmptyBorder#cc55aa
  • editorGroupHeader.tabsBackground#282828
  • editorHoverWidget.background#282828
  • editorLineNumber.activeForeground#cc55aa
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#282828
  • editorWidget.background#282828
  • focusBorder#cc55aa
  • foreground#dddddd
  • input.background#363636
  • inputOption.activeBorder#cc55aa
  • list.activeSelectionBackground#cc55aa80
  • list.dropBackground#cc55aa80
  • list.focusBackground#cc55aa80
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • panel.background#282828
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#dddddd80
  • panelTitle.inactiveForeground#dddddd80
  • peekView.border#cc55aa
  • peekViewEditor.background#1b1b1b
  • peekViewResult.background#282828
  • peekViewTitle.background#222222
  • pickerGroup.border#FFFFFF1a
  • selection.background#cc55aa
  • sideBar.background#282828
  • sideBarSectionHeader.background#2f2f2f
  • statusBar.background#8800aa
  • statusBar.debuggingBackground#cc55aa
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#1b1b1b
  • statusBarItem.activeBackground#cc55aa80
  • statusBarItem.hoverBackground#FFFFFF1a
  • tab.activeBorder#cc55aa
  • tab.activeModifiedBorder#cc55aa
  • tab.border#00000033
  • tab.inactiveBackground#2f2f2f
  • tab.inactiveModifiedBorder#7a3366
  • tab.unfocusedActiveModifiedBorder#a34488
  • tab.unfocusedInactiveModifiedBorder#7a3366
  • titleBar.activeBackground#8800aa
  • titleBar.activeForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#dddddd
string#ffaaff
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#ffffff
constant.language.boolean#cc55aa
constant.numeric#cc55aa
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#ddaadd
keyword, modifier, variable.language.this, support.type.object, constant.language#bb55ff
entity.name.function, support.function#bb55ff
storage.type, storage.modifier#cc55aa
support.module, support.node#ddaadditalic
support.type#9955ff
entity.name.type, entity.other.inherited-class#9955ff
comment#9955ffitalic
entity.name.type.class#ffaaffunderline
variable.object.property, meta.field.declaration entity.name.function#ffaaff
meta.definition.method entity.name.function#ffaaff
meta.function entity.name.function#bb55ff
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#bb55ff
meta.embedded, source.groovy.embedded, meta.template.expression#dddddd
entity.name.tag.yaml#ddaadd
modifier#bb55ff
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#ddaadd
constant.language.json#bb55ff
entity.other.attribute-name.class#bb55ff
entity.other.attribute-name.id#bb55ff
source.css entity.name.tag#bb55ff
meta.tag, punctuation.definition.tag#bb55ff
entity.name.tag#ddaadd
entity.other.attribute-name#bb55ff
markup.heading#bb55ff
text.html.markdown meta.link.inline, meta.link.reference#ddaadd
text.html.markdown beginning.punctuation.definition.list#bb55ff
markup.italic#ddaadditalic
markup.bold#ddaaddbold
markup.bold markup.italic, markup.italic markup.bold#ddaadditalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#ffaaff
markup.inline.raw.string.markdown#ffaaff
keyword.other.definition.ini#ddaadd
entity.name.section.group-title.ini#bb55ff
source.cs meta.class.identifier storage.type#ffaaffunderline
source.cs meta.method.identifier entity.name.function#ffaaff
source.cs meta.method-call meta.method, source.cs entity.name.function#bb55ff
source.cs storage.type#9955ff
source.cs meta.method.return-type#9955ff
source.cs meta.preprocessor#9955ff
source.cs entity.name.type.namespace#dddddd
Global settings#dddddd

Shiki preview

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

Loading...