Warm Sunset Theme

Name: Warm Sunset Theme
Author: entro314.labs

Publisher: entro314.labsThemes in package: 2

A beautiful theme with warm and cozy colors for both light and dark environments

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Warm Sunset Theme — Warm Sunset - Dark

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#342D34
activityBar.activeBorder#FA906E
activityBar.background#2A2023
activityBar.border#403A40
activityBar.foreground#C6D0F5
activityBar.inactiveForeground#B5A9AF
activityBarBadge.background#FA906E
activityBarBadge.foreground#2A2023
badge.background#FA906E
badge.foreground#2A2023
breadcrumb.activeSelectionForeground#FA906E
breadcrumb.focusForeground#C6D0F5
breadcrumb.foreground#B5A9AF
breadcrumbPicker.background#342D34
button.background#FA906E
button.foreground#2A2023
button.hoverBackground#FA906EC0
button.secondaryBackground#342D34
button.secondaryForeground#C6D0F5
button.secondaryHoverBackground#403A40
checkbox.background#342D34
checkbox.border#403A40
checkbox.foreground#FA906E
debugExceptionWidget.background#E7828420
debugExceptionWidget.border#E78284
debugIcon.continueForeground#A6D18C
debugIcon.disconnectForeground#E78284
debugIcon.pauseForeground#E5C890
debugIcon.restartForeground#A6D18C
debugIcon.startForeground#A6D18C
debugIcon.stepBackForeground#E5C890
debugIcon.stepIntoForeground#E5C890
debugIcon.stepOutForeground#E5C890
debugIcon.stepOverForeground#E5C890
debugIcon.stopForeground#E78284
debugToolBar.background#342D34
descriptionForeground#B5A9AF
diffEditor.insertedTextBackground#A6D18C20
diffEditor.removedTextBackground#E7828420
editor.background#2A2023
editor.findMatchBackground#F5BC5E80
editor.findMatchHighlightBackground#F5BC5E40
editor.foreground#C6D0F5
editor.hoverHighlightBackground#403a4078
editor.lineHighlightBackground#342D34
editor.lineHighlightBorder#342D34
editor.selectionBackground#626880
editor.selectionHighlightBackground#62688080
editor.wordHighlightBackground#403a4084
editor.wordHighlightStrongBackground#403a406e
editorBracketMatch.background#FA906E40
editorBracketMatch.border#FA906E40
editorCodeLens.foreground#B5A9AF
editorCursor.foreground#FA906E
editorError.foreground#E78284
editorGroup.border#403A40
editorGroup.dropBackground#403A4080
editorGroupHeader.tabsBackground#342D34
editorGroupHeader.tabsBorder#403A40
editorHoverWidget.background#342D34
editorHoverWidget.border#403A40
editorIndentGuide.activeBackground1#FA906E40
editorIndentGuide.background1#403A40
editorInfo.foreground#FA906E
editorLineNumber.activeForeground#FA906E
editorLineNumber.foreground#B5A9AF
editorLink.activeForeground#F594C1
editorMarkerNavigation.background#342D34
editorMarkerNavigationError.background#E7828440
editorMarkerNavigationInfo.background#FA906E40
editorMarkerNavigationWarning.background#E5C89040
editorOverviewRuler.border#403A40
editorRuler.foreground#403A40
editorSuggestWidget.background#342D34
editorSuggestWidget.border#403A40
editorSuggestWidget.foreground#C6D0F5
editorSuggestWidget.highlightForeground#FA906E
editorSuggestWidget.selectedBackground#403A40
editorWarning.border#00000000
editorWarning.foreground#E5C890
editorWidget.background#342D34
editorWidget.border#403A40
extensionButton.prominentBackground#FA906E
extensionButton.prominentForeground#2A2023
extensionButton.prominentHoverBackground#FA906EC0
focusBorder#FA906E
foreground#C6D0F5
gitDecoration.conflictingResourceForeground#E5C890
gitDecoration.deletedResourceForeground#E78284
gitDecoration.ignoredResourceForeground#B5A9AF80
gitDecoration.modifiedResourceForeground#F5BC5E
gitDecoration.untrackedResourceForeground#A6D18C
input.background#342D34
input.border#403A40
input.foreground#C6D0F5
input.placeholderForeground#B5A9AF
inputOption.activeBackground#FA906E20
inputOption.activeBorder#FA906E
inputValidation.errorBackground#E7828420
inputValidation.errorBorder#E78284
inputValidation.infoBackground#FA906E20
inputValidation.infoBorder#FA906E
inputValidation.warningBackground#E5C89020
inputValidation.warningBorder#E5C890
list.activeSelectionBackground#403A40
list.activeSelectionForeground#C6D0F5
list.dropBackground#403A4080
list.errorForeground#E78284
list.focusBackground#403A40
list.focusForeground#C6D0F5
list.highlightForeground#FA906E
list.hoverBackground#342D34
list.hoverForeground#C6D0F5
list.inactiveSelectionBackground#342D34
list.inactiveSelectionForeground#C6D0F5
list.warningForeground#E5C890
listFilterWidget.background#342D34
listFilterWidget.noMatchesOutline#E78284
listFilterWidget.outline#FA906E
menu.separatorBackground#403A40
notificationCenter.border#403A40
notificationCenterHeader.background#403A40
notificationCenterHeader.foreground#C6D0F5
notificationLink.foreground#F594C1
notifications.background#342D34
notifications.border#403A40
notifications.foreground#C6D0F5
notificationToast.border#403A40
panel.background#342D34
panel.border#403A40
panelTitle.activeBorder#FA906E
panelTitle.activeForeground#C6D0F5
panelTitle.inactiveForeground#B5A9AF
peekView.border#FA906E
peekViewEditor.background#342D34
peekViewEditor.matchHighlightBackground#F5BC5E40
peekViewResult.background#342D34
peekViewResult.fileForeground#C6D0F5
peekViewResult.lineForeground#B5A9AF
peekViewResult.matchHighlightBackground#F5BC5E40
peekViewResult.selectionBackground#403A40
peekViewResult.selectionForeground#C6D0F5
peekViewTitle.background#403A40
peekViewTitleDescription.foreground#B5A9AF
peekViewTitleLabel.foreground#C6D0F5
pickerGroup.border#403A40
pickerGroup.foreground#B5A9AF
progressBar.background#FA906E
sash.hoverBorder#FA906E
scrollbar.shadow#1A171A
scrollbarSlider.activeBackground#403A40C0
scrollbarSlider.background#403A4080
scrollbarSlider.hoverBackground#403A40A0
selection.background#626880
settings.checkboxBackground#342D34
settings.checkboxBorder#403A40
settings.checkboxForeground#C6D0F5
settings.dropdownBackground#342D34
settings.dropdownBorder#403A40
settings.dropdownForeground#C6D0F5
settings.dropdownListBorder#403A40
settings.headerForeground#C6D0F5
settings.modifiedItemIndicator#FA906E
settings.numberInputBackground#342D34
settings.numberInputBorder#403A40
settings.numberInputForeground#C6D0F5
settings.textInputBackground#342D34
settings.textInputBorder#403A40
settings.textInputForeground#C6D0F5
sideBar.background#342D34
sideBar.border#403A40
sideBar.foreground#C6D0F5
sideBarSectionHeader.background#403A40
sideBarSectionHeader.border#403A40
sideBarSectionHeader.foreground#C6D0F5
sideBarTitle.foreground#C6D0F5
statusBar.background#342D34
statusBar.border#342D34
statusBar.debuggingBackground#E5C890
statusBar.debuggingForeground#2A2023
statusBar.foreground#C6D0F5
statusBar.noFolderBackground#F5BC5E
statusBar.noFolderForeground#2A2023
statusBarItem.activeBackground#FA906EC0
statusBarItem.hoverBackground#FA906E80
statusBarItem.prominentBackground#E5C890
statusBarItem.prominentHoverBackground#E5C890C0
tab.activeBackground#2A2023
tab.activeBorder#FA906E
tab.activeBorderTop#00000000
tab.activeForeground#C6D0F5
tab.activeModifiedBorder#E5C890
tab.border#403A40
tab.inactiveBackground#342D34
tab.inactiveForeground#B5A9AF
tab.inactiveModifiedBorder#E5C89080
tab.unfocusedActiveBorder#FA906E80
tab.unfocusedActiveBorderTop#00000000
tab.unfocusedActiveModifiedBorder#E5C89080
tab.unfocusedInactiveModifiedBorder#E5C89040
terminal.ansiBlack#2A2023
terminal.ansiBlue#8CAAEE
terminal.ansiBrightBlack#B5A9AF
terminal.ansiBrightBlue#8CAAEE
terminal.ansiBrightCyan#89DCEB
terminal.ansiBrightGreen#A6D18C
terminal.ansiBrightMagenta#F594C1
terminal.ansiBrightRed#E78284
terminal.ansiBrightWhite#C6D0F5
terminal.ansiBrightYellow#F5BC5E
terminal.ansiCyan#89DCEB
terminal.ansiGreen#A6D18C
terminal.ansiMagenta#F594C1
terminal.ansiRed#E78284
terminal.ansiWhite#C6D0F5
terminal.ansiYellow#E5C890
terminal.background#2A2023
terminal.foreground#C6D0F5
terminalCursor.background#C6D0F5
terminalCursor.foreground#FA906E
textBlockQuote.background#342D34
textBlockQuote.border#FA906E
textCodeBlock.background#342D34
textLink.activeForeground#F594C1
textLink.foreground#F594C1
textPreformat.foreground#C6D0F5
textSeparator.foreground#403A40
titleBar.activeBackground#342D34
titleBar.activeForeground#C6D0F5
titleBar.border#342D34
titleBar.inactiveBackground#342D3480
titleBar.inactiveForeground#B5A9AF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#B5A9AF	italic
variable, string constant.other.placeholder	#C6D0F5	—
constant.other.color	#F5BC5E	—
invalid, invalid.illegal	#E78284	—
keyword, storage.type, storage.modifier	#F594C1	—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#8CAAEE	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#E78284	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#8CAAEE	—
meta.block variable.other	#C6D0F5	—
support.other.variable, string.other.link	#E78284	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#F5BC5E	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#A6D18C	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#E5C890	—
support.type	#89DCEB	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#89DCEB	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#E78284	—
variable.language	#E78284	italic
entity.name.method.js	#8CAAEE	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#8CAAEE	—
entity.other.attribute-name	#FA906E	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#E5C890	italic
entity.other.attribute-name.class	#E5C890	—
source.sass keyword.control	#8CAAEE	—
markup.inserted	#A6D18C	—
markup.deleted	#E78284	—
markup.changed	#F594C1	—
string.regexp	#89DCEB	—
constant.character.escape	#89DCEB	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#8CAAEE	italic
source.js constant.other.object.key.js string.unquoted.label.js	#E78284	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#FA906E	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#E5C890	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F594C1	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8CAAEE	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#89DCEB	—
text.html.markdown, punctuation.definition.list_item.markdown	#C6D0F5	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#FA906E	bold
markup.quote	#B5A9AF	italic
string.other.link.title.markdown	#8CAAEE	—
string.other.link.description.title.markdown	#F594C1	—
constant.other.reference.link.markdown	#E5C890	—
markup.raw.block	#F594C1	—
markup.raw.block.fenced.markdown	#FFFFFF50	—
punctuation.definition.fenced.markdown	#FFFFFF50	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#C6D0F5	—
variable.language.fenced.markdown	#B5A9AF	—
meta.separator	#B5A9AF	—
markup.table	#C6D0F5	—
text.html.markdown punctuation.definition.list_item.markdown	#FA906E	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}