Colin's VS Code Themes

Color themes

• 

  Autumn Ember

• 

  Birthday Confetti

• 

  Blue Raspberry

• 

  Candy Cane Code

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#d97706
• activityBar.background#1d1008
• activityBar.foreground#f5d6a3
• activityBar.inactiveForeground#ad7643
• activityBarBadge.background#d97706
• activityBarBadge.foreground#120a04
• badge.background#d97706
• badge.foreground#120a04
• breadcrumb.activeSelectionForeground#d97706
• breadcrumb.background#120a04
• breadcrumb.focusForeground#f5d6a3
• breadcrumb.foreground#ad7643
• button.background#d97706
• button.foreground#120a04
• button.hoverBackground#fbbf24
• button.secondaryBackground#3a2110
• button.secondaryForeground#f5d6a3
• button.secondaryHoverBackground#6f3d18
• checkbox.background#120a04
• checkbox.border#6f3d18
• checkbox.foreground#f5d6a3
• descriptionForeground#ad7643
• diffEditor.border#6f3d18
• diffEditor.insertedTextBackground#a3c76d22
• diffEditor.removedTextBackground#dc262622
• disabledForeground#ad7643
• dropdown.background#120a04
• dropdown.border#6f3d18
• dropdown.foreground#f5d6a3
• editor.background#120a04
• editor.findMatchBackground#fbbf2466
• editor.findMatchHighlightBackground#d9770633
• editor.findRangeHighlightBackground#ef444422
• editor.foreground#f5d6a3
• editor.hoverHighlightBackground#d9770618
• editor.inactiveSelectionBackground#d9770622
• editor.lineHighlightBackground#1d1008
• editor.lineHighlightBorder#6f3d18
• editor.selectionBackground#d9770644
• editor.selectionHighlightBackground#ef444433
• editor.wordHighlightBackground#d9770622
• editor.wordHighlightStrongBackground#ef444422
• editorBracketMatch.background#d9770622
• editorBracketMatch.border#d97706
• editorCursor.foreground#d97706
• editorGroup.border#6f3d18
• editorGroupHeader.tabsBackground#1d1008
• editorGroupHeader.tabsBorder#6f3d18
• editorGutter.addedBackground#a3c76d
• editorGutter.background#120a04
• editorGutter.deletedBackground#dc2626
• editorGutter.modifiedBackground#fbbf24
• editorHoverWidget.background#170d06
• editorHoverWidget.border#6f3d18
• editorHoverWidget.foreground#f5d6a3
• editorIndentGuide.activeBackground1#d97706
• editorIndentGuide.background1#6f3d18
• editorLineNumber.activeForeground#d97706
• editorLineNumber.foreground#ad7643
• editorOverviewRuler.addedForeground#a3c76d
• editorOverviewRuler.border#120a04
• editorOverviewRuler.deletedForeground#dc2626
• editorOverviewRuler.errorForeground#dc2626
• editorOverviewRuler.infoForeground#d97706
• editorOverviewRuler.modifiedForeground#fbbf24
• editorOverviewRuler.warningForeground#fbbf24
• editorRuler.foreground#6f3d18
• editorSuggestWidget.background#170d06
• editorSuggestWidget.border#6f3d18
• editorSuggestWidget.foreground#f5d6a3
• editorSuggestWidget.highlightForeground#d97706
• editorSuggestWidget.selectedBackground#3a2110
• editorWhitespace.foreground#6f3d18
• errorForeground#dc2626
• focusBorder#d97706
• foreground#f5d6a3
• gitDecoration.addedResourceForeground#a3c76d
• gitDecoration.conflictingResourceForeground#ef4444
• gitDecoration.deletedResourceForeground#dc2626
• gitDecoration.ignoredResourceForeground#ad7643
• gitDecoration.modifiedResourceForeground#fbbf24
• gitDecoration.untrackedResourceForeground#a3c76d
• icon.foreground#f5d6a3
• input.background#120a04
• input.border#6f3d18
• input.foreground#f5d6a3
• input.placeholderForeground#ad7643
• inputOption.activeBackground#d9770622
• inputOption.activeBorder#d97706
• inputValidation.errorBackground#1d1008
• inputValidation.errorBorder#dc2626
• inputValidation.infoBackground#1d1008
• inputValidation.infoBorder#d97706
• inputValidation.warningBackground#1d1008
• inputValidation.warningBorder#fbbf24
• list.activeSelectionBackground#3a2110
• list.activeSelectionForeground#f5d6a3
• list.focusOutline#d97706
• list.highlightForeground#d97706
• list.hoverBackground#1d1008
• list.inactiveSelectionBackground#1d1008
• list.inactiveSelectionForeground#f5d6a3
• menu.background#170d06
• menu.foreground#f5d6a3
• menu.selectionBackground#3a2110
• menu.selectionForeground#f5d6a3
• menu.separatorBackground#6f3d18
• minimap.background#120a04
• minimap.errorHighlight#dc2626
• minimap.findMatchHighlight#fbbf24
• minimap.selectionHighlight#d9770670
• minimap.warningHighlight#fbbf24
• notificationCenter.border#6f3d18
• notificationCenterHeader.background#3a2110
• notificationCenterHeader.foreground#f5d6a3
• notifications.background#170d06
• notifications.border#6f3d18
• notifications.foreground#f5d6a3
• notificationToast.border#6f3d18
• panel.background#170d06
• panel.border#6f3d18
• panel.foreground#f5d6a3
• panelTitle.activeBorder#d97706
• panelTitle.activeForeground#f5d6a3
• panelTitle.inactiveForeground#ad7643
• peekView.border#d97706
• peekViewEditor.background#120a04
• peekViewResult.background#170d06
• peekViewTitle.background#3a2110
• peekViewTitleDescription.foreground#ad7643
• peekViewTitleLabel.foreground#f5d6a3
• pickerGroup.border#6f3d18
• pickerGroup.foreground#d97706
• progressBar.background#d97706
• quickInput.background#170d06
• quickInput.foreground#f5d6a3
• quickInputList.focusBackground#3a2110
• quickInputList.focusForeground#f5d6a3
• quickInputTitle.background#3a2110
• sash.hoverBorder#d97706
• scrollbarSlider.activeBackground#d9770688
• scrollbarSlider.background#6f3d1855
• scrollbarSlider.hoverBackground#d9770655
• selection.background#d9770644
• settings.dropdownBackground#120a04
• settings.dropdownBorder#6f3d18
• settings.dropdownForeground#f5d6a3
• settings.headerForeground#f5d6a3
• settings.modifiedItemIndicator#d97706
• settings.textInputBackground#120a04
• settings.textInputBorder#6f3d18
• settings.textInputForeground#f5d6a3
• sideBar.background#170d06
• sideBar.border#6f3d18
• sideBar.foreground#f5d6a3
• sideBarSectionHeader.background#3a2110
• sideBarSectionHeader.border#6f3d18
• sideBarSectionHeader.foreground#f5d6a3
• sideBarTitle.foreground#f5d6a3
• statusBar.background#3a2110
• statusBar.border#6f3d18
• statusBar.debuggingBackground#d97706
• statusBar.debuggingForeground#120a04
• statusBar.foreground#f5d6a3
• statusBar.noFolderBackground#1d1008
• statusBarItem.hoverBackground#6f3d18
• statusBarItem.remoteBackground#d97706
• statusBarItem.remoteForeground#120a04
• symbolIcon.classForeground#eab308
• symbolIcon.functionForeground#f59e0b
• symbolIcon.methodForeground#f59e0b
• symbolIcon.propertyForeground#fb923c
• symbolIcon.variableForeground#f5d6a3
• tab.activeBackground#120a04
• tab.activeBorderTop#d97706
• tab.activeForeground#f5d6a3
• tab.border#6f3d18
• tab.inactiveBackground#1d1008
• tab.inactiveForeground#ad7643
• tab.unfocusedActiveBorderTop#ad7643
• terminal.ansiBlack#120a04
• terminal.ansiBlue#f59e0b
• terminal.ansiBrightBlack#ad7643
• terminal.ansiBrightBlue#f59e0b
• terminal.ansiBrightCyan#d97706
• terminal.ansiBrightGreen#a3c76d
• terminal.ansiBrightMagenta#ef4444
• terminal.ansiBrightRed#dc2626
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#fbbf24
• terminal.ansiCyan#d97706
• terminal.ansiGreen#a3c76d
• terminal.ansiMagenta#ef4444
• terminal.ansiRed#dc2626
• terminal.ansiWhite#f5d6a3
• terminal.ansiYellow#fbbf24
• terminal.background#120a04
• terminal.foreground#f5d6a3
• textBlockQuote.background#1d1008
• textBlockQuote.border#d97706
• textCodeBlock.background#1d1008
• textLink.activeForeground#fbbf24
• textLink.foreground#d97706
• titleBar.activeBackground#1d1008
• titleBar.activeForeground#f5d6a3
• titleBar.border#6f3d18
• titleBar.inactiveBackground#170d06
• titleBar.inactiveForeground#ad7643
• widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).