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.activeBorder#ba1160
  • activityBar.background#180d1c
  • activityBar.foreground#ffc0d8
  • activityBar.inactiveForeground#4a2555
  • activityBarBadge.background#ba1160
  • activityBarBadge.foreground#ffffff
  • badge.background#ba1160
  • badge.foreground#fff0f8
  • button.background#ba1160
  • button.foreground#fffafa
  • button.hoverBackground#d5256e
  • editor.background#120b14
  • editor.findMatchBackground#2d6b2dc9
  • editor.findMatchHighlightBackground#2d6b2dc9
  • editor.findMatchHighlightBorder#ba116088
  • editor.foreground#f0d0e8
  • editor.lineHighlightBackground#1e1020
  • editor.selectionBackground#ba116060
  • editor.wordHighlightBackground#ba116030
  • editor.wordHighlightStrongBackground#ba116048
  • editor.wordHighlightStrongBorder#9b4dbf
  • editorBracketHighlight.foreground1#ea4b90
  • editorBracketHighlight.foreground2#db00b6
  • editorBracketHighlight.foreground3#bc00dd
  • editorBracketHighlight.foreground4#a100f2
  • editorBracketHighlight.foreground5#6a00f4
  • editorBracketHighlight.foreground6#2d00f7
  • editorBracketMatch.background#ba116050
  • editorCursor.foreground#ff7db0
  • editorGroupHeader.tabsBackground#180d1c
  • editorLineNumber.activeForeground#ba1160
  • editorLineNumber.foreground#5a3055
  • editorWidget.background#1e1020
  • editorWidget.foreground#ff69b4
  • focusBorder#ba1160
  • input.background#1e1020
  • input.border#ba1160
  • input.foreground#ffc0d8
  • input.placeholderForeground#5a3a55
  • list.activeSelectionBackground#ba116055
  • list.activeSelectionForeground#ffd0e8
  • list.dropBackground#2e1030
  • list.hoverBackground#2a1030
  • list.hoverForeground#f0d0e8
  • list.inactiveSelectionBackground#2a1030
  • list.inactiveSelectionForeground#d060ff
  • panel.background#160c1a
  • panel.border#2e1030
  • panelTitle.activeBorder#ba1160
  • panelTitle.activeForeground#ff69b4
  • scrollbarSlider.activeBackground#ba116080
  • scrollbarSlider.background#ba116030
  • scrollbarSlider.hoverBackground#ba116050
  • sideBar.background#160c1a
  • sideBar.border#2e1030
  • sideBar.foreground#a070a0
  • sideBarSectionHeader.background#1e1020
  • sideBarSectionHeader.border#2e1030
  • sideBarTitle.foreground#ff69b4
  • statusBar.background#0e0812
  • statusBar.debuggingBackground#ba1160
  • statusBar.foreground#ffc0d8
  • statusBar.noFolderBackground#0e0812
  • statusBarItem.activeBackground#ba116080
  • statusBarItem.hoverBackground#ba116040
  • statusBarItem.remoteBackground#ba1160
  • tab.activeBackground#2e1030
  • tab.activeForeground#ff80c0
  • tab.inactiveBackground#180d1c
  • tab.inactiveForeground#7a4080
  • terminal.ansiBlue#4B83CD
  • terminal.ansiBrightBlue#78b1fc
  • terminal.ansiBrightCyan#b2e6e1
  • terminal.ansiBrightGreen#58bbbd
  • terminal.ansiBrightMagenta#f090d8
  • terminal.ansiBrightRed#e27b7b
  • terminal.ansiBrightWhite#f0e0ec
  • terminal.ansiBrightYellow#f3d36b
  • terminal.ansiCyan#9DDBD6
  • terminal.ansiGreen#318B8C
  • terminal.ansiMagenta#c080c0
  • terminal.ansiRed#CF426F
  • terminal.ansiWhite#c8b0c0
  • terminal.ansiYellow#ffd686
  • terminal.background#120b14
  • terminal.foreground#f0a0c8
  • titleBar.activeBackground#180d1c
  • titleBar.activeForeground#ffc0d8
  • titleBar.inactiveBackground#130a18
  • titleBar.inactiveForeground#4a2555

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a3a60italic
comment.block.documentation, comment.documentation#70a868—
storage#ff69b4—
keyword, constant, constant.numeric, constant.character#d060ff—
keyword.operator#50c858—
storage.type, support.type#c080e0—
constant.language, support.constant, variable.language#ff70c0—
variable, support.variable#c080e0—
entity.name.function, support.function#ff6ee0bold
entity.other.inherited-class, support.class#c080e0bold
string, string.quoted, string.template#ffc0d8—
constant.character.escape, string.regexp#ff70b0—
punctuation.definition.string#d4a030—
punctuation, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#50c858—
entity.name.tag#f080b0—
meta.tag, variable.other.property.js#ff69b4—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#c060ffitalic
support.type.property-name, meta.property-name#c080e0—
meta.property-value, support.constant.property-value, string.template.js#ff69b4—
markup.heading#ff69b4—
markup.bold—bold
markup.italic—italic
markup.inline.raw#a060a0—