Skip to main content
Coding Theme

DevStack

Publisher: skylerThemes in package: 139

First-in-Class Workbench Distribution: 100+ extensions worth of power in a single install — without the performance death spiral. The VSCode you wish Microsoft built, delivered as an extension. Surgical workspace layouts that activate only what you need. A terminal engine with 17+ execution patterns

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#0e111b
  • activityBar.border#0e111b
  • activityBar.foreground#d8dfe4
  • activityBar.inactiveForeground#798093
  • activityBarBadge.background#26acf4
  • activityBarBadge.foreground#d8dfe4
  • background#0e111b
  • button.background#26acf4
  • button.foreground#d8effc
  • button.hoverBackground#26acf4
  • dropdown.background#232838
  • editor.background#0e111b
  • editor.foreground#d8dfe4
  • editor.lineHighlightBackground#232838
  • editor.selectionBackground#232838
  • editorCursor.foreground#d8dfe4
  • editorGroup.emptyBackground#0e111b
  • editorGroupHeader.tabsBackground#0e111b
  • editorIndentGuide.background1#d8dfe4
  • editorWhitespace.foreground#d8dfe4
  • errorForeground#ff1648
  • explorer.fileItem.conflictForeground#ff1648
  • explorer.fileItem.errorForeground#ff1648
  • explorer.fileItem.foreground#798093
  • explorer.fileItem.hoverForeground#d8dfe4
  • explorer.fileItem.modifiedForeground#29c3a0
  • explorer.fileItem.selectedIconForeground#d8dfe4
  • explorer.fileItem.warningForeground#d29922
  • explorer.folderItem.foreground#232838
  • explorer.folderItem.hoverForeground#d8dfe4
  • explorer.folderItem.iconForeground#d8dfe4
  • explorer.folderItem.selectedIconForeground#26acf4
  • focusBorder#00a1d0
  • foreground#798093
  • gitDecoration.conflictingResourceForeground#26acf4
  • gitDecoration.deletedResourceForeground#ff1648
  • gitDecoration.submoduleResourceForeground#d8dfe4
  • input.background#d8dfe4
  • input.border#d8dfe4
  • input.foreground#d8dfe4
  • inputOption.activeBorder#00a1d0
  • list.activeSelectionBackground#232838
  • list.activeSelectionForeground#d8dfe4
  • list.dropBackground#0e111b40
  • list.filterMatchBackground#0e111b20
  • list.focusBackground#232838
  • list.focusForeground#d8dfe4
  • list.highlightForeground#26acf4
  • list.hoverBackground#232838
  • list.hoverForeground#d8dfe4
  • list.inactiveSelectionBackground#23283840
  • menu.border#d8dfe4
  • menu.foreground#798093
  • menu.selectionBackground#232838
  • menu.selectionForeground#d8dfe4
  • menu.separatorBackground#d8dfe4
  • menubar.background#0e111b
  • menubar.foreground#798093
  • menubar.menu#0e111b
  • menubar.selectionBackground#232838
  • menubar.selectionForeground#d8dfe4
  • panel.background#0e111b
  • panel.border#d8dfe4
  • panelTitle.activeForeground#d8dfe4
  • scrollbarSlider.activeBackground#26acf4
  • scrollbarSlider.background#26acf420
  • scrollbarSlider.hoverBackground#26acf4
  • sideBar.background#0e111b
  • sideBar.border#d8dfe4
  • sideBar.foreground#798093
  • sideBarSectionHeader.background#232838
  • sideBarSectionHeader.foreground#d8dfe4
  • statusBar.background#0e111b
  • statusBar.border#d8dfe4
  • statusBar.foreground#798093
  • statusBarItem.hoverBackground#232838
  • tab.activeBackground#171a24
  • tab.activeBorder#0e111b
  • tab.activeForeground#d8dfe4
  • tab.border#d8dfe4
  • tab.inactiveBackground#0e111b
  • tab.inactiveForeground#798093
  • terminal.ansiBlack#0e111b
  • terminal.ansiBlue#26acf4
  • terminal.ansiCyan#29c3a0
  • terminal.ansiGreen#29c3a0
  • terminal.ansiMagenta#26acf4
  • terminal.ansiRed#ff1648
  • terminal.ansiWhite#d8dfe4
  • terminal.ansiYellow#d29922
  • terminal.background#0e111b
  • terminalCommandDecoration.defaultBackground#0e111b
  • titleBar.activeBackground#0e111b
  • titleBar.inactiveBackground#0e111b
  • tree.indentGuidesStroke#d8dfe4
  • tree.tableColumnsBorder#d8dfe4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language.boolean#d29922
comment, punctuation.definition.comment#798093italic
string, string.quoted#29c3a0
constant.numeric, constant.language, constant.character#d29922
keyword, storage.type, storage.modifier#26acf4
entity.name.function, support.function#26acf4
entity.name.type, entity.name.class, support.class#26acf4
variable, variable.parameter, variable.other#d8dfe4
entity.name.tag, punctuation.definition.tag#26acf4
entity.other.attribute-name#d29922
invalid, invalid.illegal#ff1648
markup.boldbold
markup.italicitalic
markup.heading#26acf4bold

Shiki preview

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

Loading...

DevStack - Coding Theme