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#000000
  • activityBar.border#200A18
  • activityBar.foreground#F01890
  • activityBar.inactiveForeground#7848A8
  • activityBarBadge.background#F01890
  • activityBarBadge.foreground#FFFFFF
  • badge.background#A80048
  • badge.foreground#FFFFFF
  • button.background#D80078
  • button.foreground#FFFFFF
  • button.hoverBackground#F01890
  • button.secondaryBackground#7848A8
  • button.secondaryForeground#FFFFFF
  • descriptionForeground#78A8C0
  • disabledForeground#604890
  • dropdown.background#12050E
  • dropdown.border#9060C0
  • dropdown.foreground#F0C0D8
  • editor.background#000000
  • editor.findMatchBackground#C0006066
  • editor.findMatchHighlightBackground#D8A8C033
  • editor.foreground#F0C0D8
  • editor.inactiveSelectionBackground#60489033
  • editor.lineHighlightBackground#120810
  • editor.selectionBackground#9060C055
  • editor.selectionHighlightBackground#D8A8C033
  • editor.wordHighlightBackground#78C06033
  • editor.wordHighlightStrongBackground#F0303033
  • editorBracketMatch.background#9060C044
  • editorBracketMatch.border#9060C0
  • editorCursor.foreground#F01890
  • editorGroupHeader.tabsBackground#080205
  • editorGroupHeader.tabsBorder#200A18
  • editorIndentGuide.activeBackground1#F0189088
  • editorIndentGuide.background1#7848A833
  • editorLineNumber.activeForeground#F01890
  • editorLineNumber.dimmedForeground#4A3050
  • editorLineNumber.foreground#7848A8
  • editorWhitespace.foreground#60489055
  • errorForeground#F03030
  • focusBorder#F01890
  • foreground#D8A8C0
  • input.background#12050E
  • input.border#9060C0
  • input.foreground#F0C0D8
  • input.placeholderForeground#7848A8
  • list.activeSelectionBackground#7848A855
  • list.activeSelectionForeground#78C0D8
  • list.focusBackground#9060C066
  • list.highlightForeground#F01890
  • list.hoverBackground#180A14
  • panel.background#000000
  • panel.border#200A18
  • panelTitle.activeBorder#F01890
  • panelTitle.activeForeground#F01890
  • panelTitle.inactiveForeground#7848A8
  • selection.background#7848A866
  • sideBar.background#080205
  • sideBar.border#200A18
  • sideBar.foreground#D8A8C0
  • sideBarSectionHeader.background#12050E
  • sideBarSectionHeader.border#200A18
  • sideBarSectionHeader.foreground#78C0D8
  • sideBarTitle.foreground#F01890
  • statusBar.background#000000
  • statusBar.border#200A18
  • statusBar.foreground#78C060
  • statusBar.noFolderBackground#000000
  • statusBarItem.remoteBackground#D80078
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#000000
  • tab.activeBorderTop#F01890
  • tab.activeForeground#78C0D8
  • tab.border#200A18
  • tab.inactiveBackground#080205
  • tab.inactiveForeground#9060C0
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#7848A8
  • terminal.ansiBrightBlack#604890
  • terminal.ansiBrightBlue#9060C0
  • terminal.ansiBrightCyan#A8D8D8
  • terminal.ansiBrightGreen#90C060
  • terminal.ansiBrightMagenta#D80078
  • terminal.ansiBrightRed#D81830
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#D890A8
  • terminal.ansiCyan#78C0C0
  • terminal.ansiGreen#78C060
  • terminal.ansiMagenta#F01890
  • terminal.ansiRed#F03030
  • terminal.ansiWhite#F0C0C0
  • terminal.ansiYellow#D8A8C0
  • terminal.background#000000
  • terminal.foreground#F0C0D8
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#D8A8C0
  • titleBar.border#200A18
  • titleBar.inactiveBackground#080205
  • titleBar.inactiveForeground#7848A8
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#604890italic
keyword, keyword.control, storage.type, storage.modifier#F01890bold
entity.name.function, meta.function-call, support.function#78C0D8—
variable, variable.other#D8A8C0—
variable.parameter#D890A8—
string, punctuation.definition.string#78C060—
constant.numeric#9060C0—
constant.language, boolean#F03030bold
entity.name.type, entity.name.class, entity.other.inherited-class, support.class, support.type#7848A8bold
keyword.operator, punctuation, punctuation.separator, punctuation.terminator#90C060—
entity.name.tag#D81830—
entity.other.attribute-name#D8A8C0—
support.type.property-name.css#C00060—
support.constant.property-value.css, meta.property-value.css#78C060—
constant, constant.other, variable.other.constant#D80078—
support.type.property-name.json#F0C0D8—
invalid, invalid.illegal#FFFFFF—