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#141415
  • activityBar.border#141415
  • activityBar.foreground#ebebd0
  • activityBar.inactiveForeground#85a5ad
  • activityBarBadge.background#629dac
  • activityBarBadge.foreground#ebebd0
  • badge.background#629dac
  • badge.foreground#ebebd0
  • border#2d2d2f
  • breadcrumb.activeSelectionForeground#ebebd0
  • breadcrumb.background#141415
  • breadcrumb.focusForeground#ebebd0
  • breadcrumb.foreground#85a5ad
  • button.background#629dac
  • button.foreground#141415
  • button.hoverBackground#629dac
  • button.secondaryBackground#141415
  • button.secondaryForeground#85a5ad
  • button.secondaryHoverBackground#629dac20
  • button.separator#2d2d2f
  • checkbox.background#141415
  • checkbox.border#2d2d2f
  • checkbox.foreground#629dac
  • checkbox.selectBackground#141415
  • checkbox.selectBorder#2d2d2f
  • debugExceptionWidget.background#141415
  • debugExceptionWidget.border#2d2d2f
  • debugToolBar.background#141415
  • descriptionForeground#85a5ad80
  • diffEditor.insertedTextBackground#29c3a020
  • diffEditor.removedTextBackground#811d1d20
  • dropdown.background#296375
  • dropdown.border#2d2d2f
  • dropdown.foreground#85a5ad
  • dropdown.listBackground#141415
  • editor.background#141415
  • editor.findMatchBackground#629dac92
  • editor.findMatchBorder#629dac
  • editor.findMatchHighlightBackground#629dac92
  • editor.findMatchHighlightBorder#629dac
  • editor.findRangeHighlightBackground#629dac92
  • editor.findRangeHighlightBorder#629dac90
  • editor.findWidget.background#141415
  • editor.findWidget.border#2d2d2f
  • editor.foreground#ebebd0
  • editor.lineHighlightBackground#252527
  • editor.rangeHighlightBackground#14141540
  • editor.rangeHighlightBorder#2d2d2f
  • editor.selectionBackground#296375
  • editor.selectionHighlightBackground#629dac20
  • editor.selectionHighlightBorder#629dac80
  • editor.wordHighlightBackground#629dac20
  • editor.wordHighlightStrongBackground#629dac40
  • editorBracketMatch.background#629dac40
  • editorBracketMatch.border#629dac
  • editorCodeLens.foreground#85a5ad
  • editorCursor.foreground#ebebd0
  • editorError.foreground#811d1d
  • editorGroup.border#2d2d2f
  • editorGroup.emptyBackground#141415
  • editorGroupHeader.tabsBackground#141415
  • editorGroupHeader.tabsBorder#2d2d2f
  • editorGutter.background#141415
  • editorHint.foreground#29c3a0
  • editorHoverWidget.background#141415
  • editorHoverWidget.border#2d2d2f
  • editorIndentGuide.activeBackground1#629dac
  • editorIndentGuide.background1#2d2d2f
  • editorInfo.foreground#629dac
  • editorLightBulb.foreground#d29922
  • editorLineNumber.activeForeground#629dac
  • editorLineNumber.foreground#2d2d2f
  • editorOverviewRuler.border#141415
  • editorSuggestWidget.background#141415
  • editorSuggestWidget.border#2d2d2f
  • editorSuggestWidget.selectedBackground#2d2d2f
  • editorWarning.foreground#d29922
  • editorWhitespace.foreground#2d2d2f
  • editorWidget.background#141415
  • editorWidget.border#2d2d2f
  • errorForeground#811d1d
  • explorer.fileItem.foreground#85a5ad
  • explorer.fileItem.hoverForeground#ebebd0
  • explorer.folderItem.foreground#252527
  • explorer.folderItem.hoverForeground#ebebd0
  • focusBorder#629dac
  • foreground#85a5ad
  • gitDecoration.addedResourceForeground#29c3a0
  • gitDecoration.conflictingResourceForeground#629dac
  • gitDecoration.deletedResourceForeground#811d1d
  • gitDecoration.ignoredResourceForeground#85a5ad80
  • gitDecoration.modifiedResourceForeground#d29922
  • gitDecoration.stageDeletedResourceForeground#811d1d
  • gitDecoration.stageModifiedResourceForeground#d29922
  • gitDecoration.submoduleResourceForeground#ebebd0
  • gitDecoration.untrackedResourceForeground#29c3a0
  • icon.foreground#ebebd0
  • input.background#2d2d2f
  • input.border#2d2d2f
  • input.foreground#ebebd0
  • input.placeholderForeground#85a5ad
  • inputOption.activeBackground#629dac85
  • inputOption.activeBorder#629dac
  • inputOption.activeForeground#ebebd0
  • inputOption.hoverBackground#629dac40
  • inputValidation.errorBackground#141415
  • inputValidation.errorBorder#811d1d
  • inputValidation.infoBackground#141415
  • inputValidation.infoBorder#629dac
  • inputValidation.warningBackground#141415
  • inputValidation.warningBorder#d29922
  • list.activeSelectionBackground#296375
  • list.activeSelectionForeground#ebebd0
  • list.dropBackground#14141540
  • list.errorForeground#811d1d
  • list.filterMatchBackground#14141520
  • list.focusBackground#296375
  • list.focusForeground#ebebd0
  • list.highlightForeground#629dac
  • list.hoverBackground#252527
  • list.hoverForeground#ebebd0
  • list.inactiveSelectionBackground#25252740
  • list.warningForeground#d29922
  • menu.background#141415
  • menu.border#2d2d2f
  • menu.foreground#85a5ad
  • menu.selectionBackground#296375
  • menu.selectionForeground#ebebd0
  • menu.separatorBackground#2d2d2f
  • menubar.selectionBackground#296375
  • menubar.selectionForeground#ebebd0
  • notificationCenterHeader.background#141415
  • notifications.background#141415
  • notifications.foreground#85a5ad
  • notificationsErrorIcon.foreground#811d1d
  • notificationsInfoIcon.foreground#629dac
  • notificationsWarningIcon.foreground#d29922
  • panel.background#141415
  • panel.border#2d2d2f
  • panelSection.border#2d2d2f
  • panelSection.dropBackground#141415
  • panelSectionHeader.background#296375
  • panelTitle.activeBorder#629dac
  • panelTitle.activeForeground#ebebd0
  • panelTitle.inactiveForeground#85a5ad
  • peekView.border#629dac
  • peekViewEditor.background#141415
  • peekViewResult.background#141415
  • peekViewTitle.background#141415
  • pickerGroup.border#2d2d2f
  • pickerGroup.foreground#629dac
  • problemsErrorIcon.foreground#811d1d
  • problemsInfoIcon.foreground#629dac
  • problemsWarningIcon.foreground#d29922
  • quickInput.background#141415
  • quickInput.foreground#85a5ad
  • quickInputList.focusBackground#2d2d2f
  • scrollbar.shadow#14141540
  • scrollbarSlider.activeBackground#629dac
  • scrollbarSlider.background#629dac20
  • scrollbarSlider.hoverBackground#629dac
  • selection.background#629dac40
  • settings.checkboxBackground#141415
  • settings.checkboxBorder#2d2d2f
  • settings.checkboxForeground#629dac
  • settings.headerForeground#ebebd0
  • settings.modifiedItemIndicator#629dac
  • sideBar.background#141415
  • sideBar.border#2d2d2f
  • sideBar.dropBackground#629dac20
  • sideBar.foreground#85a5ad
  • sideBarSectionHeader.background#296375
  • sideBarSectionHeader.border#2d2d2f
  • sideBarSectionHeader.foreground#ebebd0
  • sideBarTitle.foreground#85a5ad
  • statusBar.background#141415
  • statusBar.border#2d2d2f
  • statusBar.debuggingBackground#811d1d
  • statusBar.foreground#85a5ad
  • statusBar.noFolderBackground#141415
  • statusBarItem.hoverBackground#252527
  • statusBarItem.remoteBackground#629dac
  • statusBarItem.remoteForeground#ebebd0
  • tab.activeBackground#19191a
  • tab.activeBorder#141415
  • tab.activeBorderTop#629dac
  • tab.activeForeground#ebebd0
  • tab.border#2d2d2f
  • tab.hoverBorder#629dac
  • tab.inactiveBackground#141415
  • tab.inactiveForeground#85a5ad
  • terminal.ansiBlack#141415
  • terminal.ansiBlue#629dac
  • terminal.ansiCyan#29c3a0
  • terminal.ansiGreen#29c3a0
  • terminal.ansiMagenta#629dac
  • terminal.ansiRed#811d1d
  • terminal.ansiWhite#ebebd0
  • terminal.ansiYellow#d29922
  • terminal.background#141415
  • terminal.border#2d2d2f
  • terminal.foreground#ebebd0
  • terminal.selectionBackground#629dac40
  • terminalCommandDecoration.defaultBackground#141415
  • textLink.activeForeground#629dac
  • textLink.foreground#629dac
  • textPreformat.foreground#ebebd0
  • titleBar.activeBackground#141415
  • titleBar.activeBorder#141415
  • titleBar.activeForeground#85a5ad
  • titleBar.border#2d2d2f
  • titleBar.inactiveBackground#141415
  • titleBar.inactiveForeground#85a5ad
  • tree.indentGuidesStroke#2d2d2f
  • tree.tableColumnsBorder#2d2d2f
  • walkThrough.embeddedEditorBackground#141415
  • welcomePage.buttonBackground#141415
  • welcomePage.buttonHoverBackground#629dac20
  • widget.background#141415
  • widget.border#2d2d2f
  • widget.shadow#14141540

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6A9955
string#CE9178
constant.numeric#B5CEA8
constant.language#569CD6
variable#9CDCFE
keyword#569CD6
storage#569CD6
entity.name.type#4EC9B0
entity.name.function#DCDCAA
entity.name.tag#569CD6
entity.other.attribute-name#9CDCFE
support.function#DCDCAA
support.constant#4FC1FF
support.type#4EC9B0
punctuation.definition.tag#808080
keyword.control#C586C0

Shiki preview

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

Loading...