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#191926
  • activityBar.border#2A2A3B
  • activityBar.foreground#E9E9F4
  • activityBarBadge.background#F7768E
  • activityBarBadge.foreground#1E1E2E
  • dropdown.background#191926
  • dropdown.border#2A2A3B
  • dropdown.foreground#E9E9F4
  • editor.background#1E1E2E
  • editor.foreground#E9E9F4
  • editor.lineHighlightBackground#2C2B3C
  • editor.selectionBackground#5C4B73AA
  • editorBracketMatch.background#5C4B73AA
  • editorBracketMatch.border#F7768E
  • editorCursor.foreground#F7768E
  • editorGroupHeader.border#2A2A3B
  • editorGroupHeader.noTabsBackground#191926
  • editorGroupHeader.tabsBackground#1A1926
  • editorHoverWidget.background#1A1926
  • editorHoverWidget.border#2A2A3B
  • editorIndentGuide.background#2A2A3B
  • editorLineHighlightBorder#5C4B73AA
  • editorLineNumber.activeForeground#E9E9F4
  • editorLineNumber.foreground#565F89
  • editorOverviewRuler.background#1E1E2E
  • editorOverviewRuler.border#2A2A3B
  • editorOverviewRuler.currentContentForeground#F7768E
  • editorOverviewRuler.incomingContentForeground#9ECE6A
  • editorOverviewRuler.modifiedForeground#BB9AF7
  • editorSuggestWidget.background#1A1926
  • editorSuggestWidget.foreground#E9E9F4
  • editorSuggestWidget.highlightForeground#F7768E
  • editorSuggestWidget.selectedBackground#5C4B73AA
  • editorWidget.background#1A1926
  • editorWidget.border#2A2A3B
  • menu.background#191926
  • menu.foreground#E9E9F4
  • menu.selectionBackground#5C4B73AA
  • menu.selectionForeground#E9E9F4
  • menu.separatorBackground#5C4B7380
  • minimap.background#1E1E2E
  • panel.background#191926
  • panel.border#2A2A3B
  • panelTitle.activeBorder#F7768E
  • panelTitle.activeForeground#E9E9F4
  • panelTitle.inactiveForeground#565F89
  • pickerGroup.border#5C4B7380
  • pickerGroup.foreground#F7768E
  • quickInput.background#191926
  • quickInput.foreground#E9E9F4
  • quickInputList.focusBackground#5C4B73AA
  • quickInputTitle.background#16161E
  • scrollbarSlider.activeBackground#5C4B73FF
  • scrollbarSlider.background#5C4B73AA
  • scrollbarSlider.hoverBackground#5C4B73CC
  • sideBar.background#1A1B26
  • sideBar.border#2A2A3B
  • sideBar.foreground#E9E9F4
  • sideBarSectionHeader.background#191926
  • sideBarSectionHeader.foreground#F7768E
  • sideBarTitle.foreground#F7768E
  • statusBar.background#16161E
  • statusBar.debuggingBackground#5C4B73
  • statusBar.debuggingForeground#E9E9F4
  • statusBar.foreground#E9E9F4
  • statusBar.noFolderBackground#191926
  • tab.activeBackground#242438
  • tab.activeBorder#F7768E
  • tab.activeForeground#E9E9F4
  • tab.border#2A2A3B
  • tab.hoverBackground#2A293B
  • tab.hoverForeground#E9E9F4
  • tab.inactiveBackground#1A1B26
  • tab.inactiveForeground#565F89
  • terminal.ansiBlack#1A1926
  • terminal.ansiBlue#7AA2F7
  • terminal.ansiBrightBlack#565F89
  • terminal.ansiBrightBlue#9ABFFF
  • terminal.ansiBrightCyan#B0FFF4
  • terminal.ansiBrightGreen#B5F77A
  • terminal.ansiBrightMagenta#D0B0FF
  • terminal.ansiBrightRed#FF7AA6
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE08F
  • terminal.ansiCyan#9ADFE6
  • terminal.ansiGreen#9ECE6A
  • terminal.ansiMagenta#BB9AF7
  • terminal.ansiRed#F7768E
  • terminal.ansiWhite#E9E9F4
  • terminal.ansiYellow#FFCB6B
  • terminal.background#1E1E2E
  • terminal.foreground#E9E9F4
  • terminalCursor.foreground#F7768E
  • titleBar.activeBackground#191926
  • titleBar.activeForeground#E9E9F4
  • titleBar.inactiveBackground#16161E
  • titleBar.inactiveForeground#565F89

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#565F89italic
string#9ECE6A
keyword, storage.type, storage.modifier, keyword.control#F7768Ebold
variable#7AA2F7
function, entity.name.function, meta.function-call, variable.function#BB9AF7
constant.numeric, constant.language#FFCB6B
class, support.class, support.type, entity.name.type#BB9AF7
operator, punctuation#E9E9F4
tag, entity.name.tag#F7768E
entity.other.attribute-name, support.type.property-name, attribute-name#7AA2F7
markup.bold, markup.italic, markup.underline, markup.quote#7AA2F7bold
invalid, invalid.illegal#F7768E
text#E9E9F4
LuminaShade by Jack Pritom Soren - VS Code Theme