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#020817
  • activityBar.border#1E293B
  • activityBar.foreground#eff6ff
  • activityBar.inactiveForeground#94A3B8
  • activityBarBadge.background#0078D4
  • activityBarBadge.foreground#eff6ff
  • badge.background#1e40af
  • badge.foreground#eff6ff
  • border#2e374a
  • breadcrumb.activeSelectionForeground#eff6ff
  • breadcrumb.background#020817
  • breadcrumb.focusForeground#eff6ff
  • breadcrumb.foreground#65758b
  • button.background#1e40af
  • button.foreground#94A3B8
  • button.hoverBackground#1e40af
  • button.secondaryBackground#020817
  • button.secondaryForeground#94A3B8
  • button.secondaryHoverBackground#1e40af20
  • button.separator#1E293B
  • checkbox.background#0C1221
  • checkbox.border#1E293B
  • checkbox.foreground#1e40af
  • checkbox.selectBackground#0C1221
  • checkbox.selectBorder#1E293B
  • debugExceptionWidget.background#020817
  • debugExceptionWidget.border#1E293B
  • debugToolBar.background#020817
  • descriptionForeground#65758b80
  • diffEditor.insertedTextBackground#10B98120
  • diffEditor.removedTextBackground#7F1D1D20
  • dropdown.background#0C1221
  • dropdown.border#1E293B
  • dropdown.foreground#94A3B8
  • dropdown.listBackground#020817
  • editor.background#020817
  • editor.findMatchBackground#0078d492
  • editor.findMatchBorder#1e40af
  • editor.findMatchHighlightBackground#0078d492
  • editor.findMatchHighlightBorder#1e40af
  • editor.findRangeHighlightBackground#0078d492
  • editor.findRangeHighlightBorder#16315c90
  • editor.findWidget.background#0C1221
  • editor.findWidget.border#1E293B
  • editor.foreground#eff6ff
  • editor.lineHighlightBackground#0C1221
  • editor.rangeHighlightBackground#02081740
  • editor.rangeHighlightBorder#1E293B
  • editor.selectionBackground#0078d464
  • editor.selectionHighlightBackground#1e40af20
  • editor.selectionHighlightBorder#1e40af80
  • editor.wordHighlightBackground#1e40af20
  • editor.wordHighlightStrongBackground#1e40af40
  • editorBracketMatch.background#1e40af40
  • editorBracketMatch.border#1e40af
  • editorCodeLens.foreground#65758b
  • editorCursor.foreground#eff6ff
  • editorError.foreground#dc2626
  • editorGroup.border#1E293B
  • editorGroup.emptyBackground#020817
  • editorGroupHeader.tabsBackground#020817
  • editorGroupHeader.tabsBorder#1E293B
  • editorGutter.background#020817
  • editorHint.foreground#29c3a0
  • editorHoverWidget.background#020817
  • editorHoverWidget.border#1E293B
  • editorIndentGuide.activeBackground1#1e40af
  • editorIndentGuide.background1#000000
  • editorInfo.foreground#1e40af
  • editorLightBulb.foreground#d29922
  • editorLineNumber.activeForeground#1e40af
  • editorLineNumber.foreground#2e374a
  • editorLink.activeForeground#0078D4
  • editorLink.foreground#0078D4
  • editorOverviewRuler.border#000000
  • editorSuggestWidget.background#020817
  • editorSuggestWidget.border#1E293B
  • editorSuggestWidget.selectedBackground#1E293B
  • editorWarning.foreground#d29922
  • editorWhitespace.foreground#000000
  • editorWidget.background#0C1221
  • editorWidget.border#1E293B
  • errorForeground#dc2626
  • explorer.fileItem.foreground#94A3B8
  • explorer.fileItem.hoverForeground#eff6ff
  • explorer.folderItem.foreground#1E293B
  • explorer.folderItem.hoverForeground#eff6ff
  • focusBorder#1e40af
  • foreground#94A3B8
  • gitDecoration.addedResourceForeground#10B981
  • gitDecoration.conflictingResourceForeground#3B82F6
  • gitDecoration.deletedResourceForeground#7F1D1D
  • gitDecoration.ignoredResourceForeground#65758b80
  • gitDecoration.modifiedResourceForeground#d29922
  • gitDecoration.stageDeletedResourceForeground#7f1d1d
  • gitDecoration.stageModifiedResourceForeground#d29922
  • gitDecoration.submoduleResourceForeground#eff6ff
  • gitDecoration.untrackedResourceForeground#10B981
  • icon.foreground#eff6ff
  • input.background#182035
  • input.border#1E293B
  • input.foreground#eff6ff
  • input.placeholderForeground#94A3B8
  • inputOption.activeBackground#1e40af85
  • inputOption.activeBorder#0078D4
  • inputOption.activeForeground#ffffff
  • inputOption.hoverBackground#1e40af40
  • inputValidation.errorBackground#020817
  • inputValidation.errorBorder#dc2626
  • inputValidation.infoBackground#020817
  • inputValidation.infoBorder#1e40af
  • inputValidation.warningBackground#020817
  • inputValidation.warningBorder#d29922
  • list.activeSelectionBackground#1E293B
  • list.activeSelectionForeground#eff6ff
  • list.dropBackground#02081740
  • list.errorForeground#dc2626
  • list.filterMatchBackground#02081720
  • list.focusBackground#1E293B
  • list.focusForeground#eff6ff
  • list.highlightForeground#1e40af
  • list.hoverBackground#1E293B
  • list.hoverForeground#eff6ff
  • list.inactiveSelectionBackground#1E293B40
  • list.warningForeground#d29922
  • menu.background#0C1221
  • menu.border#1E293B
  • menu.foreground#94A3B8
  • menu.selectionBackground#1E293B
  • menu.selectionForeground#eff6ff
  • menu.separatorBackground#1E293B
  • menubar.selectionBackground#1E293B
  • menubar.selectionForeground#eff6ff
  • notificationCenterHeader.background#000000
  • notifications.background#0C1221
  • notifications.foreground#94A3B8
  • notificationsErrorIcon.foreground#dc2626
  • notificationsInfoIcon.foreground#1e40af
  • notificationsWarningIcon.foreground#d29922
  • panel.background#020817
  • panel.border#1E293B
  • panelSection.border#1E293B
  • panelSection.dropBackground#020817
  • panelSectionHeader.background#0C1221
  • panelTitle.activeBorder#1e40af
  • panelTitle.activeForeground#eff6ff
  • panelTitle.inactiveForeground#94A3B8
  • peekView.border#1e40af
  • peekViewEditor.background#000000
  • peekViewResult.background#020817
  • peekViewTitle.background#020817
  • pickerGroup.border#1E293B
  • pickerGroup.foreground#0078D4
  • problemsErrorIcon.foreground#dc2626
  • problemsInfoIcon.foreground#1e40af
  • problemsWarningIcon.foreground#d29922
  • quickInput.background#020817
  • quickInput.foreground#94A3B8
  • quickInputList.focusBackground#1E293B
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#0078D4
  • scrollbarSlider.background#020817
  • scrollbarSlider.hoverBackground#0078D4
  • selection.background#1e40af40
  • settings.checkboxBackground#0C1221
  • settings.checkboxBorder#1E293B
  • settings.checkboxForeground#1e40af
  • settings.headerForeground#eff6ff
  • settings.modifiedItemIndicator#1e40af
  • sideBar.background#020817
  • sideBar.border#1E293B
  • sideBar.dropBackground#1e40af20
  • sideBar.foreground#94A3B8
  • sideBarSectionHeader.background#0C1221
  • sideBarSectionHeader.border#1E293B
  • sideBarSectionHeader.foreground#94A3B8
  • sideBarTitle.foreground#94A3B8
  • statusBar.background#020817
  • statusBar.border#1E293B
  • statusBar.debuggingBackground#dc2626
  • statusBar.foreground#94A3B8
  • statusBar.noFolderBackground#020817
  • statusBarItem.hoverBackground#0C1221
  • statusBarItem.remoteBackground#1e40af
  • statusBarItem.remoteForeground#eff6ff
  • tab.activeBackground#020817
  • tab.activeBorder#1E293B
  • tab.activeBorderTop#0078D4
  • tab.activeForeground#eff6ff
  • tab.border#1E293B
  • tab.hoverBorder#0078D4
  • tab.inactiveBackground#020817
  • tab.inactiveForeground#94A3B8
  • terminal.ansiBlack#020817
  • terminal.ansiBlue#1e40af
  • terminal.ansiCyan#29c3a0
  • terminal.ansiGreen#29c3a0
  • terminal.ansiMagenta#1e40af
  • terminal.ansiRed#dc2626
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#d29922
  • terminal.background#020817
  • terminal.border#1E293B
  • terminal.foreground#eff6ff
  • terminal.selectionBackground#1e40af40
  • terminalCommandDecoration.defaultBackground#020817
  • textLink.activeForeground#1e40af
  • textLink.foreground#0078D4
  • textPreformat.foreground#eff6ff
  • titleBar.activeBackground#020817
  • titleBar.activeBorder#000000
  • titleBar.activeForeground#94A3B8
  • titleBar.border#1E293B
  • titleBar.inactiveBackground#020817
  • titleBar.inactiveForeground#94A3B8
  • tree.indentGuidesStroke#1E293B
  • tree.tableColumnsBorder#1E293B
  • walkThrough.embeddedEditorBackground#000000
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#1e40af20
  • widget.background#0C1221
  • widget.border#1E293B
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#334155italic
keyword, storage.type, storage.modifier, variable.language#f0f9ffbold
entity.name.function, support.function, entity.name.type, entity.name.class, support.class#f0f9ff
string, constant.numeric, variable, punctuation, keyword.operator#cbd5e1
markup.bold#f0f9ffbold

Shiki preview

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

Loading...