Pastel Underwater Sun

Name: Pastel Underwater Sun
Author: Irislucent

Publisher: IrislucentThemes in package: 1

A tranquil and low-contrast Morandi-style color theme that infuses soft light and colors into the coding experience.

Open in VS Code GitHub

VS Code preview

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

Pastel Underwater Sun — Pastel Underwater Sun

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#eeddec
activityBar.activeBorder#83577D
activityBar.background#F5F0EC
activityBar.border#F5F0EC
activityBar.dropBorder#DDDBD8
activityBar.foreground#605a52
activityBar.inactiveForeground#9E9A95
activityBarBadge.background#7686A9
activityBarBadge.foreground#F7F5F2
badge.background#DDDBD8
badge.foreground#605a52
banner.background#556995
banner.foreground#F7F5F2
banner.iconForeground#EBECEF
breadcrumb.activeSelectionForeground#83577D
breadcrumb.background#F7F5F2
breadcrumb.focusForeground#706A63
breadcrumb.foreground#8F8A84
button.background#556995
button.foreground#F7F5F2
button.hoverBackground#66789F
button.secondaryBackground#83577De0
button.secondaryForeground#F5F0EC
button.secondaryHoverBackground#8F6789e0
checkbox.background#F7F5F2
checkbox.border#7F7A73
checkbox.foreground#83577D
debugExceptionWidget.background#F7F5F2
debugExceptionWidget.border#DDDBD8
debugToolBar.background#F5F0EC
debugToolBar.border#F5F0EC
descriptionForeground#605a52
diffEditor.border#DDDBD8
diffEditor.diagonalFill#DDDBD8
diffEditor.insertedTextBackground#D3D5C533
diffEditor.removedTextBackground#D0B9B633
dropdown.background#F7F5F2
dropdown.border#9E9A95
dropdown.foreground#605a52
editor.background#F7F5F2
editor.findMatchBackground#7b94e1d0
editor.findMatchBorder#55699544
editor.findMatchHighlightBackground#7b94e150
editor.findMatchHighlightBorder#55599544
editor.findRangeHighlightBackground#7b94e150
editor.foldBackground#F5F0EC
editor.foreground#605a52
editor.hoverHighlightBackground#5569951d
editor.inactiveSelectionBackground#BEBBB633
editor.lineHighlightBackground#61918310
editor.linkedEditingBackground#F5F0EC
editor.rangeHighlightBackground#F0EBED33
editor.rangeHighlightBorder#F0EBED33
editor.selectionHighlightBackground#83577D22
editor.selectionHighlightBorder#E4DAE022
editor.symbolHighlightBackground#83577D22
editor.symbolHighlightBorder#83577D44
editor.wordHighlightBackground#83577D22
editor.wordHighlightStrongBackground#83577D22
editor.wordHighlightStrongBorder#83577D44
editorBracketHighlight.foreground1#ab5bb8e0
editorBracketHighlight.foreground2#cd8238e0
editorBracketHighlight.foreground3#609cc2e0
editorBracketHighlight.foreground4#57ac40e0
editorBracketHighlight.foreground5#36ada1e0
editorBracketHighlight.foreground6#ab6862e0
editorBracketMatch.background#daf3a0e0
editorBracketMatch.border#DDDBD8
editorCodeLens.foreground#9E9A95
editorCursor.background#F7F5F2
editorCursor.foreground#8795B3
editorError.foreground#8F5652
editorGhostText.foreground#BEBBB6
editorGroup.border#CDCBC7
editorGroup.dropBackground#CCB9C744
editorGroup.emptyBackground#F7F5F2
editorGroupHeader.noTabsBackground#F5F0EC
editorGroupHeader.tabsBackground#ECEBE8
editorGutter.addedBackground#AAAE92
editorGutter.background#F7F5F2
editorGutter.commentRangeForeground#7F7A73
editorGutter.deletedBackground#C6A9A6
editorGutter.foldingControlForeground#9E9A95
editorGutter.modifiedBackground#A9B2C7
editorHint.border#BEBBB6
editorHint.foreground#7F7A73
editorHoverWidget.background#F5F0EC
editorHoverWidget.border#BEBBB6
editorHoverWidget.foreground#605a52
editorIndentGuide.activeBackground#DDDBD8
editorIndentGuide.background#ECEBE8
editorInfo.foreground#556995
editorInlayHint.background#F5F0EC
editorInlayHint.foreground#7F7A73
editorLineNumber.activeForeground#8F8A84
editorLineNumber.foreground#CDCBC7
editorLink.activeForeground#556995
editorMarkerNavigation.background#F7F5F2
editorMarkerNavigationError.background#E6DAD8
editorMarkerNavigationInfo.background#DBDEE5
editorMarkerNavigationWarning.background#E5DED5
editorOverviewRuler.addedForeground#749B4D44
editorOverviewRuler.background#F5F0EC
editorOverviewRuler.border#ECEBE8
editorOverviewRuler.bracketMatchForeground#7F7A7388
editorOverviewRuler.currentContentForeground#477A7B44
editorOverviewRuler.deletedForeground#8F565244
editorOverviewRuler.errorForeground#8F5652dd
editorOverviewRuler.findMatchForeground#83577D88
editorOverviewRuler.incomingContentForeground#55699544
editorOverviewRuler.infoForeground#556995dd
editorOverviewRuler.modifiedForeground#55699544
editorOverviewRuler.rangeHighlightForeground#886A4488
editorOverviewRuler.selectionHighlightForeground#83577D88
editorOverviewRuler.warningForeground#886A44dd
editorOverviewRuler.wordHighlightForeground#477A7B88
editorOverviewRuler.wordHighlightStrongForeground#477A7B88
editorPane.background#F5F0EC
editorRuler.foreground#DDDBD8
editorSuggestWidget.background#F7F5F2
editorSuggestWidget.border#DDDBD8
editorSuggestWidget.focusHighlightForeground#F0EBED
editorSuggestWidget.foreground#605a52
editorSuggestWidget.highlightForeground#9B7896
editorSuggestWidget.selectedBackground#9B7896
editorSuggestWidget.selectedForeground#F7F5F2
editorSuggestWidget.selectedIconForeground#F0EBED
editorWarning.foreground#5aa19ce0
editorWhitespace.foreground#BEBBB6
editorWidget.background#F7F5F2
editorWidget.border#DDDBD8
editorWidget.foreground#605a52
editorWidget.resizeBorder#CDCBC7
errorForeground#8F5652
focusBorder#9B7896
foreground#605a52
gitDecoration.addedResourceForeground#749B4De0
gitDecoration.conflictingResourceForeground#5aa19ce0
gitDecoration.deletedResourceForeground#c03f36e0
gitDecoration.ignoredResourceForeground#886A44
gitDecoration.modifiedResourceForeground#556995
gitDecoration.stageDeletedResourceForeground#8F5652
gitDecoration.stageModifiedResourceForeground#556995
gitDecoration.submoduleResourceForeground#886A44
gitDecoration.untrackedResourceForeground#605a52
icon.foreground#605a52
input.background#F7F5F2
input.border#7F7A73
input.foreground#605a52
input.placeholderForeground#9E9A95
inputOption.activeBackground#DBDEE5
inputOption.activeBorder#DBDEE5
inputOption.activeForeground#605a52
inputValidation.errorBackground#A57773
inputValidation.errorBorder#8F5652
inputValidation.errorForeground#F7F5F2
inputValidation.infoBackground#7686A9
inputValidation.infoBorder#556995
inputValidation.infoForeground#F7F5F2
inputValidation.warningBackground#9F8768
inputValidation.warningBorder#886A44
inputValidation.warningForeground#F7F5F2
list.activeSelectionBackground#b08cabe0
list.activeSelectionForeground#F7F5F2
list.activeSelectionIconForeground#ECEBE8
list.dropBackground#DBDEE5
list.errorForground#8F5652
list.focusBackground#E4DAE0
list.focusForeground#605a52
list.focusHighlightForeground#E4DAE0
list.highlightForeground#8F6789
list.hoverBackground#F0EBED
list.hoverForeground#605a52
list.inactiveSelectionBackground#bfa1bae0
list.inactiveSelectionForeground#F7F5F2
list.inactiveSelectionIconForeground#BEBBB6
list.warningForeground#886A44
listFilterWidget.background#F7F5F2
listFilterWidget.noMatchesOutline#A57773
listFilterWidget.outline#9B7896
menu.background#F5F0EC
menu.border#BEBBB6
menu.foreground#605a52
menu.selectionBackground#83577D80
menu.selectionBorder#83577D70
menu.selectionForeground#605a52
menu.separatorBackground#BEBBB6
menubar.selectionBackground#F5F0EC
menubar.selectionForeground#605a52
merge.commonContentBackground#9F876811
merge.commonHeaderBackground#9F876828
merge.currentContentBackground#477A7B11
merge.currentHeaderBackground#477A7B28
merge.incomingContentBackground#55699511
merge.incomingHeaderBackground#55699528
minimap.background#F7F5F2
minimap.errorHighlight#A57773
minimap.findMatchHighlight#BEBBB6
minimap.selectionHighlight#E4DAE0
minimap.warningHighlight#9F8768
minimapGutter.addedBackground#9DA181
minimapGutter.deletedBackground#B08884
minimapGutter.modifiedBackground#8795B3
minimapSlider.background#6c655c25
minimapSlider.hoverBackground#342d2335
notificationCenter.border#ECEBE8
notificationCenterHeader.background#F5F0EC
notificationCenterHeader.foreground#605a52
notifications.background#F5F0EC
notifications.border#ECEBE8
notifications.foreground#605a52
notificationsErrorIcon.foreground#8F5652
notificationsInfoIcon.foreground#556995
notificationsWarningIcon.foreground#886A44
notificationToast.border#DDDBD8
panel.background#F5F0EC
panel.border#DDDBD8
panel.dropBorder#BEBBB6
panelSection.border#BEBBB6
panelSectionHeader.background#F0EDE7
panelTitle.activeBorder#9E9A95
panelTitle.activeForeground#565149
panelTitle.inactiveForeground#817d78
peekView.border#B9C1D1
peekViewEditor.background#F5F0EC
peekViewEditor.matchHighlightBackground#55699522
peekViewEditor.matchHighlightBorder#55699528
peekViewEditorGutter.background#F5F0EC
peekViewResult.background#F5F0EC
peekViewResult.fileForeground#605a52
peekViewResult.lineForeground#9E9A95
peekViewResult.matchHighlightBackground#83577D1d
peekViewResult.selectionBackground#83577D22
peekViewResult.selectionForeground#605a52
peekViewTitle.background#F5F0EC
peekViewTitleDescription.foreground#556995
peekViewTitleLabel.foreground#605a52
pickerGroup.border#DDDBD8
pickerGroup.foreground#605a52
progressBar.background#9B7896
sash.hoverBorder#9B7896
scrollbar.shadow#CDCBC7
scrollbarSlider.activeBackground#CDCBC7
scrollbarSlider.background#AEABA6
scrollbarSlider.hoverBackground#BEBBB6
searchEditor.findMatchBackground#F0EDE7
searchEditor.findMatchBorder#C2B39F33
searchEditor.textInputBorder#9F8768
selection.background#F0EBED
settings.focusedRowBackground#F5F0EC
settings.headerForeground#605a52
sideBar.background#F5F0EC
sideBar.dropBackground#DBDEE5
sideBar.foreground#605a52
sideBarSectionHeader.background#F5F0EC
sideBarSectionHeader.border#CDCBC7
sideBarSectionHeader.foreground#7F7A73
sideBarTitle.foreground#7F7A73
statusBar.background#789555e0
statusBar.debuggingBackground#ae9b5bd0
statusBar.debuggingForeground#F7F5F2
statusBar.foreground#F7F5F2
statusBar.noFolderBackground#7c8f6ee0
statusBar.noFolderForeground#F7F5F2
statusBarItem.activeBackground#9a9966e0
statusBarItem.errorBackground#d8281b
statusBarItem.errorForeground#E6DAD8
statusBarItem.hoverBackground#5c81b6e0
statusBarItem.remoteBackground#b75076d0
statusBarItem.remoteForeground#F7F5F2
tab.activeBackground#F7F5F2
tab.activeBorder#F7F5F2
tab.activeBorderTop#83577D
tab.activeForeground#605a52
tab.border#ECEBE8
tab.inactiveBackground#F5F0EC
tab.inactiveForeground#8F8A84
tab.lastPinnedBorder#DDDBD8
terminal.ansiBlack#605a52
terminal.ansiBlue#72a9cbe0
terminal.ansiBrightBlack#d69d52
terminal.ansiBrightBlue#7e9fe7
terminal.ansiBrightCyan#49c9c1e0
terminal.ansiBrightGreen#4cdd2fe0
terminal.ansiBrightMagenta#f372e2
terminal.ansiBrightRed#e25e54
terminal.ansiBrightWhite#F7F5F2
terminal.ansiBrightYellow#886A44
terminal.ansiCyan#3f9393e0
terminal.ansiGreen#8fc35a
terminal.ansiMagenta#d98dcee0
terminal.ansiRed#d3756de0
terminal.ansiWhite#F7F5F2
terminal.ansiYellow#b8be4de0
terminal.border#BEBBB6
terminal.foreground#605a52
terminal.selectionBackground#eeddece0
terminalCursor.background#F5F0EC
terminalCursor.foreground#91c951d0
textBlockQuote.background#F5F0EC
textBlockQuote.border#B6A48C
textCodeBlock.background#F5F0EC
textLink.activeForeground#83577D
textLink.foreground#556995
textPreformat.foreground#886A44
textSeparator.foreground#7F7A73
titleBar.activeBackground#F5F0EC
titleBar.activeForeground#9f9c96
titleBar.inactiveBackground#F7F5F2
titleBar.inactiveForeground#BEBBB6
tree.indentGuidesStroke#BEBBB6
tree.tableColumnsBorder#BEBBB6
walkThrough.embeddedEditorBackground#F7F5F2
widget.shadow#CDCBC7
window.activeBorder#83577D
window.inactiveBorder#BEBBB6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9E9A95d0	italic
comment.block.preprocessor	#9E9A95d0
comment.documentation, comment.block.documentation	#9E9A95d0	—
invalid.illegal	—	—
keyword.operator	#8d5093e0	—
keyword, storage	#de6f6fe0	bold
storage.type, support.type	#c981bee0	—
constant.language, support.constant, variable.language	#5aa19cf0	—
variable, support.variable	#605a52	—
variable.parameter.function.language.special.self	#6172b8e0	—
variable.other.property	#605a52	—
entity.name.function, support.function	#605a52	—
entity.name.type, entity.other.inherited-class, support.class	#c98b2fe0	—
entity.name.exception	#605a52	italic bold
entity.name.section	#83577D	bold
constant.numeric, constant.character, constant	#959b4de0	—
string	#749B4De0	—
constant.character.escape	#5aa19ce0	—
string.regexp	#886A44	—
constant.other.symbol	#5aa19ce0	—
punctuation	#bf3d9ae0	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html	#9E9A95	—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#9E9A95	—
entity.name.tag	#83577De0	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#556995	—
constant.character.entity, punctuation.definition.entity	#5aa19ce0	—

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}!`;
}