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#1b1b1b
  • activityBar.border#1b1b1b
  • activityBar.foreground#f2f5fc
  • activityBar.inactiveForeground#cecece
  • activityBarBadge.background#ff96cb
  • activityBarBadge.foreground#f2f5fc
  • background#1b1b1b
  • button.background#ff96cb
  • button.foreground#1b1b1b
  • button.hoverBackground#ff96cb
  • dropdown.background#cc9aff
  • editor.background#1b1b1b
  • editor.foreground#f2f5fc
  • editor.lineHighlightBackground#333333
  • editor.selectionBackground#9acdff
  • editorCursor.foreground#f2f5fc
  • editorGroup.emptyBackground#1b1b1b
  • editorGroupHeader.tabsBackground#1b1b1b
  • editorIndentGuide.background1#454545
  • editorWhitespace.foreground#454545
  • errorForeground#ff6364
  • explorer.fileItem.conflictForeground#ff6364
  • explorer.fileItem.errorForeground#ff6364
  • explorer.fileItem.foreground#cecece
  • explorer.fileItem.hoverForeground#f2f5fc
  • explorer.fileItem.modifiedForeground#29c3a0
  • explorer.fileItem.selectedIconForeground#f2f5fc
  • explorer.fileItem.warningForeground#d29922
  • explorer.folderItem.foreground#333333
  • explorer.folderItem.hoverForeground#f2f5fc
  • explorer.folderItem.iconForeground#f2f5fc
  • explorer.folderItem.selectedIconForeground#ff96cb
  • focusBorder#9acdff
  • foreground#cecece
  • gitDecoration.conflictingResourceForeground#ff96cb
  • gitDecoration.deletedResourceForeground#ff6364
  • gitDecoration.submoduleResourceForeground#f2f5fc
  • input.background#454545
  • input.border#454545
  • input.foreground#f2f5fc
  • inputOption.activeBorder#9acdff
  • list.activeSelectionBackground#9acdff
  • list.activeSelectionForeground#1b1b1b
  • list.dropBackground#1b1b1b40
  • list.filterMatchBackground#1b1b1b20
  • list.focusBackground#9acdff
  • list.focusForeground#f2f5fc
  • list.highlightForeground#ff96cb
  • list.hoverBackground#333333
  • list.hoverForeground#f2f5fc
  • list.inactiveSelectionBackground#33333340
  • menu.border#454545
  • menu.foreground#cecece
  • menu.selectionBackground#9acdff
  • menu.selectionForeground#1b1b1b
  • menu.separatorBackground#454545
  • menubar.background#1b1b1b
  • menubar.foreground#cecece
  • menubar.menu#1b1b1b
  • menubar.selectionBackground#9acdff
  • menubar.selectionForeground#1b1b1b
  • panel.background#1b1b1b
  • panel.border#454545
  • panelTitle.activeForeground#f2f5fc
  • scrollbarSlider.activeBackground#ff96cb
  • scrollbarSlider.background#ff96cb20
  • scrollbarSlider.hoverBackground#ff96cb
  • sideBar.background#1b1b1b
  • sideBar.border#454545
  • sideBar.foreground#cecece
  • sideBarSectionHeader.background#cc9aff
  • sideBarSectionHeader.foreground#f2f5fc
  • statusBar.background#1b1b1b
  • statusBar.border#454545
  • statusBar.foreground#cecece
  • statusBarItem.hoverBackground#333333
  • tab.activeBackground#2b2b2b
  • tab.activeBorder#1b1b1b
  • tab.activeForeground#f2f5fc
  • tab.border#454545
  • tab.inactiveBackground#1b1b1b
  • tab.inactiveForeground#cecece
  • terminal.ansiBlack#1b1b1b
  • terminal.ansiBlue#ff96cb
  • terminal.ansiCyan#29c3a0
  • terminal.ansiGreen#29c3a0
  • terminal.ansiMagenta#ff96cb
  • terminal.ansiRed#ff6364
  • terminal.ansiWhite#f2f5fc
  • terminal.ansiYellow#d29922
  • terminal.background#1b1b1b
  • terminalCommandDecoration.defaultBackground#1b1b1b
  • titleBar.activeBackground#1b1b1b
  • titleBar.inactiveBackground#1b1b1b
  • tree.indentGuidesStroke#454545
  • tree.tableColumnsBorder#454545

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language.boolean#d29922
comment, punctuation.definition.comment#cececeitalic
string, string.quoted#29c3a0
constant.numeric, constant.language, constant.character#d29922
keyword, storage.type, storage.modifier#ff96cb
entity.name.function, support.function#9acdff
entity.name.type, entity.name.class, support.class#cc9aff
variable, variable.parameter, variable.other#f2f5fc
entity.name.tag, punctuation.definition.tag#ff96cb
entity.other.attribute-name#9acdff
punctuation, meta.brace#cecece
invalid, invalid.illegal#ff6364
markup.bold#ff96cbbold
markup.italicitalic
markup.heading#ff96cbbold
markup.underline.link#9acdff

Shiki preview

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

Loading...