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#101010
  • activityBar.border#2A1B3C
  • activityBar.foreground#9E7ADF
  • dropdown.background#15121A
  • dropdown.foreground#DADADA
  • editor.background#0E0E0E
  • editor.foreground#DADADA
  • editor.inactiveSelectionBackground#9E7ADF25
  • editor.lineHighlightBackground#23234550
  • editor.selectionBackground#9E7ADF55
  • editorCursor.foreground#9E7ADF
  • editorIndentGuide.activeBackground1#9E7ADF55
  • editorIndentGuide.background1#2A2A2A
  • editorLineNumber.activeForeground#9C6DD1
  • editorLineNumber.foreground#2F2F2F
  • editorWhitespace.foreground#1F1F1F
  • input.background#181818
  • input.foreground#E0E0E0
  • list.activeSelectionBackground#2E1E4C
  • list.hoverBackground#261A3A
  • list.inactiveSelectionBackground#211835
  • panel.background#101010
  • panel.border#1F1F1F
  • quickInput.background#191324
  • quickInput.foreground#DADADA
  • sideBar.background#101010
  • sideBar.border#1A1A1A
  • sideBar.foreground#C9C9C9
  • statusBar.background#2E1E4C
  • statusBar.debuggingBackground#5B38A4
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBarItem.hoverBackground#5E30B3
  • statusBarItem.prominentBackground#5B38A4
  • statusBarItem.prominentForeground#FFFFFF
  • statusBarItem.remoteBackground#723CF8
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#181028
  • tab.activeBorder#723CF8
  • tab.activeForeground#ECECEC
  • tab.activeModifiedBorder#DD6E50
  • tab.border#1A1A1A
  • tab.hoverBackground#2E1E4C
  • tab.hoverForeground#DADADA
  • tab.inactiveBackground#101010
  • tab.inactiveForeground#888888
  • tab.inactiveModifiedBorder#7A5C4C
  • tab.lastPinnedBorder#383C91
  • tab.unfocusedActiveBackground#181028AA
  • tab.unfocusedActiveBorder#5B38A455
  • tab.unfocusedActiveForeground#B8B8B8
  • titleBar.activeBackground#181028
  • titleBar.activeForeground#CCCCCC
  • titleBar.inactiveBackground#181028AA
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A5C4Citalic
keyword, storage.type, storage.modifier, keyword.control, keyword.other#9C6DD1bold
storage.type.annotation, meta.annotation, punctuation.definition.annotation#55C8C1bold
entity.name.annotation.springframework, entity.name.annotation.spring, meta.annotation.springframework#CFCB92bold
meta.import, keyword.control.import, support.other.package#3C4185
string, constant.other.symbol, markup.quote#DD6E50
constant.numeric, constant.language, constant.character#C27B3E
entity.name.function, meta.function, meta.function-call, support.function#9E7ADF
entity.name.type.class, support.class, meta.class, entity.name.type.interface, entity.name.type.enum#8266DCbold
support.type, entity.name.type, storage.type.object#D5C97B
variable, meta.definition.variable, support.variable#55C8C1
variable.other.property, support.variable.property#B58FE0
punctuation, keyword.operator#DADADA
entity.name.tag.yaml, support.type.property-name.yaml#D5C97B
entity.name.tag.xml, meta.tag.xml, punctuation.definition.tag.xml#DD6E50
meta.key.properties, support.type.property-name#C27B3E
entity.other.attribute-name.html, entity.name.tag, meta.tag, punctuation.definition.tag#55C8C1
support.type.property-name.css#D5C97B
support.constant.property-value.css#B58FE0
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#9E7ADFbold
markup.italic.markdown#DADADAitalic
markup.bold.markdown#ECECECbold
markup.quote.markdown#7A5C4Citalic
markup.inline.raw.markdown, markup.fenced_code.block.markdown#DD6E50italic
markup.list.markdown#C27B3E
string.other.link.title.markdown#55C8C1
markup.underline.link.markdown#B58FE0underline