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#3f8f32
• activityBar.background#edf8da
• activityBar.foreground#24351c
• activityBar.inactiveForeground#708a54
• activityBarBadge.background#3f8f32
• activityBarBadge.foreground#fbfff4
• badge.background#3f8f32
• badge.foreground#fbfff4
• breadcrumb.activeSelectionForeground#3f8f32
• breadcrumb.background#fbfff4
• breadcrumb.focusForeground#24351c
• breadcrumb.foreground#708a54
• button.background#3f8f32
• button.foreground#fbfff4
• button.hoverBackground#9a6a00
• button.secondaryBackground#d9f0b8
• button.secondaryForeground#24351c
• button.secondaryHoverBackground#b7d58a
• checkbox.background#fbfff4
• checkbox.border#b7d58a
• checkbox.foreground#24351c
• descriptionForeground#708a54
• diffEditor.border#b7d58a
• diffEditor.insertedTextBackground#4f9a5622
• diffEditor.removedTextBackground#c2410c22
• disabledForeground#708a54
• dropdown.background#fbfff4
• dropdown.border#b7d58a
• dropdown.foreground#24351c
• editor.background#fbfff4
• editor.findMatchBackground#9a6a0055
• editor.findMatchHighlightBackground#3f8f3233
• editor.findRangeHighlightBackground#c74b8222
• editor.foreground#24351c
• editor.hoverHighlightBackground#3f8f3218
• editor.inactiveSelectionBackground#3f8f3222
• editor.lineHighlightBackground#edf8da
• editor.lineHighlightBorder#b7d58a
• editor.selectionBackground#3f8f3233
• editor.selectionHighlightBackground#c74b8222
• editor.wordHighlightBackground#3f8f3222
• editor.wordHighlightStrongBackground#c74b8222
• editorBracketMatch.background#3f8f3222
• editorBracketMatch.border#3f8f32
• editorCursor.foreground#3f8f32
• editorGroup.border#b7d58a
• editorGroupHeader.tabsBackground#edf8da
• editorGroupHeader.tabsBorder#b7d58a
• editorGutter.addedBackground#4f9a56
• editorGutter.background#fbfff4
• editorGutter.deletedBackground#c2410c
• editorGutter.modifiedBackground#9a6a00
• editorHoverWidget.background#f3fbe7
• editorHoverWidget.border#b7d58a
• editorHoverWidget.foreground#24351c
• editorIndentGuide.activeBackground1#3f8f32
• editorIndentGuide.background1#b7d58a66
• editorLineNumber.activeForeground#3f8f32
• editorLineNumber.foreground#708a54
• editorOverviewRuler.addedForeground#4f9a56
• editorOverviewRuler.border#fbfff4
• editorOverviewRuler.deletedForeground#c2410c
• editorOverviewRuler.errorForeground#c2410c
• editorOverviewRuler.infoForeground#3f8f32
• editorOverviewRuler.modifiedForeground#9a6a00
• editorOverviewRuler.warningForeground#9a6a00
• editorRuler.foreground#b7d58a
• editorSuggestWidget.background#f3fbe7
• editorSuggestWidget.border#b7d58a
• editorSuggestWidget.foreground#24351c
• editorSuggestWidget.highlightForeground#3f8f32
• editorSuggestWidget.selectedBackground#d9f0b8
• editorWhitespace.foreground#b7d58a
• errorForeground#c2410c
• focusBorder#3f8f32
• foreground#24351c
• gitDecoration.addedResourceForeground#4f9a56
• gitDecoration.conflictingResourceForeground#c74b82
• gitDecoration.deletedResourceForeground#c2410c
• gitDecoration.ignoredResourceForeground#708a54
• gitDecoration.modifiedResourceForeground#9a6a00
• gitDecoration.untrackedResourceForeground#4f9a56
• icon.foreground#24351c
• input.background#fbfff4
• input.border#b7d58a
• input.foreground#24351c
• input.placeholderForeground#708a54
• inputOption.activeBackground#3f8f3222
• inputOption.activeBorder#3f8f32
• inputValidation.errorBackground#edf8da
• inputValidation.errorBorder#c2410c
• inputValidation.infoBackground#edf8da
• inputValidation.infoBorder#3f8f32
• inputValidation.warningBackground#edf8da
• inputValidation.warningBorder#9a6a00
• list.activeSelectionBackground#d9f0b8
• list.activeSelectionForeground#24351c
• list.focusOutline#3f8f32
• list.highlightForeground#3f8f32
• list.hoverBackground#edf8da
• list.inactiveSelectionBackground#edf8da
• list.inactiveSelectionForeground#24351c
• menu.background#f3fbe7
• menu.foreground#24351c
• menu.selectionBackground#d9f0b8
• menu.selectionForeground#24351c
• menu.separatorBackground#b7d58a
• minimap.background#fbfff4
• minimap.errorHighlight#c2410c
• minimap.findMatchHighlight#9a6a00
• minimap.selectionHighlight#3f8f3270
• minimap.warningHighlight#9a6a00
• notificationCenter.border#b7d58a
• notificationCenterHeader.background#d9f0b8
• notificationCenterHeader.foreground#24351c
• notifications.background#f3fbe7
• notifications.border#b7d58a
• notifications.foreground#24351c
• notificationToast.border#b7d58a
• panel.background#f3fbe7
• panel.border#b7d58a
• panel.foreground#24351c
• panelTitle.activeBorder#3f8f32
• panelTitle.activeForeground#24351c
• panelTitle.inactiveForeground#708a54
• peekView.border#3f8f32
• peekViewEditor.background#fbfff4
• peekViewResult.background#f3fbe7
• peekViewTitle.background#d9f0b8
• peekViewTitleDescription.foreground#708a54
• peekViewTitleLabel.foreground#24351c
• pickerGroup.border#b7d58a
• pickerGroup.foreground#3f8f32
• progressBar.background#3f8f32
• quickInput.background#f3fbe7
• quickInput.foreground#24351c
• quickInputList.focusBackground#d9f0b8
• quickInputList.focusForeground#24351c
• quickInputTitle.background#d9f0b8
• sash.hoverBorder#3f8f32
• scrollbarSlider.activeBackground#3f8f3288
• scrollbarSlider.background#b7d58a66
• scrollbarSlider.hoverBackground#3f8f3255
• selection.background#3f8f3233
• settings.dropdownBackground#fbfff4
• settings.dropdownBorder#b7d58a
• settings.dropdownForeground#24351c
• settings.headerForeground#24351c
• settings.modifiedItemIndicator#3f8f32
• settings.textInputBackground#fbfff4
• settings.textInputBorder#b7d58a
• settings.textInputForeground#24351c
• sideBar.background#f3fbe7
• sideBar.border#b7d58a
• sideBar.foreground#24351c
• sideBarSectionHeader.background#d9f0b8
• sideBarSectionHeader.border#b7d58a
• sideBarSectionHeader.foreground#24351c
• sideBarTitle.foreground#24351c
• statusBar.background#d9f0b8
• statusBar.border#b7d58a
• statusBar.debuggingBackground#3f8f32
• statusBar.debuggingForeground#fbfff4
• statusBar.foreground#24351c
• statusBar.noFolderBackground#edf8da
• statusBarItem.hoverBackground#b7d58a
• statusBarItem.remoteBackground#3f8f32
• statusBarItem.remoteForeground#fbfff4
• symbolIcon.classForeground#6c8fd8
• symbolIcon.functionForeground#2e9d8f
• symbolIcon.methodForeground#2e9d8f
• symbolIcon.propertyForeground#668a32
• symbolIcon.variableForeground#24351c
• tab.activeBackground#fbfff4
• tab.activeBorderTop#3f8f32
• tab.activeForeground#24351c
• tab.border#b7d58a
• tab.inactiveBackground#edf8da
• tab.inactiveForeground#708a54
• tab.unfocusedActiveBorderTop#708a54
• terminal.ansiBlack#fbfff4
• terminal.ansiBlue#2e9d8f
• terminal.ansiBrightBlack#708a54
• terminal.ansiBrightBlue#2e9d8f
• terminal.ansiBrightCyan#3f8f32
• terminal.ansiBrightGreen#4f9a56
• terminal.ansiBrightMagenta#c74b82
• terminal.ansiBrightRed#c2410c
• terminal.ansiBrightWhite#2b1b16
• terminal.ansiBrightYellow#9a6a00
• terminal.ansiCyan#3f8f32
• terminal.ansiGreen#4f9a56
• terminal.ansiMagenta#c74b82
• terminal.ansiRed#c2410c
• terminal.ansiWhite#24351c
• terminal.ansiYellow#9a6a00
• terminal.background#fbfff4
• terminal.foreground#24351c
• textBlockQuote.background#edf8da
• textBlockQuote.border#3f8f32
• textCodeBlock.background#edf8da
• textLink.activeForeground#9a6a00
• textLink.foreground#3f8f32
• titleBar.activeBackground#edf8da
• titleBar.activeForeground#24351c
• titleBar.border#b7d58a
• titleBar.inactiveBackground#f3fbe7
• titleBar.inactiveForeground#708a54
• widget.shadow#70402033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).