Skip to main content
CodingTheme

Ultimate VSCode Themes & Icons Pack - 50+ Professional Themes with 11 Icon Sets

Publisher: SecureDevThemes in package: 101

Ultimate collection of 50+ professional VSCode themes: dark themes like Nebula Storm, Stellar Operator, Cosmic Eclipse, Ocean Depths, Hacker, Bad Hacker, Nord, Tokyo Night, Dracula, Solarized, Gruvbox, One Dark Pro, Goku Code, Nebula, Neon Dream, Dark Green Jungle, Black and White TV, Maple Dark, Ne

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.foreground#52a8ff
  • activityBar.inactiveForeground#aaaaaa
  • activityBarBadge.background#0f1c2e
  • activityBarBadge.foreground#6bb6ff
  • badge.background#0f1c2e
  • badge.foreground#52a8ff
  • button.background#0f1c2e
  • button.border#52a8ff50
  • button.foreground#ededed
  • button.hoverBackground#1a2a40
  • descriptionForeground#8f8f8f
  • disabledForeground#aaaaaa
  • dropdown.background#1f1f1f
  • dropdown.border#1f1f1f
  • dropdown.foreground#ededed
  • dropdown.listBackground#0a0a0a
  • editor.background#0a0a0a
  • editor.findMatchBackground#0f2f57
  • editor.findMatchHighlightBackground#0f2f5730
  • editor.foreground#ededed
  • editor.inactiveSelectionBackground#0f2f5740
  • editor.lineHighlightBackground#1f1f1f80
  • editor.selectionBackground#0f2f5780
  • editor.selectionHighlightBackground#0f2f5740
  • editor.wordHighlightBackground#0f2f5730
  • editor.wordHighlightStrongBackground#0f2f5750
  • editorCursor.foreground#ededed
  • editorGroup.border#1f1f1f
  • editorGroup.dropBackground#1f1f1f50
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#1f1f1f
  • editorIndentGuide.activeBackground1#aaaaaa50
  • editorIndentGuide.background1#aaaaaa20
  • editorLineNumber.activeForeground#cccccc
  • editorLineNumber.foreground#aaaaaa
  • editorWhitespace.foreground#aaaaaa40
  • errorForeground#ff6166
  • focusBorder#52a8ff
  • foreground#ededed
  • icon.foreground#aaaaaa
  • input.background#1f1f1f
  • input.border#88888850
  • input.foreground#ededed
  • input.placeholderForeground#999999
  • list.activeSelectionBackground#0f2f57
  • list.activeSelectionForeground#ededed
  • list.focusBackground#1f1f1f80
  • list.focusForeground#ededed
  • list.highlightForeground#52a8ff
  • list.hoverBackground#1f1f1f60
  • list.hoverForeground#ededed
  • list.inactiveSelectionBackground#0f2f5760
  • list.inactiveSelectionForeground#ededed
  • panel.background#0a0a0a
  • panel.border#1f1f1f
  • panelTitle.activeBorder#52a8ff
  • panelTitle.activeForeground#ededed
  • progressBar.background#52a8ff
  • sash.hoverBorder#52a8ff
  • scrollbar.shadow#00000060
  • scrollbarSlider.activeBackground#888888a0
  • scrollbarSlider.background#88888840
  • scrollbarSlider.hoverBackground#99999980
  • selection.background#0f2f57
  • sideBar.background#0a0a0a
  • sideBar.foreground#aaaaaa
  • sideBarTitle.foreground#ededed
  • statusBar.background#000000
  • statusBar.foreground#aaaaaa
  • tab.activeBackground#0f1c2e
  • tab.activeBorder#52a8ff
  • tab.activeForeground#ededed
  • tab.border#1f1f1f
  • tab.inactiveBackground#0a0a0a
  • tab.inactiveForeground#888888
  • terminal.background#0a0a0a
  • terminal.foreground#ededed
  • terminal.selectionBackground#0f2f5780
  • terminalCursor.foreground#ededed
  • textBlockQuote.background#1f1f1f
  • textBlockQuote.border#aaaaaa
  • textCodeBlock.background#1f1f1f
  • textLink.activeForeground#6bb6ff
  • textLink.foreground#52a8ff
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#aaaaaa
  • tree.indentGuidesStroke#aaaaaa40
  • widget.border#1f1f1f
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#aaaaaaitalic
string#6ac67c
keyword, storage.type, storage.modifier#e96a9f
entity.name.function, support.function, variable.function, meta.function-call#bf7af0
entity.name.type, support.class, support.type, entity.name.class#52a8ff
variable.object.property, meta.field.declaration#a0c7ff
variable, variable.parameter#d6deeb
constant.numeric, constant.language, constant.character.escape#f78e74
keyword.operator, punctuation#a1a1a1
entity.name.tag#62c073
entity.name.tag.jsx, entity.name.tag.tsx, support.class.component.jsx, support.class.component.tsx
entity.other.attribute-name#bf7af0
invalid#ff6166italic underline
markup.heading, markup.underline.link, string.other.link#52a8ff

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...