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#1a1624
  • activityBar.border#2e253b
  • activityBar.foreground#c18fff
  • activityBarBadge.background#c18fff
  • activityBarBadge.foreground#1e1b2c
  • dropdown.background#1b1826
  • dropdown.border#2e253b
  • dropdown.foreground#e0dfe8
  • editor.background#1e1b2c
  • editor.foreground#e0dfe8
  • editor.lineHighlightBackground#2a223a
  • editor.selectionBackground#473b7f50
  • editor.selectionHighlightBackground#473b7f50
  • editorBracketMatch.background#473b7f50
  • editorBracketMatch.border#c18fff
  • editorCursor.foreground#c18fff
  • editorGroupHeader.border#2e253b
  • editorGroupHeader.noTabsBackground#1a1624
  • editorGroupHeader.tabsBackground#1b1826
  • editorHoverWidget.background#1b1826
  • editorHoverWidget.border#2e253b
  • editorLineNumber.foreground#7e7399
  • editorSuggestWidget.background#1b1826
  • editorSuggestWidget.foreground#e0dfe8
  • editorSuggestWidget.highlightForeground#c18fff
  • editorSuggestWidget.selectedBackground#473b7f50
  • editorWidget.background#1b1826
  • editorWidget.border#2e253b
  • menu.background#1b1826
  • menu.foreground#e0dfe8
  • menu.selectionBackground#473b7f80
  • menu.selectionForeground#e0dfe8
  • menu.separatorBackground#473b7f50
  • minimap.background#1e1b2c
  • panel.background#1b1826
  • panel.border#2e253b
  • panelTitle.activeBorder#c18fff
  • panelTitle.activeForeground#e0dfe8
  • panelTitle.inactiveForeground#7e7399
  • pickerGroup.border#473b7f50
  • pickerGroup.foreground#c18fff
  • quickInput.background#1b1826
  • quickInput.foreground#e0dfe8
  • quickInputList.focusBackground#473b7f50
  • quickInputTitle.background#1a1624
  • scrollbarSlider.activeBackground#473b7fff
  • scrollbarSlider.background#473b7f80
  • scrollbarSlider.hoverBackground#473b7faa
  • sideBar.background#1b1826
  • sideBar.border#2e253b
  • sideBar.foreground#e0dfe8
  • sideBarSectionHeader.background#1a1624
  • sideBarTitle.foreground#c18fff
  • statusBar.background#1a1624
  • statusBar.debuggingBackground#473b7f
  • statusBar.debuggingForeground#e0dfe8
  • statusBar.foreground#e0dfe8
  • statusBar.noFolderBackground#1b1826
  • tab.activeBackground#2a223a
  • tab.activeBorder#c18fff
  • tab.activeForeground#e0dfe8
  • tab.border#2e253b
  • tab.hoverBackground#2c233f
  • tab.hoverForeground#e0dfe8
  • tab.inactiveBackground#1b1826
  • tab.inactiveForeground#7e7399
  • terminal.ansiBlack#1b1826
  • terminal.ansiBlue#8fd8ff
  • terminal.ansiBrightBlack#7e7399
  • terminal.ansiBrightBlue#b0e0ff
  • terminal.ansiBrightCyan#c0d0ff
  • terminal.ansiBrightGreen#a0d6a0
  • terminal.ansiBrightMagenta#d4bfff
  • terminal.ansiBrightRed#ffb6c1
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe699
  • terminal.ansiCyan#a0c0ff
  • terminal.ansiGreen#7fe6a5
  • terminal.ansiMagenta#c18fff
  • terminal.ansiRed#ff9ab8
  • terminal.ansiWhite#e0dfe8
  • terminal.ansiYellow#ffdf80
  • terminal.background#1e1b2c
  • terminal.foreground#e0dfe8
  • terminalCursor.foreground#c18fff
  • titleBar.activeBackground#1b1826
  • titleBar.activeForeground#c18fff
  • titleBar.inactiveBackground#1a1624
  • titleBar.inactiveForeground#7e7399

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7e7399italic
keyword, storage.type, storage.modifier, keyword.control#c18fffbold
variable#e0cfff
string#ffb6c1
function, entity.name.function, meta.function-call, variable.function#8fd8ff
class, support.class, support.type, entity.name.type#f0a0ff
constant.numeric, constant.language#ffdf80
operator, punctuation#d9bfff
tag, entity.name.tag#ffa0f0
entity.other.attribute-name, support.type.property-name, attribute-name#a0c0ff
meta.brace#d9bfff
markup.bold, markup.italic, markup.underline, markup.quote#e0cfffbold
invalid, invalid.illegal#ff6990
text#e0dfe8