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#0A0A0D
  • activityBar.border#1A1A20
  • activityBar.foreground#B8B8C6
  • activityBarBadge.background#C792EA
  • activityBarBadge.foreground#0E0E12
  • dropdown.background#0E0E12
  • dropdown.border#1A1A20
  • dropdown.foreground#B8B8C6
  • editor.background#0E0E12
  • editor.foreground#B8B8C6
  • editor.lineHighlightBackground#1A1A20
  • editor.selectionBackground#2A2A36
  • editor.selectionHighlightBackground#2A2A36
  • editorBracketMatch.background#2A2A36
  • editorBracketMatch.border#C792EA
  • editorCursor.foreground#C792EA
  • editorGroupHeader.border#1A1A20
  • editorGroupHeader.noTabsBackground#0A0A0D
  • editorGroupHeader.tabsBackground#0E0E12
  • editorHoverWidget.background#0E0E12
  • editorHoverWidget.border#1A1A20
  • editorLineNumber.activeForeground#B8B8C6
  • editorLineNumber.foreground#5C5C66
  • editorSuggestWidget.background#0E0E12
  • editorSuggestWidget.foreground#B8B8C6
  • editorSuggestWidget.highlightForeground#C792EA
  • editorSuggestWidget.selectedBackground#2A2A3650
  • editorWidget.background#0E0E12
  • editorWidget.border#1A1A20
  • menu.background#0E0E12
  • menu.foreground#B8B8C6
  • menu.selectionBackground#2A2A3650
  • menu.selectionForeground#B8B8C6
  • menu.separatorBackground#2A2A3650
  • minimap.background#0E0E12
  • panel.background#0A0A0D
  • panel.border#1A1A20
  • panelTitle.activeBorder#C792EA
  • panelTitle.activeForeground#B8B8C6
  • panelTitle.inactiveForeground#5C5C66
  • pickerGroup.border#2A2A3650
  • pickerGroup.foreground#C792EA
  • quickInput.background#0E0E12
  • quickInput.foreground#B8B8C6
  • quickInputList.focusBackground#2A2A3650
  • quickInputTitle.background#0A0A0D
  • scrollbarSlider.activeBackground#2A2A36FF
  • scrollbarSlider.background#2A2A3650
  • scrollbarSlider.hoverBackground#2A2A36AA
  • sideBar.background#0E0E12
  • sideBar.border#1A1A20
  • sideBar.foreground#B8B8C6
  • sideBarSectionHeader.background#0A0A0D
  • sideBarTitle.foreground#C792EA
  • statusBar.background#101014
  • statusBar.debuggingBackground#2A2A36
  • statusBar.debuggingForeground#B8B8C6
  • statusBar.foreground#B8B8C6
  • statusBar.noFolderBackground#0E0E12
  • tab.activeBackground#1A1A20
  • tab.activeBorder#C792EA
  • tab.activeForeground#B8B8C6
  • tab.border#1A1A20
  • tab.hoverBackground#222227
  • tab.hoverForeground#B8B8C6
  • tab.inactiveBackground#0E0E12
  • tab.inactiveForeground#5C5C66
  • terminal.ansiBlack#0A0A0D
  • terminal.ansiBlue#9BB9F7
  • terminal.ansiBrightBlack#5C5C66
  • terminal.ansiBrightBlue#9BB9F7
  • terminal.ansiBrightCyan#79C0FF
  • terminal.ansiBrightGreen#A4C990
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#FF7A93
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE699
  • terminal.ansiCyan#79C0FF
  • terminal.ansiGreen#A4C990
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FF7A93
  • terminal.ansiWhite#B8B8C6
  • terminal.ansiYellow#FFD580
  • terminal.background#0E0E12
  • terminal.foreground#B8B8C6
  • terminalCursor.foreground#C792EA
  • titleBar.activeBackground#0A0A0D
  • titleBar.activeForeground#B8B8C6
  • titleBar.inactiveBackground#0E0E12
  • titleBar.inactiveForeground#5C5C66

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5C5C66italic
string#A4C990
keyword, storage.type, storage.modifier, keyword.control#FF7A93bold
variable#9BB9F7
function, entity.name.function, meta.function-call, variable.function#C792EA
class, support.class, support.type, entity.name.type#D2A8FF
constant.numeric, constant.language#FFD580
operator, punctuation#79C0FF
tag, entity.name.tag#FF7A93
entity.other.attribute-name, support.type.property-name, attribute-name#9BB9F7
meta.brace#79C0FF
markup.bold, markup.italic, markup.underline, markup.quote#9BB9F7bold
invalid, invalid.illegal#FF7A93
text#B8B8C6