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#333333
  • activityBar.border#333333
  • activityBar.foreground#f4f4dd
  • activityBar.inactiveForeground#f4f4dd
  • activityBarBadge.background#ffbe14
  • activityBarBadge.foreground#f4f4dd
  • badge.background#ffbe14
  • badge.foreground#f4f4dd
  • border#8a4515
  • breadcrumb.activeSelectionForeground#f4f4dd
  • breadcrumb.background#333333
  • breadcrumb.focusForeground#f4f4dd
  • breadcrumb.foreground#f4f4dd
  • button.background#ffbe14
  • button.foreground#1a1a1a
  • button.hoverBackground#ffbe14
  • button.secondaryBackground#333333
  • button.secondaryForeground#f4f4dd
  • button.secondaryHoverBackground#ffbe1420
  • button.separator#8a4515
  • checkbox.background#333333
  • checkbox.border#8a4515
  • checkbox.foreground#b78512
  • checkbox.selectBackground#333333
  • checkbox.selectBorder#8a4515
  • debugExceptionWidget.background#333333
  • debugExceptionWidget.border#8a4515
  • debugToolBar.background#333333
  • descriptionForeground#f4f4dd80
  • diffEditor.insertedTextBackground#29c3a020
  • diffEditor.removedTextBackground#ff440020
  • dropdown.background#8a4515
  • dropdown.border#8a4515
  • dropdown.foreground#f4f4dd
  • dropdown.listBackground#333333
  • editor.background#333333
  • editor.findMatchBackground#ffbe1492
  • editor.findMatchBorder#ffbe14
  • editor.findMatchHighlightBackground#ffbe1492
  • editor.findMatchHighlightBorder#ffbe14
  • editor.findRangeHighlightBackground#ffbe1492
  • editor.findRangeHighlightBorder#ffbe1490
  • editor.findWidget.background#333333
  • editor.findWidget.border#8a4515
  • editor.foreground#f4f4dd
  • editor.lineHighlightBackground#525252
  • editor.rangeHighlightBackground#33333340
  • editor.rangeHighlightBorder#8a4515
  • editor.selectionBackground#be8700
  • editor.selectionHighlightBackground#ffbe1420
  • editor.selectionHighlightBorder#ffbe1480
  • editor.wordHighlightBackground#ffbe1420
  • editor.wordHighlightStrongBackground#ffbe1440
  • editorBracketMatch.background#ffbe1440
  • editorBracketMatch.border#ffbe14
  • editorCodeLens.foreground#f4f4dd
  • editorCursor.foreground#f4f4dd
  • editorError.foreground#ff4400
  • editorGroup.border#8a4515
  • editorGroup.emptyBackground#333333
  • editorGroupHeader.tabsBackground#333333
  • editorGroupHeader.tabsBorder#8a4515
  • editorGutter.background#333333
  • editorHint.foreground#29c3a0
  • editorHoverWidget.background#333333
  • editorHoverWidget.border#8a4515
  • editorIndentGuide.activeBackground1#b78512
  • editorIndentGuide.background1#8a4515
  • editorInfo.foreground#ffbe14
  • editorLightBulb.foreground#d29922
  • editorLineNumber.activeForeground#b78512
  • editorLineNumber.foreground#8a4515
  • editorOverviewRuler.border#333333
  • editorSuggestWidget.background#333333
  • editorSuggestWidget.border#8a4515
  • editorSuggestWidget.selectedBackground#8a4515
  • editorWarning.foreground#d29922
  • editorWhitespace.foreground#8a4515
  • editorWidget.background#333333
  • editorWidget.border#8a4515
  • errorForeground#ff4400
  • explorer.fileItem.foreground#f4f4dd
  • explorer.fileItem.hoverForeground#f4f4dd
  • explorer.folderItem.foreground#525252
  • explorer.folderItem.hoverForeground#f4f4dd
  • focusBorder#b78512
  • foreground#f4f4dd
  • gitDecoration.addedResourceForeground#29c3a0
  • gitDecoration.conflictingResourceForeground#ffbe14
  • gitDecoration.deletedResourceForeground#ff4400
  • gitDecoration.ignoredResourceForeground#f4f4dd80
  • gitDecoration.modifiedResourceForeground#d29922
  • gitDecoration.stageDeletedResourceForeground#ff4400
  • gitDecoration.stageModifiedResourceForeground#d29922
  • gitDecoration.submoduleResourceForeground#f4f4dd
  • gitDecoration.untrackedResourceForeground#29c3a0
  • icon.foreground#f4f4dd
  • input.background#8a4515
  • input.border#8a4515
  • input.foreground#f4f4dd
  • input.placeholderForeground#f4f4dd
  • inputOption.activeBackground#b7851285
  • inputOption.activeBorder#b78512
  • inputOption.activeForeground#f4f4dd
  • inputOption.hoverBackground#b7851240
  • inputValidation.errorBackground#333333
  • inputValidation.errorBorder#ff4400
  • inputValidation.infoBackground#333333
  • inputValidation.infoBorder#b78512
  • inputValidation.warningBackground#333333
  • inputValidation.warningBorder#d29922
  • list.activeSelectionBackground#be8700
  • list.activeSelectionForeground#1a1a1a
  • list.dropBackground#33333340
  • list.errorForeground#ff4400
  • list.filterMatchBackground#33333320
  • list.focusBackground#be8700
  • list.focusForeground#f4f4dd
  • list.highlightForeground#ffbe14
  • list.hoverBackground#525252
  • list.hoverForeground#f4f4dd
  • list.inactiveSelectionBackground#52525240
  • list.warningForeground#d29922
  • menu.background#333333
  • menu.border#8a4515
  • menu.foreground#f4f4dd
  • menu.selectionBackground#be8700
  • menu.selectionForeground#1a1a1a
  • menu.separatorBackground#8a4515
  • menubar.selectionBackground#be8700
  • menubar.selectionForeground#1a1a1a
  • notificationCenterHeader.background#333333
  • notifications.background#333333
  • notifications.foreground#f4f4dd
  • notificationsErrorIcon.foreground#ff4400
  • notificationsInfoIcon.foreground#ffbe14
  • notificationsWarningIcon.foreground#d29922
  • panel.background#333333
  • panel.border#8a4515
  • panelSection.border#8a4515
  • panelSection.dropBackground#333333
  • panelSectionHeader.background#8a4515
  • panelTitle.activeBorder#ffbe14
  • panelTitle.activeForeground#f4f4dd
  • panelTitle.inactiveForeground#f4f4dd
  • peekView.border#ffbe14
  • peekViewEditor.background#333333
  • peekViewResult.background#333333
  • peekViewTitle.background#333333
  • pickerGroup.border#8a4515
  • pickerGroup.foreground#ffbe14
  • problemsErrorIcon.foreground#ff4400
  • problemsInfoIcon.foreground#ffbe14
  • problemsWarningIcon.foreground#d29922
  • quickInput.background#333333
  • quickInput.foreground#f4f4dd
  • quickInputList.focusBackground#8a4515
  • scrollbar.shadow#33333340
  • scrollbarSlider.activeBackground#ffbe14
  • scrollbarSlider.background#ffbe1420
  • scrollbarSlider.hoverBackground#ffbe14
  • selection.background#ffbe1440
  • settings.checkboxBackground#333333
  • settings.checkboxBorder#8a4515
  • settings.checkboxForeground#b78512
  • settings.headerForeground#f4f4dd
  • settings.modifiedItemIndicator#ffbe14
  • sideBar.background#333333
  • sideBar.border#8a4515
  • sideBar.dropBackground#ffbe1420
  • sideBar.foreground#f4f4dd
  • sideBarSectionHeader.background#8a4515
  • sideBarSectionHeader.border#8a4515
  • sideBarSectionHeader.foreground#f4f4dd
  • sideBarTitle.foreground#f4f4dd
  • statusBar.background#333333
  • statusBar.border#8a4515
  • statusBar.debuggingBackground#ff4400
  • statusBar.foreground#f4f4dd
  • statusBar.noFolderBackground#333333
  • statusBarItem.hoverBackground#525252
  • statusBarItem.remoteBackground#ffbe14
  • statusBarItem.remoteForeground#f4f4dd
  • tab.activeBackground#4a4a4a
  • tab.activeBorder#333333
  • tab.activeBorderTop#ffbe14
  • tab.activeForeground#f4f4dd
  • tab.border#8a4515
  • tab.hoverBorder#ffbe14
  • tab.inactiveBackground#333333
  • tab.inactiveForeground#f4f4dd
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#ffbe14
  • terminal.ansiCyan#29c3a0
  • terminal.ansiGreen#29c3a0
  • terminal.ansiMagenta#ffbe14
  • terminal.ansiRed#ff4400
  • terminal.ansiWhite#f4f4dd
  • terminal.ansiYellow#d29922
  • terminal.background#333333
  • terminal.border#8a4515
  • terminal.foreground#f4f4dd
  • terminal.selectionBackground#ffbe1440
  • terminalCommandDecoration.defaultBackground#333333
  • textLink.activeForeground#ffbe14
  • textLink.foreground#ffbe14
  • textPreformat.foreground#f4f4dd
  • titleBar.activeBackground#333333
  • titleBar.activeBorder#333333
  • titleBar.activeForeground#f4f4dd
  • titleBar.border#8a4515
  • titleBar.inactiveBackground#333333
  • titleBar.inactiveForeground#f4f4dd
  • tree.indentGuidesStroke#8a4515
  • tree.tableColumnsBorder#8a4515
  • walkThrough.embeddedEditorBackground#333333
  • welcomePage.buttonBackground#333333
  • welcomePage.buttonHoverBackground#ffbe1420
  • widget.background#333333
  • widget.border#8a4515
  • widget.shadow#33333340

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language.boolean#d29922
comment, punctuation.definition.comment#8a4515italic
string, string.quoted#29c3a0
constant.numeric, constant.language, constant.character#ffbe14
keyword, storage.type, storage.modifier#be8700bold
entity.name.function, support.function#ffbe14
entity.name.type, entity.name.class, support.class#b78512
variable, variable.parameter, variable.other#f4f4dd
entity.name.tag, punctuation.definition.tag#be8700
entity.other.attribute-name#ffbe14
punctuation, meta.brace#8a4515
invalid, invalid.illegal#ff4400bold underline
markup.bold#ffbe14bold
markup.italic#b78512italic
markup.heading#be8700bold
markup.underline.link#29c3a0underline
meta.import, meta.export#29c3a0

Shiki preview

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

Loading...