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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#dddddd
string#88eedd
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#ffffff
constant.language.boolean#1166ff
constant.numeric#1166ff
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#aaddff
keyword, modifier, variable.language.this, support.type.object, constant.language#55aaff
entity.name.function, support.function#55aaff
storage.type, storage.modifier#1166ff
support.module, support.node#aaddffitalic
support.type#4499bb
entity.name.type, entity.other.inherited-class#4499bb
comment#4499bbitalic
entity.name.type.class#88eeddunderline
variable.object.property, meta.field.declaration entity.name.function#88eedd
meta.definition.method entity.name.function#88eedd
meta.function entity.name.function#55aaff
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#55aaff
meta.embedded, source.groovy.embedded, meta.template.expression#dddddd
entity.name.tag.yaml#aaddff
modifier#55aaff
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#aaddff
constant.language.json#55aaff
entity.other.attribute-name.class#55aaff
entity.other.attribute-name.id#55aaff
source.css entity.name.tag#55aaff
meta.tag, punctuation.definition.tag#55aaff
entity.name.tag#aaddff
entity.other.attribute-name#55aaff
markup.heading#55aaff
text.html.markdown meta.link.inline, meta.link.reference#aaddff
text.html.markdown beginning.punctuation.definition.list#55aaff
markup.italic#aaddffitalic
markup.bold#aaddffbold
markup.bold markup.italic, markup.italic markup.bold#aaddffitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#88eedd
markup.inline.raw.string.markdown#88eedd
keyword.other.definition.ini#aaddff
entity.name.section.group-title.ini#55aaff
source.cs meta.class.identifier storage.type#88eeddunderline
source.cs meta.method.identifier entity.name.function#88eedd
source.cs meta.method-call meta.method, source.cs entity.name.function#55aaff
source.cs storage.type#4499bb
source.cs meta.method.return-type#4499bb
source.cs meta.preprocessor#4499bb
source.cs entity.name.type.namespace#dddddd
Global settings#dddddd

Shiki preview

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

Loading...

Themed Themes Max by Maxwell Clarke - VS Code Theme