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 - Light

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#FDE6DE
activityBar.activeBorder#FA906E
activityBar.background#FAF4F2
activityBar.border#EADBCC
activityBar.foreground#384242
activityBar.inactiveForeground#95726A
activityBarBadge.background#FA906E
activityBarBadge.foreground#FAF4F2
badge.background#FA906E
badge.foreground#FAF4F2
breadcrumb.activeSelectionForeground#FA906E
breadcrumb.focusForeground#384242
breadcrumb.foreground#95726A
breadcrumbPicker.background#F5F1EB
button.background#FA906E
button.foreground#FAF4F2
button.hoverBackground#FA906EC0
button.secondaryBackground#F5F1EB
button.secondaryForeground#384242
button.secondaryHoverBackground#EADBCC
checkbox.background#FAF4F2
checkbox.border#EADBCC
checkbox.foreground#FA906E
debugExceptionWidget.background#E0605320
debugExceptionWidget.border#E06053
debugIcon.continueForeground#A6D18C
debugIcon.disconnectForeground#E06053
debugIcon.pauseForeground#F4BC5F
debugIcon.restartForeground#A6D18C
debugIcon.startForeground#A6D18C
debugIcon.stepBackForeground#F4BC5F
debugIcon.stepIntoForeground#F4BC5F
debugIcon.stepOutForeground#F4BC5F
debugIcon.stepOverForeground#F4BC5F
debugIcon.stopForeground#E06053
debugToolBar.background#F5F1EB
descriptionForeground#95726A
diffEditor.insertedTextBackground#A6D18C20
diffEditor.removedTextBackground#E0605320
editor.background#FAF4F2
editor.findMatchBackground#F5BC5E80
editor.findMatchHighlightBackground#F5BC5E40
editor.foreground#384242
editor.hoverHighlightBackground#fde6de58
editor.lineHighlightBackground#F5F1EB
editor.lineHighlightBorder#F5F1EB
editor.selectionBackground#FBD6B9
editor.selectionHighlightBackground#FBD6B980
editor.wordHighlightBackground#fde6de42
editor.wordHighlightStrongBackground#fde6de52
editorBracketMatch.background#FA906E40
editorBracketMatch.border#FA906E40
editorCodeLens.foreground#95726A
editorCursor.foreground#FA906E
editorError.foreground#E06053
editorGroup.border#EADBCC
editorGroup.dropBackground#FDE6DE80
editorGroupHeader.tabsBackground#F5F1EB
editorGroupHeader.tabsBorder#EADBCC
editorHoverWidget.background#F5F1EB
editorHoverWidget.border#EADBCC
editorIndentGuide.activeBackground1#FA906E40
editorIndentGuide.background1#EADBCC
editorInfo.foreground#FA906E
editorLineNumber.activeForeground#FA906E
editorLineNumber.foreground#95726A
editorLink.activeForeground#FA906E
editorMarkerNavigation.background#F5F1EB
editorMarkerNavigationError.background#E0605340
editorMarkerNavigationInfo.background#FA906E40
editorMarkerNavigationWarning.background#F4BC5F40
editorOverviewRuler.border#EADBCC
editorRuler.foreground#EADBCC
editorSuggestWidget.background#F5F1EB
editorSuggestWidget.border#EADBCC
editorSuggestWidget.foreground#384242
editorSuggestWidget.highlightForeground#FA906E
editorSuggestWidget.selectedBackground#FDE6DE
editorWarning.border#00000000
editorWarning.foreground#F4BC5F
editorWidget.background#F5F1EB
editorWidget.border#EADBCC
extensionButton.prominentBackground#FA906E
extensionButton.prominentForeground#FAF4F2
extensionButton.prominentHoverBackground#FA906EC0
focusBorder#FA906E
foreground#384242
gitDecoration.conflictingResourceForeground#F4BC5F
gitDecoration.deletedResourceForeground#E06053
gitDecoration.ignoredResourceForeground#95726A80
gitDecoration.modifiedResourceForeground#F5BC5E
gitDecoration.untrackedResourceForeground#A6D18C
input.background#FAF4F2
input.border#EADBCC
input.foreground#384242
input.placeholderForeground#95726A
inputOption.activeBackground#FA906E20
inputOption.activeBorder#FA906E
inputValidation.errorBackground#E0605320
inputValidation.errorBorder#E06053
inputValidation.infoBackground#FA906E20
inputValidation.infoBorder#FA906E
inputValidation.warningBackground#F4BC5F20
inputValidation.warningBorder#F4BC5F
list.activeSelectionBackground#FDE6DE
list.activeSelectionForeground#384242
list.dropBackground#FDE6DE80
list.errorForeground#E06053
list.focusBackground#FDE6DE
list.focusForeground#384242
list.highlightForeground#FA906E
list.hoverBackground#F5F1EB
list.hoverForeground#384242
list.inactiveSelectionBackground#F5F1EB
list.inactiveSelectionForeground#384242
list.warningForeground#F4BC5F
listFilterWidget.background#FAF4F2
listFilterWidget.noMatchesOutline#E06053
listFilterWidget.outline#FA906E
menu.separatorBackground#EADBCC
notificationCenter.border#EADBCC
notificationCenterHeader.background#FDE6DE
notificationCenterHeader.foreground#384242
notificationLink.foreground#FA906E
notifications.background#F5F1EB
notifications.border#EADBCC
notifications.foreground#384242
notificationToast.border#EADBCC
panel.background#F5F1EB
panel.border#EADBCC
panelTitle.activeBorder#FA906E
panelTitle.activeForeground#384242
panelTitle.inactiveForeground#95726A
peekView.border#FA906E
peekViewEditor.background#F5F1EB
peekViewEditor.matchHighlightBackground#F5BC5E40
peekViewResult.background#F5F1EB
peekViewResult.fileForeground#384242
peekViewResult.lineForeground#95726A
peekViewResult.matchHighlightBackground#F5BC5E40
peekViewResult.selectionBackground#FDE6DE
peekViewResult.selectionForeground#384242
peekViewTitle.background#FDE6DE
peekViewTitleDescription.foreground#95726A
peekViewTitleLabel.foreground#384242
pickerGroup.border#EADBCC
pickerGroup.foreground#95726A
progressBar.background#FA906E
sash.hoverBorder#FA906E
scrollbar.shadow#EADBCC
scrollbarSlider.activeBackground#EADBCCC0
scrollbarSlider.background#EADBCC80
scrollbarSlider.hoverBackground#EADBCCA0
selection.background#FBD6B9
settings.checkboxBackground#FAF4F2
settings.checkboxBorder#EADBCC
settings.checkboxForeground#384242
settings.dropdownBackground#FAF4F2
settings.dropdownBorder#EADBCC
settings.dropdownForeground#384242
settings.dropdownListBorder#EADBCC
settings.headerForeground#384242
settings.modifiedItemIndicator#FA906E
settings.numberInputBackground#FAF4F2
settings.numberInputBorder#EADBCC
settings.numberInputForeground#384242
settings.textInputBackground#FAF4F2
settings.textInputBorder#EADBCC
settings.textInputForeground#384242
sideBar.background#F5F1EB
sideBar.border#EADBCC
sideBar.foreground#384242
sideBarSectionHeader.background#FDE6DE
sideBarSectionHeader.border#EADBCC
sideBarSectionHeader.foreground#384242
sideBarTitle.foreground#384242
statusBar.background#FA906E
statusBar.border#FA906E
statusBar.debuggingBackground#F4BC5F
statusBar.debuggingForeground#FAF4F2
statusBar.foreground#FAF4F2
statusBar.noFolderBackground#F5BC5E
statusBar.noFolderForeground#FAF4F2
statusBarItem.activeBackground#FA906EC0
statusBarItem.hoverBackground#FA906E80
statusBarItem.prominentBackground#F4BC5F
statusBarItem.prominentHoverBackground#F4BC5FC0
tab.activeBackground#FAF4F2
tab.activeBorder#FA906E
tab.activeBorderTop#00000000
tab.activeForeground#384242
tab.activeModifiedBorder#F4BC5F
tab.border#EADBCC
tab.inactiveBackground#F5F1EB
tab.inactiveForeground#95726A
tab.inactiveModifiedBorder#F4BC5F80
tab.unfocusedActiveBorder#FA906E80
tab.unfocusedActiveBorderTop#00000000
tab.unfocusedActiveModifiedBorder#F4BC5F80
tab.unfocusedInactiveModifiedBorder#F4BC5F40
terminal.ansiBlack#384242
terminal.ansiBlue#7B90D4
terminal.ansiBrightBlack#95726A
terminal.ansiBrightBlue#7B90D4
terminal.ansiBrightCyan#6ECAD8
terminal.ansiBrightGreen#A6D18C
terminal.ansiBrightMagenta#C77DBB
terminal.ansiBrightRed#E06053
terminal.ansiBrightWhite#FAF4F2
terminal.ansiBrightYellow#F5BC5E
terminal.ansiCyan#6ECAD8
terminal.ansiGreen#A6D18C
terminal.ansiMagenta#C77DBB
terminal.ansiRed#E06053
terminal.ansiWhite#F5F1EB
terminal.ansiYellow#F4BC5F
terminal.background#FAF4F2
terminal.foreground#384242
terminalCursor.background#384242
terminalCursor.foreground#FA906E
textBlockQuote.background#F5F1EB
textBlockQuote.border#FA906E
textCodeBlock.background#F5F1EB
textLink.activeForeground#FA906E
textLink.foreground#FA906E
textPreformat.foreground#384242
textSeparator.foreground#EADBCC
titleBar.activeBackground#FA906E
titleBar.activeForeground#FAF4F2
titleBar.border#FA906E
titleBar.inactiveBackground#FA906E80
titleBar.inactiveForeground#FAF4F2A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#95726A	italic
variable, string constant.other.placeholder	#384242	—
constant.other.color	#F5BC5E	—
invalid, invalid.illegal	#E06053	—
keyword, storage.type, storage.modifier	#C77DBB	—
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	#7B90D4	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#E06053	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#7B90D4	—
meta.block variable.other	#384242	—
support.other.variable, string.other.link	#E06053	—
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	#F4BC5F	—
support.type	#6ECAD8	—
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	#6ECAD8	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#E06053	—
variable.language	#E06053	italic
entity.name.method.js	#7B90D4	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#7B90D4	—
entity.other.attribute-name	#FA906E	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#F4BC5F	italic
entity.other.attribute-name.class	#F4BC5F	—
source.sass keyword.control	#7B90D4	—
markup.inserted	#A6D18C	—
markup.deleted	#E06053	—
markup.changed	#C77DBB	—
string.regexp	#6ECAD8	—
constant.character.escape	#6ECAD8	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#7B90D4	italic
source.js constant.other.object.key.js string.unquoted.label.js	#E06053	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	#F4BC5F	—
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	#C77DBB	—
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	#7B90D4	—
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	#6ECAD8	—
text.html.markdown, punctuation.definition.list_item.markdown	#384242	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#FA906E	bold
markup.quote	#95726A	italic
string.other.link.title.markdown	#7B90D4	—
string.other.link.description.title.markdown	#C77DBB	—
constant.other.reference.link.markdown	#F4BC5F	—
markup.raw.block	#C77DBB	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#384242	—
variable.language.fenced.markdown	#95726A	—
meta.separator	#95726A	—
markup.table	#384242	—
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}!`;
}