Sunset Gradient Theme
Publisher: production-sun-setThemes in package: 2
A warm and romantic VS Code theme inspired by beautiful sunset gradients with coral, orange, and purple accents
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.activeBackground#ff6b6b20
- activityBar.activeBorder#ff6b6b
- activityBar.background#241530
- activityBar.foreground#fff3e0
- activityBar.inactiveForeground#8e7cc3
- activityBarBadge.background#ffa726
- activityBarBadge.foreground#ffffff
- badge.background#ff6b6b
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#ffa726
- breadcrumb.background#2d1b3d
- breadcrumb.focusForeground#fff3e0
- breadcrumb.foreground#b39ddb
- breadcrumbPicker.background#3d2a4d
- button.background#ff6b6b
- button.foreground#ffffff
- button.hoverBackground#ff8a80
- button.secondaryBackground#ab47bc
- button.secondaryForeground#ffffff
- button.secondaryHoverBackground#ce93d8
- diffEditor.insertedTextBackground#66bb6a20
- diffEditor.removedTextBackground#ff6b6b20
- dropdown.background#3d2a4d
- dropdown.border#5a4070
- dropdown.foreground#fff3e0
- editor.background#2d1b3d
- editor.findMatchBackground#ffa72660
- editor.findMatchHighlightBackground#ffa72630
- editor.findRangeHighlightBackground#ab47bc20
- editor.foldBackground#ab47bc20
- editor.foreground#fff3e0
- editor.hoverHighlightBackground#5a407020
- editor.lineHighlightBackground#3d2a4d20
- editor.lineHighlightBorder#5a407040
- editor.rangeHighlightBackground#ff6b6b20
- editor.selectionBackground#ff6b6b30
- editor.selectionHighlightBackground#ffa72620
- editor.wordHighlightBackground#ffa72630
- editor.wordHighlightStrongBackground#ff6b6b30
- editorBracketHighlight.foreground1#ff6b6b
- editorBracketHighlight.foreground2#ffa726
- editorBracketHighlight.foreground3#ab47bc
- editorBracketHighlight.foreground4#42a5f5
- editorBracketHighlight.foreground5#66bb6a
- editorBracketHighlight.foreground6#26c6da
- editorBracketHighlight.unexpectedBracket.foreground#ff5252
- editorError.foreground#ff5252
- editorGroup.border#5a4070
- editorGroup.dropBackground#ab47bc40
- editorGroupHeader.tabsBackground#241530
- editorGutter.addedBackground#66bb6a
- editorGutter.deletedBackground#ff6b6b
- editorGutter.modifiedBackground#ffa726
- editorHoverWidget.background#3d2a4d
- editorHoverWidget.border#5a4070
- editorInfo.foreground#42a5f5
- editorLineNumber.activeForeground#ffa726
- editorLineNumber.foreground#8e7cc3
- editorLink.activeForeground#42a5f5
- editorOverviewRuler.addedForeground#66bb6a
- editorOverviewRuler.border#5a4070
- editorOverviewRuler.deletedForeground#ff6b6b
- editorOverviewRuler.errorForeground#ff5252
- editorOverviewRuler.infoForeground#42a5f5
- editorOverviewRuler.modifiedForeground#ffa726
- editorOverviewRuler.selectionHighlightForeground#ff6b6b80
- editorOverviewRuler.warningForeground#ffa726
- editorOverviewRuler.wordHighlightForeground#ffa72680
- editorOverviewRuler.wordHighlightStrongForeground#ff6b6b80
- editorSuggestWidget.background#3d2a4d
- editorSuggestWidget.foreground#fff3e0
- editorSuggestWidget.selectedBackground#ff6b6b30
- editorWarning.foreground#ffa726
- editorWidget.background#3d2a4d
- editorWidget.border#5a4070
- errorForeground#ff5252
- focusBorder#ff6b6b
- foreground#fff3e0
- gitDecoration.conflictingResourceForeground#ab47bc
- gitDecoration.deletedResourceForeground#ff6b6b
- gitDecoration.ignoredResourceForeground#8e7cc3
- gitDecoration.modifiedResourceForeground#ffa726
- gitDecoration.untrackedResourceForeground#66bb6a
- input.background#3d2a4d
- input.border#5a4070
- input.foreground#fff3e0
- input.placeholderForeground#b39ddb
- inputOption.activeBorder#ffa726
- inputValidation.errorBorder#ff6b6b
- inputValidation.infoBorder#42a5f5
- inputValidation.warningBorder#ffa726
- list.activeSelectionBackground#ff6b6b30
- list.activeSelectionForeground#fff3e0
- list.dropBackground#ab47bc40
- list.errorForeground#ff6b6b
- list.focusBackground#ff6b6b20
- list.highlightForeground#ffa726
- list.hoverBackground#5a407020
- list.inactiveSelectionBackground#5a407030
- list.warningForeground#ffa726
- panel.background#2a1a3a
- panel.border#5a4070
- panelTitle.activeBorder#ff6b6b
- panelTitle.activeForeground#fff3e0
- panelTitle.inactiveForeground#b39ddb
- progressBar.background#ffa726
- selection.background#ff6b6b40
- settings.checkboxBackground#3d2a4d
- settings.checkboxBorder#5a4070
- settings.checkboxForeground#fff3e0
- settings.dropdownBackground#3d2a4d
- settings.dropdownBorder#5a4070
- settings.dropdownForeground#fff3e0
- settings.headerForeground#fff3e0
- settings.modifiedItemIndicator#ffa726
- settings.numberInputBackground#3d2a4d
- settings.numberInputBorder#5a4070
- settings.numberInputForeground#fff3e0
- settings.textInputBackground#3d2a4d
- settings.textInputBorder#5a4070
- settings.textInputForeground#fff3e0
- sideBar.background#2a1a3a
- sideBarSectionHeader.background#3d2a4d
- sideBarSectionHeader.border#5a4070
- sideBarTitle.foreground#fff3e0
- statusBar.background#241530
- statusBar.debuggingBackground#ab47bc
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#fff3e0
- statusBar.noFolderBackground#2d1b3d
- statusBar.noFolderForeground#b39ddb
- statusBarItem.prominentBackground#ff6b6b
- statusBarItem.prominentHoverBackground#ff8a80
- statusBarItem.remoteBackground#ffa726
- statusBarItem.remoteForeground#ffffff
- tab.activeBackground#2d1b3d
- tab.activeBorderTop#ff6b6b
- tab.activeForeground#fff3e0
- tab.border#5a4070
- tab.hoverBackground#3d2a4d
- tab.inactiveBackground#241530
- tab.inactiveForeground#b39ddb
- terminal.ansiBlack#1a0f1f
- terminal.ansiBlue#42a5f5
- terminal.ansiBrightBlack#4a2c5a
- terminal.ansiBrightBlue#64b5f6
- terminal.ansiBrightCyan#4dd0e1
- terminal.ansiBrightGreen#81c784
- terminal.ansiBrightMagenta#ce93d8
- terminal.ansiBrightRed#ff8a80
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffcc02
- terminal.ansiCyan#26c6da
- terminal.ansiGreen#66bb6a
- terminal.ansiMagenta#ab47bc
- terminal.ansiRed#ff6b6b
- terminal.ansiWhite#fff3e0
- terminal.ansiYellow#ffa726
- terminal.background#2d1b3d
- terminal.foreground#fff3e0
- titleBar.activeBackground#241530
- titleBar.activeForeground#fff3e0
- titleBar.inactiveBackground#1a0f1f
- titleBar.inactiveForeground#8e7cc3
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| emphasis | — | italic |
| strong | — | bold |
| header | #ff6b6b | — |
| comment, punctuation.definition.comment | #8e7cc3 | italic |
| comment keyword.codetag.notation, comment.block.documentation keyword | #b39ddb | — |
| string | #ffcc02 | — |
| punctuation.definition.string.begin, punctuation.definition.string.end | #ffa726 | — |
| constant, variable.other.constant | #ce93d8 | — |
| constant.numeric | #ab47bc | — |
| keyword, storage.type, storage.modifier | #ff6b6b | bold |
| entity.name.function, meta.function-call | #ffa726 | — |
| variable.parameter | #ffcc02 | italic |
| entity.name.type.class, entity.name.class | #42a5f5 | — |
| entity.name.type, storage.type | #64b5f6 | italic |
| variable | #fff3e0 | — |
| variable.language | #ff8a80 | italic |
| entity.name.tag | #ff6b6b | — |
| entity.other.attribute-name | #ffa726 | italic |
| meta.selector | #42a5f5 | — |
| support.type.property-name | #26c6da | — |
| keyword.operator | #ff8a80 | — |
| punctuation | #b39ddb | — |
| string.regexp | #66bb6a | — |
| markup.heading | #ff6b6b | bold |
| markup.bold | #ffa726 | bold |
| markup.italic | #ab47bc | italic |
| markup.underline.link | #42a5f5 | — |
| markup.inline.raw | #ffcc02 | — |
| invalid | #ff5252 | underline |
| invalid.deprecated | #8e7cc3 | strikethrough |