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#ECECEC
  • activityBar.border#D9D9D9
  • activityBar.foreground#2E3440
  • activityBar.inactiveForeground#9DA3B0
  • activityBarBadge.background#FF8C00
  • activityBarBadge.foreground#FFFFFF
  • dropdown.background#F7F7F7
  • dropdown.border#D9D9D9
  • dropdown.foreground#2E3440
  • editor.background#FDFCFB
  • editor.foreground#2E3440
  • editor.inactiveSelectionBackground#FFF5E5
  • editor.lineHighlightBackground#FFF1D6
  • editor.selectionBackground#FFEFD5
  • editor.selectionHighlightBackground#FFF1D6
  • editorBracketMatch.background#FFEFD5
  • editorBracketMatch.border#FF8C00
  • editorCursor.foreground#FF8C00
  • editorGroupHeader.border#D9D9D9
  • editorGroupHeader.noTabsBackground#F2F2F2
  • editorGroupHeader.tabsBackground#ECECEC
  • editorHoverWidget.background#F7F7F7
  • editorHoverWidget.border#D9D9D9
  • editorLineNumber.activeForeground#FF8C00
  • editorLineNumber.foreground#A0A0A0
  • editorSuggestWidget.background#F7F7F7
  • editorSuggestWidget.foreground#2E3440
  • editorSuggestWidget.highlightForeground#FF8C00
  • editorSuggestWidget.selectedBackground#FFF1D6
  • editorWidget.background#F7F7F7
  • editorWidget.border#D9D9D9
  • menu.background#ECECEC
  • menu.foreground#2E3440
  • menu.selectionBackground#FFF1D6
  • menu.selectionForeground#2E3440
  • menu.separatorBackground#D9D9D9
  • minimap.background#FDFCFB
  • panel.background#F7F7F7
  • panel.border#D9D9D9
  • panelTitle.activeBorder#FF8C00
  • panelTitle.activeForeground#2E3440
  • panelTitle.inactiveForeground#A0A0A0
  • pickerGroup.border#FFEFD5
  • pickerGroup.foreground#FF8C00
  • quickInput.background#F7F7F7
  • quickInput.foreground#2E3440
  • quickInputList.focusBackground#FFF1D6
  • quickInputTitle.background#ECECEC
  • scrollbarSlider.activeBackground#FFD580FF
  • scrollbarSlider.background#FFD58080
  • scrollbarSlider.hoverBackground#FFD580AA
  • sideBar.background#F7F7F7
  • sideBar.border#D9D9D9
  • sideBar.foreground#2E3440
  • sideBarSectionHeader.background#ECECEC
  • sideBarTitle.foreground#005CC5
  • statusBar.background#E8E8E8
  • statusBar.debuggingBackground#FFD580
  • statusBar.debuggingForeground#2E3440
  • statusBar.foreground#2E3440
  • statusBar.noFolderBackground#E8E8E8
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF8C00
  • tab.activeForeground#2E3440
  • tab.border#D9D9D9
  • tab.hoverBackground#FFF8E0
  • tab.hoverForeground#2E3440
  • tab.inactiveBackground#F2F2F2
  • tab.inactiveForeground#777777
  • terminal.ansiBlack#D9D9D9
  • terminal.ansiBlue#005CC5
  • terminal.ansiBrightBlack#A0A0A0
  • terminal.ansiBrightBlue#1F6FEB
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#2EA44F
  • terminal.ansiBrightMagenta#8A2BE2
  • terminal.ansiBrightRed#FF6B6B
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFB347
  • terminal.ansiCyan#1C9AAA
  • terminal.ansiGreen#22863A
  • terminal.ansiMagenta#6F42C1
  • terminal.ansiRed#D73A49
  • terminal.ansiWhite#2E3440
  • terminal.ansiYellow#E36209
  • terminal.background#FDFCFB
  • terminal.foreground#2E3440
  • terminalCursor.foreground#FF8C00
  • titleBar.activeBackground#ECECEC
  • titleBar.activeForeground#2E3440
  • titleBar.inactiveBackground#F2F2F2
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#A0A0A0italic
keyword, storage.type, storage.modifier, keyword.control#D73A49bold
string#22863A
variable#005CC5
function, method, entity.name.function, meta.function-call, variable.function#6F42C1
number, constant#E36209
class, support.class, support.type, entity.name.type#6F42C1
operator, punctuation#2E3440
tag, entity.name.tag#D73A49
entity.other.attribute-name, support.type.property-name, attribute-name#22863A
meta.brace#2E3440
markup.bold, markup.italic, markup.underline, markup.quote#005CC5bold
invalid, invalid.illegal#D73A49
text#2E3440
LuminaShade by Jack Pritom Soren - VS Code Theme