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#020617
  • activityBar.foreground#E0E7FF
  • activityBar.inactiveForeground#1E3A8A
  • activityBarBadge.background#3B82F6
  • activityBarBadge.foreground#000000
  • badge.background#3B82F6
  • badge.foreground#000000
  • button.background#1E3A8A
  • button.foreground#FFFFFF
  • button.hoverBackground#1D4ED8
  • dropdown.background#0F172A
  • dropdown.border#1E3A8A
  • dropdown.foreground#E0E7FF
  • dropdown.listBackground#0F172A
  • editor.background#050A15
  • editor.findMatchBackground#6366F160
  • editor.findMatchHighlightBackground#6366F140
  • editor.foreground#F8FAFC
  • editor.lineHighlightBackground#0F172A
  • editor.selectionBackground#1E3A8A40
  • editor.selectionHighlightBackground#1E3A8A30
  • editorBracketMatch.background#1E3A8A40
  • editorBracketMatch.border#3B82F6
  • editorCursor.foreground#60A5FA
  • editorGroupHeader.tabsBackground#020617
  • editorLineNumber.activeForeground#60A5FA
  • editorLineNumber.foreground#1E3A8A
  • editorSuggestWidget.background#0F172A
  • editorSuggestWidget.border#1E3A8A
  • editorSuggestWidget.foreground#E0E7FF
  • editorSuggestWidget.highlightForeground#3B82F6
  • editorSuggestWidget.selectedBackground#172554
  • input.background#0F172A
  • input.border#1E3A8A
  • input.foreground#E0E7FF
  • input.placeholderForeground#3B82F6
  • inputOption.activeBorder#60A5FA
  • list.activeSelectionBackground#172554
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#172554
  • list.focusForeground#FFFFFF
  • list.hoverBackground#0F172A
  • list.hoverForeground#E0E7FF
  • list.inactiveSelectionBackground#0F172A
  • list.inactiveSelectionForeground#E0E7FF
  • menu.background#0F172A
  • menu.border#1E3A8A
  • menu.foreground#E0E7FF
  • menu.selectionBackground#1E3A8A
  • menu.selectionBorder#1E3A8A
  • menu.selectionForeground#FFFFFF
  • menubar.selectionBackground#172554
  • menubar.selectionForeground#FFFFFF
  • notificationCenter.border#1E3A8A
  • notificationCenterHeader.background#020617
  • notificationCenterHeader.foreground#E0E7FF
  • notificationLink.foreground#3B82F6
  • notifications.background#0F172A
  • notifications.border#1E3A8A
  • notifications.foreground#E0E7FF
  • notificationToast.border#1E3A8A
  • panel.background#050A15
  • panel.border#1E3A8A
  • panelTitle.activeBorder#3B82F6
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#1E3A8A
  • peekView.border#3B82F6
  • peekViewEditor.background#020617
  • peekViewResult.background#050A15
  • peekViewTitle.background#020617
  • quickInput.background#0F172A
  • quickInput.foreground#E0E7FF
  • quickInputList.focusBackground#172554
  • quickInputTitle.background#020617
  • scrollbarSlider.activeBackground#3B82F680
  • scrollbarSlider.background#1E3A8A80
  • scrollbarSlider.hoverBackground#1D4ED880
  • sideBar.background#020617
  • sideBar.foreground#E0E7FF
  • sideBarSectionHeader.background#050A15
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#020617
  • statusBar.debuggingBackground#3B82F6
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#E0E7FF
  • statusBar.noFolderBackground#020617
  • statusBarItem.hoverBackground#172554
  • tab.activeBackground#050A15
  • tab.activeBorderTop#3B82F6
  • tab.activeForeground#FFFFFF
  • tab.border#020617
  • tab.inactiveBackground#020617
  • tab.inactiveForeground#475569
  • terminal.background#050A15
  • terminal.foreground#F8FAFC
  • titleBar.activeBackground#020617
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#020617
  • titleBar.inactiveForeground#475569

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3B82F6italic
string, punctuation.definition.string#818CF8
keyword, storage.type, storage.modifier#93C5FD
entity.name.function, meta.function-call, support.function#60A5FAbold
variable, meta.definition.variable.name, support.variable#F8FAFC
constant, variable.other.constant#A5B4FC
constant.numeric#C7D2FE
keyword.operator#3B82F6
entity.name.type, entity.name.class, support.type, support.class#E0E7FF
Anime Theme Collection by Shams - VS Code Theme