Colin's VS Code Themes

Color themes

• 

  Peach Soda

• 

  Pumpkin Hacker

• 

  Quest Tavern

• 

  Retro Console

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.activeBorder#ff8a1f
• activityBar.background#1a0d05
• activityBar.foreground#ffd7a1
• activityBar.inactiveForeground#a96d3f
• activityBarBadge.background#ff8a1f
• activityBarBadge.foreground#100804
• badge.background#ff8a1f
• badge.foreground#100804
• breadcrumb.activeSelectionForeground#ff8a1f
• breadcrumb.background#100804
• breadcrumb.focusForeground#ffd7a1
• breadcrumb.foreground#a96d3f
• button.background#ff8a1f
• button.foreground#100804
• button.hoverBackground#ffc15a
• button.secondaryBackground#341707
• button.secondaryForeground#ffd7a1
• button.secondaryHoverBackground#6d2b0d
• checkbox.background#100804
• checkbox.border#6d2b0d
• checkbox.foreground#ffd7a1
• descriptionForeground#a96d3f
• diffEditor.border#6d2b0d
• diffEditor.insertedTextBackground#8cff6622
• diffEditor.removedTextBackground#ff5d3822
• disabledForeground#a96d3f
• dropdown.background#100804
• dropdown.border#6d2b0d
• dropdown.foreground#ffd7a1
• editor.background#100804
• editor.findMatchBackground#ffc15a66
• editor.findMatchHighlightBackground#ff8a1f33
• editor.findRangeHighlightBackground#8cff6622
• editor.foreground#ffd7a1
• editor.hoverHighlightBackground#ff8a1f18
• editor.inactiveSelectionBackground#ff8a1f22
• editor.lineHighlightBackground#1a0d05
• editor.lineHighlightBorder#6d2b0d
• editor.selectionBackground#ff8a1f44
• editor.selectionHighlightBackground#8cff6633
• editor.wordHighlightBackground#ff8a1f22
• editor.wordHighlightStrongBackground#8cff6622
• editorBracketMatch.background#ff8a1f22
• editorBracketMatch.border#ff8a1f
• editorCursor.foreground#ff8a1f
• editorGroup.border#6d2b0d
• editorGroupHeader.tabsBackground#1a0d05
• editorGroupHeader.tabsBorder#6d2b0d
• editorGutter.addedBackground#8cff66
• editorGutter.background#100804
• editorGutter.deletedBackground#ff5d38
• editorGutter.modifiedBackground#ffc15a
• editorHoverWidget.background#160a04
• editorHoverWidget.border#6d2b0d
• editorHoverWidget.foreground#ffd7a1
• editorIndentGuide.activeBackground1#ff8a1f
• editorIndentGuide.background1#6d2b0d
• editorLineNumber.activeForeground#ff8a1f
• editorLineNumber.foreground#a96d3f
• editorOverviewRuler.addedForeground#8cff66
• editorOverviewRuler.border#100804
• editorOverviewRuler.deletedForeground#ff5d38
• editorOverviewRuler.errorForeground#ff5d38
• editorOverviewRuler.infoForeground#ff8a1f
• editorOverviewRuler.modifiedForeground#ffc15a
• editorOverviewRuler.warningForeground#ffc15a
• editorRuler.foreground#6d2b0d
• editorSuggestWidget.background#160a04
• editorSuggestWidget.border#6d2b0d
• editorSuggestWidget.foreground#ffd7a1
• editorSuggestWidget.highlightForeground#ff8a1f
• editorSuggestWidget.selectedBackground#341707
• editorWhitespace.foreground#6d2b0d
• errorForeground#ff5d38
• focusBorder#ff8a1f
• foreground#ffd7a1
• gitDecoration.addedResourceForeground#8cff66
• gitDecoration.conflictingResourceForeground#8cff66
• gitDecoration.deletedResourceForeground#ff5d38
• gitDecoration.ignoredResourceForeground#a96d3f
• gitDecoration.modifiedResourceForeground#ffc15a
• gitDecoration.untrackedResourceForeground#8cff66
• icon.foreground#ffd7a1
• input.background#100804
• input.border#6d2b0d
• input.foreground#ffd7a1
• input.placeholderForeground#a96d3f
• inputOption.activeBackground#ff8a1f22
• inputOption.activeBorder#ff8a1f
• inputValidation.errorBackground#1a0d05
• inputValidation.errorBorder#ff5d38
• inputValidation.infoBackground#1a0d05
• inputValidation.infoBorder#ff8a1f
• inputValidation.warningBackground#1a0d05
• inputValidation.warningBorder#ffc15a
• list.activeSelectionBackground#341707
• list.activeSelectionForeground#ffd7a1
• list.focusOutline#ff8a1f
• list.highlightForeground#ff8a1f
• list.hoverBackground#1a0d05
• list.inactiveSelectionBackground#1a0d05
• list.inactiveSelectionForeground#ffd7a1
• menu.background#160a04
• menu.foreground#ffd7a1
• menu.selectionBackground#341707
• menu.selectionForeground#ffd7a1
• menu.separatorBackground#6d2b0d
• minimap.background#100804
• minimap.errorHighlight#ff5d38
• minimap.findMatchHighlight#ffc15a
• minimap.selectionHighlight#ff8a1f70
• minimap.warningHighlight#ffc15a
• notificationCenter.border#6d2b0d
• notificationCenterHeader.background#341707
• notificationCenterHeader.foreground#ffd7a1
• notifications.background#160a04
• notifications.border#6d2b0d
• notifications.foreground#ffd7a1
• notificationToast.border#6d2b0d
• panel.background#160a04
• panel.border#6d2b0d
• panel.foreground#ffd7a1
• panelTitle.activeBorder#ff8a1f
• panelTitle.activeForeground#ffd7a1
• panelTitle.inactiveForeground#a96d3f
• peekView.border#ff8a1f
• peekViewEditor.background#100804
• peekViewResult.background#160a04
• peekViewTitle.background#341707
• peekViewTitleDescription.foreground#a96d3f
• peekViewTitleLabel.foreground#ffd7a1
• pickerGroup.border#6d2b0d
• pickerGroup.foreground#ff8a1f
• progressBar.background#ff8a1f
• quickInput.background#160a04
• quickInput.foreground#ffd7a1
• quickInputList.focusBackground#341707
• quickInputList.focusForeground#ffd7a1
• quickInputTitle.background#341707
• sash.hoverBorder#ff8a1f
• scrollbarSlider.activeBackground#ff8a1f88
• scrollbarSlider.background#6d2b0d55
• scrollbarSlider.hoverBackground#ff8a1f55
• selection.background#ff8a1f44
• settings.dropdownBackground#100804
• settings.dropdownBorder#6d2b0d
• settings.dropdownForeground#ffd7a1
• settings.headerForeground#ffd7a1
• settings.modifiedItemIndicator#ff8a1f
• settings.textInputBackground#100804
• settings.textInputBorder#6d2b0d
• settings.textInputForeground#ffd7a1
• sideBar.background#160a04
• sideBar.border#6d2b0d
• sideBar.foreground#ffd7a1
• sideBarSectionHeader.background#341707
• sideBarSectionHeader.border#6d2b0d
• sideBarSectionHeader.foreground#ffd7a1
• sideBarTitle.foreground#ffd7a1
• statusBar.background#341707
• statusBar.border#6d2b0d
• statusBar.debuggingBackground#ff8a1f
• statusBar.debuggingForeground#100804
• statusBar.foreground#ffd7a1
• statusBar.noFolderBackground#1a0d05
• statusBarItem.hoverBackground#6d2b0d
• statusBarItem.remoteBackground#ff8a1f
• statusBarItem.remoteForeground#100804
• symbolIcon.classForeground#ffd27a
• symbolIcon.functionForeground#ffad45
• symbolIcon.methodForeground#ffad45
• symbolIcon.propertyForeground#ffb86b
• symbolIcon.variableForeground#ffd7a1
• tab.activeBackground#100804
• tab.activeBorderTop#ff8a1f
• tab.activeForeground#ffd7a1
• tab.border#6d2b0d
• tab.inactiveBackground#1a0d05
• tab.inactiveForeground#a96d3f
• tab.unfocusedActiveBorderTop#a96d3f
• terminal.ansiBlack#100804
• terminal.ansiBlue#ffad45
• terminal.ansiBrightBlack#a96d3f
• terminal.ansiBrightBlue#ffad45
• terminal.ansiBrightCyan#ff8a1f
• terminal.ansiBrightGreen#8cff66
• terminal.ansiBrightMagenta#8cff66
• terminal.ansiBrightRed#ff5d38
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#ffc15a
• terminal.ansiCyan#ff8a1f
• terminal.ansiGreen#8cff66
• terminal.ansiMagenta#8cff66
• terminal.ansiRed#ff5d38
• terminal.ansiWhite#ffd7a1
• terminal.ansiYellow#ffc15a
• terminal.background#100804
• terminal.foreground#ffd7a1
• textBlockQuote.background#1a0d05
• textBlockQuote.border#ff8a1f
• textCodeBlock.background#1a0d05
• textLink.activeForeground#ffc15a
• textLink.foreground#ff8a1f
• titleBar.activeBackground#1a0d05
• titleBar.activeForeground#ffd7a1
• titleBar.border#6d2b0d
• titleBar.inactiveBackground#160a04
• titleBar.inactiveForeground#a96d3f
• widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).