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