Colin's VS Code Themes

Color themes

• 

  Solar Flare

• 

  Spring Bloom

• 

  Starfighter HUD

• 

  Summer Sunset

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#ffb000
• activityBar.background#210c06
• activityBar.foreground#fff0c2
• activityBar.inactiveForeground#c07847
• activityBarBadge.background#ffb000
• activityBarBadge.foreground#120705
• badge.background#ffb000
• badge.foreground#120705
• breadcrumb.activeSelectionForeground#ffb000
• breadcrumb.background#120705
• breadcrumb.focusForeground#fff0c2
• breadcrumb.foreground#c07847
• button.background#ffb000
• button.foreground#120705
• button.hoverBackground#ffe066
• button.secondaryBackground#451707
• button.secondaryForeground#fff0c2
• button.secondaryHoverBackground#81280d
• checkbox.background#120705
• checkbox.border#81280d
• checkbox.foreground#fff0c2
• descriptionForeground#c07847
• diffEditor.border#81280d
• diffEditor.insertedTextBackground#ffd16622
• diffEditor.removedTextBackground#ff3b3022
• disabledForeground#c07847
• dropdown.background#120705
• dropdown.border#81280d
• dropdown.foreground#fff0c2
• editor.background#120705
• editor.findMatchBackground#ffe06666
• editor.findMatchHighlightBackground#ffb00033
• editor.findRangeHighlightBackground#ff4d0022
• editor.foreground#fff0c2
• editor.hoverHighlightBackground#ffb00018
• editor.inactiveSelectionBackground#ffb00022
• editor.lineHighlightBackground#210c06
• editor.lineHighlightBorder#81280d
• editor.selectionBackground#ffb00044
• editor.selectionHighlightBackground#ff4d0033
• editor.wordHighlightBackground#ffb00022
• editor.wordHighlightStrongBackground#ff4d0022
• editorBracketMatch.background#ffb00022
• editorBracketMatch.border#ffb000
• editorCursor.foreground#ffb000
• editorGroup.border#81280d
• editorGroupHeader.tabsBackground#210c06
• editorGroupHeader.tabsBorder#81280d
• editorGutter.addedBackground#ffd166
• editorGutter.background#120705
• editorGutter.deletedBackground#ff3b30
• editorGutter.modifiedBackground#ffe066
• editorHoverWidget.background#190905
• editorHoverWidget.border#81280d
• editorHoverWidget.foreground#fff0c2
• editorIndentGuide.activeBackground1#ffb000
• editorIndentGuide.background1#81280d
• editorLineNumber.activeForeground#ffb000
• editorLineNumber.foreground#c07847
• editorOverviewRuler.addedForeground#ffd166
• editorOverviewRuler.border#120705
• editorOverviewRuler.deletedForeground#ff3b30
• editorOverviewRuler.errorForeground#ff3b30
• editorOverviewRuler.infoForeground#ffb000
• editorOverviewRuler.modifiedForeground#ffe066
• editorOverviewRuler.warningForeground#ffe066
• editorRuler.foreground#81280d
• editorSuggestWidget.background#190905
• editorSuggestWidget.border#81280d
• editorSuggestWidget.foreground#fff0c2
• editorSuggestWidget.highlightForeground#ffb000
• editorSuggestWidget.selectedBackground#451707
• editorWhitespace.foreground#81280d
• errorForeground#ff3b30
• focusBorder#ffb000
• foreground#fff0c2
• gitDecoration.addedResourceForeground#ffd166
• gitDecoration.conflictingResourceForeground#ff4d00
• gitDecoration.deletedResourceForeground#ff3b30
• gitDecoration.ignoredResourceForeground#c07847
• gitDecoration.modifiedResourceForeground#ffe066
• gitDecoration.untrackedResourceForeground#ffd166
• icon.foreground#fff0c2
• input.background#120705
• input.border#81280d
• input.foreground#fff0c2
• input.placeholderForeground#c07847
• inputOption.activeBackground#ffb00022
• inputOption.activeBorder#ffb000
• inputValidation.errorBackground#210c06
• inputValidation.errorBorder#ff3b30
• inputValidation.infoBackground#210c06
• inputValidation.infoBorder#ffb000
• inputValidation.warningBackground#210c06
• inputValidation.warningBorder#ffe066
• list.activeSelectionBackground#451707
• list.activeSelectionForeground#fff0c2
• list.focusOutline#ffb000
• list.highlightForeground#ffb000
• list.hoverBackground#210c06
• list.inactiveSelectionBackground#210c06
• list.inactiveSelectionForeground#fff0c2
• menu.background#190905
• menu.foreground#fff0c2
• menu.selectionBackground#451707
• menu.selectionForeground#fff0c2
• menu.separatorBackground#81280d
• minimap.background#120705
• minimap.errorHighlight#ff3b30
• minimap.findMatchHighlight#ffe066
• minimap.selectionHighlight#ffb00070
• minimap.warningHighlight#ffe066
• notificationCenter.border#81280d
• notificationCenterHeader.background#451707
• notificationCenterHeader.foreground#fff0c2
• notifications.background#190905
• notifications.border#81280d
• notifications.foreground#fff0c2
• notificationToast.border#81280d
• panel.background#190905
• panel.border#81280d
• panel.foreground#fff0c2
• panelTitle.activeBorder#ffb000
• panelTitle.activeForeground#fff0c2
• panelTitle.inactiveForeground#c07847
• peekView.border#ffb000
• peekViewEditor.background#120705
• peekViewResult.background#190905
• peekViewTitle.background#451707
• peekViewTitleDescription.foreground#c07847
• peekViewTitleLabel.foreground#fff0c2
• pickerGroup.border#81280d
• pickerGroup.foreground#ffb000
• progressBar.background#ffb000
• quickInput.background#190905
• quickInput.foreground#fff0c2
• quickInputList.focusBackground#451707
• quickInputList.focusForeground#fff0c2
• quickInputTitle.background#451707
• sash.hoverBorder#ffb000
• scrollbarSlider.activeBackground#ffb00088
• scrollbarSlider.background#81280d55
• scrollbarSlider.hoverBackground#ffb00055
• selection.background#ffb00044
• settings.dropdownBackground#120705
• settings.dropdownBorder#81280d
• settings.dropdownForeground#fff0c2
• settings.headerForeground#fff0c2
• settings.modifiedItemIndicator#ffb000
• settings.textInputBackground#120705
• settings.textInputBorder#81280d
• settings.textInputForeground#fff0c2
• sideBar.background#190905
• sideBar.border#81280d
• sideBar.foreground#fff0c2
• sideBarSectionHeader.background#451707
• sideBarSectionHeader.border#81280d
• sideBarSectionHeader.foreground#fff0c2
• sideBarTitle.foreground#fff0c2
• statusBar.background#451707
• statusBar.border#81280d
• statusBar.debuggingBackground#ffb000
• statusBar.debuggingForeground#120705
• statusBar.foreground#fff0c2
• statusBar.noFolderBackground#210c06
• statusBarItem.hoverBackground#81280d
• statusBarItem.remoteBackground#ffb000
• statusBarItem.remoteForeground#120705
• symbolIcon.classForeground#ffcd70
• symbolIcon.functionForeground#ff8a00
• symbolIcon.methodForeground#ff8a00
• symbolIcon.propertyForeground#ffb86b
• symbolIcon.variableForeground#fff0c2
• tab.activeBackground#120705
• tab.activeBorderTop#ffb000
• tab.activeForeground#fff0c2
• tab.border#81280d
• tab.inactiveBackground#210c06
• tab.inactiveForeground#c07847
• tab.unfocusedActiveBorderTop#c07847
• terminal.ansiBlack#120705
• terminal.ansiBlue#ff8a00
• terminal.ansiBrightBlack#c07847
• terminal.ansiBrightBlue#ff8a00
• terminal.ansiBrightCyan#ffb000
• terminal.ansiBrightGreen#ffd166
• terminal.ansiBrightMagenta#ff4d00
• terminal.ansiBrightRed#ff3b30
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#ffe066
• terminal.ansiCyan#ffb000
• terminal.ansiGreen#ffd166
• terminal.ansiMagenta#ff4d00
• terminal.ansiRed#ff3b30
• terminal.ansiWhite#fff0c2
• terminal.ansiYellow#ffe066
• terminal.background#120705
• terminal.foreground#fff0c2
• textBlockQuote.background#210c06
• textBlockQuote.border#ffb000
• textCodeBlock.background#210c06
• textLink.activeForeground#ffe066
• textLink.foreground#ffb000
• titleBar.activeBackground#210c06
• titleBar.activeForeground#fff0c2
• titleBar.border#81280d
• titleBar.inactiveBackground#190905
• titleBar.inactiveForeground#c07847
• widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).