Serendipity

Name: Serendipity
Author: Michael Andreuzza

Publisher: Michael AndreuzzaThemes in package: 4

Elegant, minimal, and clean color palette to give your eyes rest on different interfaces.

GitHub

Color themes

VS Code preview

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

Serendipity — Serendipity Midnight

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#DEE0EF
activityBar.background#151726
activityBar.dropBorder#232534
activityBar.foreground#DEE0EF
activityBar.inactiveForeground#8D8F9E
activityBarBadge.background#F8D2C9
activityBarBadge.foreground#151726
badge.background#F8D2C9
badge.foreground#151726
banner.background#1C1E2D
banner.foreground#DEE0EF
banner.iconForeground#8D8F9E
breadcrumb.activeSelectionForeground#F8D2C9
breadcrumb.background#151726
breadcrumb.focusForeground#8D8F9E
breadcrumb.foreground#6B6D7C
breadcrumbPicker.background#1C1E2D
button.background#F8D2C9
button.foreground#151726
button.hoverBackground#F8D2C9e6
button.secondaryBackground#1C1E2D
button.secondaryForeground#DEE0EF
button.secondaryHoverBackground#232534
charts.blue#94b8ff
charts.foreground#DEE0EF
charts.green#5ba2d0
charts.lines#8D8F9E
charts.orange#F8D2C9
charts.purple#9ccfd8
charts.red#ee8679
charts.yellow#a78bfa
checkbox.background#1C1E2D
checkbox.border#6B6D7C33
checkbox.foreground#DEE0EF
debugExceptionWidget.background#1C1E2D
debugExceptionWidget.border#6B6D7C33
debugIcon.breakpointCurrentStackframeForeground#8D8F9E
debugIcon.breakpointDisabledForeground#8D8F9E
debugIcon.breakpointForeground#8D8F9E
debugIcon.breakpointStackframeForeground#8D8F9E
debugIcon.breakpointUnverifiedForeground#8D8F9E
debugIcon.continueForeground#8D8F9E
debugIcon.disconnectForeground#8D8F9E
debugIcon.pauseForeground#8D8F9E
debugIcon.restartForeground#8D8F9E
debugIcon.startForeground#8D8F9E
debugIcon.stepBackForeground#8D8F9E
debugIcon.stepIntoForeground#8D8F9E
debugIcon.stepOutForeground#8D8F9E
debugIcon.stepOverForeground#8D8F9E
debugIcon.stopForeground#ee8679
debugToolBar.background#1C1E2D
debugToolBar.border#232534
descriptionForeground#8D8F9E
diffEditor.border#232534
diffEditor.diagonalFill#6B6D7C66
diffEditor.insertedTextBackground#94b8ff20
diffEditor.insertedTextBorder#151726C0
diffEditor.removedTextBackground#ee867927
diffEditor.removedTextBorder#151726C0
dropdown.background#1C1E2D
dropdown.border#6B6D7C33
dropdown.foreground#DEE0EF
dropdown.listBackground#1C1E2D
editor.background#151726
editor.findMatchBackground#6B6D7C66
editor.findMatchHighlightBackground#6B6D7C66
editor.findRangeHighlightBackground#6B6D7C66
editor.findRangeHighlightBorder#0000
editor.focusedStackFrameHighlightBackground#6B6D7C33
editor.foldBackground#1C1E2D
editor.foreground#DEE0EF
editor.hoverHighlightBackground#0000
editor.inactiveSelectionBackground#6B6D7C1a
editor.inlineValuesBackground#0000
editor.inlineValuesForeground#8D8F9E
editor.lineHighlightBackground#6B6D7C1a
editor.lineHighlightBorder#0000
editor.linkedEditingBackground#1C1E2D
editor.rangeHighlightBackground#6B6D7C1a
editor.rangeHighlightBorder#0000
editor.selectionBackground#6B6D7C33
editor.selectionForeground#DEE0EF
editor.selectionHighlightBackground#6B6D7C33
editor.selectionHighlightBorder#0000
editor.snippetFinalTabstopHighlightBackground#6B6D7C33
editor.snippetFinalTabstopHighlightBorder#1C1E2D
editor.snippetTabstopHighlightBackground#6B6D7C33
editor.snippetTabstopHighlightBorder#1C1E2D
editor.stackFrameHighlightBackground#6B6D7C33
editor.symbolHighlightBackground#6B6D7C33
editor.symbolHighlightBorder#0000
editor.wordHighlightBackground#6B6D7C33
editor.wordHighlightBorder#0000
editor.wordHighlightStrongBackground#6B6D7C33
editor.wordHighlightStrongBorder#6B6D7C33
editorBracketHighlight.foreground1#ee867980
editorBracketHighlight.foreground2#5ba2d080
editorBracketHighlight.foreground3#a78bfa80
editorBracketHighlight.foreground4#94b8ff80
editorBracketHighlight.foreground5#F8D2C980
editorBracketHighlight.foreground6#9ccfd880
editorBracketMatch.background#0000
editorBracketMatch.border#8D8F9E
editorBracketPairGuide.activeBackground1#5ba2d0
editorBracketPairGuide.activeBackground2#F8D2C9
editorBracketPairGuide.activeBackground3#9ccfd8
editorBracketPairGuide.activeBackground4#94b8ff
editorBracketPairGuide.activeBackground5#a78bfa
editorBracketPairGuide.activeBackground6#ee8679
editorBracketPairGuide.background1#5ba2d080
editorBracketPairGuide.background2#F8D2C980
editorBracketPairGuide.background3#9ccfd880
editorBracketPairGuide.background4#94b8ff80
editorBracketPairGuide.background5#a78bfa80
editorBracketPairGuide.background6#ee867980
editorCodeLens.foreground#F8D2C9
editorCursor.background#DEE0EF
editorCursor.foreground#D1918F
editorError.border#0000
editorError.foreground#ee8679
editorGhostText.foreground#8D8F9E
editorGroup.border#0000
editorGroup.dropBackground#1C1E2D
editorGroup.emptyBackground#0000
editorGroup.focusedEmptyBorder#0000
editorGroupHeader.noTabsBackground#0000
editorGroupHeader.tabsBackground#0000
editorGroupHeader.tabsBorder#0000
editorGutter.addedBackground#94b8ff
editorGutter.background#0000
editorGutter.commentRangeForeground#8D8F9E
editorGutter.deletedBackground#ee8679
editorGutter.foldingControlForeground#9ccfd8
editorGutter.modifiedBackground#F8D2C9
editorHint.border#0000
editorHint.foreground#8D8F9E
editorHoverWidget.background#1C1E2D
editorHoverWidget.border#6B6D7C80
editorHoverWidget.foreground#8D8F9E
editorHoverWidget.highlightForeground#DEE0EF
editorHoverWidget.statusBarBackground#0000
editorIndentGuide.activeBackground#6B6D7C
editorIndentGuide.background#6B6D7C66
editorInfo.border#232534
editorInfo.foreground#94b8ff
editorInlayHint.background#232534
editorInlayHint.foreground#8D8F9E
editorInlayHint.parameterBackground#232534
editorInlayHint.parameterForeground#9ccfd8
editorInlayHint.typeBackground#232534
editorInlayHint.typeForeground#94b8ff
editorLightBulb.foreground#5ba2d0
editorLightBulbAutoFix.foreground#F8D2C9
editorLineNumber.activeForeground#DEE0EF
editorLineNumber.foreground#8D8F9E
editorLink.activeForeground#F8D2C9
editorMarkerNavigation.background#1C1E2D
editorMarkerNavigationError.background#1C1E2D
editorMarkerNavigationInfo.background#1C1E2D
editorMarkerNavigationWarning.background#1C1E2D
editorOverviewRuler.addedForeground#94b8ff80
editorOverviewRuler.background#151726
editorOverviewRuler.border#6B6D7C66
editorOverviewRuler.bracketMatchForeground#8D8F9E
editorOverviewRuler.commonContentForeground#6B6D7C1a
editorOverviewRuler.currentContentForeground#6B6D7C33
editorOverviewRuler.deletedForeground#ee867980
editorOverviewRuler.errorForeground#ee867980
editorOverviewRuler.findMatchForeground#6B6D7C66
editorOverviewRuler.incomingContentForeground#9ccfd880
editorOverviewRuler.infoForeground#94b8ff80
editorOverviewRuler.modifiedForeground#F8D2C980
editorOverviewRuler.rangeHighlightForeground#6B6D7C66
editorOverviewRuler.selectionHighlightForeground#6B6D7C66
editorOverviewRuler.warningForeground#a78bfa80
editorOverviewRuler.wordHighlightForeground#6B6D7C33
editorOverviewRuler.wordHighlightStrongForeground#6B6D7C66
editorPane.background#0000
editorRuler.foreground#6B6D7C66
editorSuggestWidget.background#1C1E2D
editorSuggestWidget.border#0000
editorSuggestWidget.focusHighlightForeground#F8D2C9
editorSuggestWidget.foreground#8D8F9E
editorSuggestWidget.highlightForeground#F8D2C9
editorSuggestWidget.selectedBackground#6B6D7C33
editorSuggestWidget.selectedForeground#DEE0EF
editorSuggestWidget.selectedIconForeground#DEE0EF
editorUnnecessaryCode.border#0000
editorUnnecessaryCode.opacity#00000080
editorWarning.border#0000
editorWarning.foreground#a78bfa
editorWhitespace.foreground#6B6D7C
editorWidget.background#1C1E2D
editorWidget.border#232534
editorWidget.foreground#8D8F9E
editorWidget.resizeBorder#6B6D7C
errorForeground#ee8679
extensionBadge.remoteBackground#9ccfd8
extensionBadge.remoteForeground#151726
extensionButton.prominentBackground#F8D2C9
extensionButton.prominentForeground#151726
extensionButton.prominentHoverBackground#F8D2C9e6
extensionIcon.starForeground#F8D2C9
extensionIcon.verifiedForeground#9ccfd8
focusBorder#6B6D7C33
foreground#DEE0EF
gitDecoration.addedResourceForeground#94b8ff
gitDecoration.conflictingResourceForeground#ee8679
gitDecoration.deletedResourceForeground#8D8F9E
gitDecoration.ignoredResourceForeground#6B6D7C
gitDecoration.modifiedResourceForeground#F8D2C9
gitDecoration.renamedResourceForeground#5ba2d0
gitDecoration.stageDeletedResourceForeground#ee8679
gitDecoration.stageModifiedResourceForeground#9ccfd8
gitDecoration.submoduleResourceForeground#a78bfa
gitDecoration.untrackedResourceForeground#a78bfa
icon.foreground#8D8F9E
input.background#23253480
input.border#6B6D7C33
input.foreground#DEE0EF
input.placeholderForeground#8D8F9E
inputOption.activeBackground#F8D2C9
inputOption.activeBorder#0000
inputOption.activeForeground#151726
inputValidation.errorBackground#0000
inputValidation.errorBorder#0000
inputValidation.errorForeground#ee8679
inputValidation.infoBackground#0000
inputValidation.infoBorder#0000
inputValidation.infoForeground#94b8ff
inputValidation.warningBackground#0000
inputValidation.warningBorder#0000
inputValidation.warningForeground#94b8ff80
keybindingLabel.background#232534
keybindingLabel.border#6B6D7C66
keybindingLabel.bottomBorder#6B6D7C66
keybindingLabel.foreground#9ccfd8
keybindingTable.headerBackground#232534
keybindingTable.rowsBackground#1C1E2D
list.activeSelectionBackground#6B6D7C33
list.activeSelectionForeground#DEE0EF
list.activeSelectionIconForeground#DEE0EF
list.deemphasizedForeground#8D8F9E
list.dropBackground#1C1E2D
list.errorForeground#ee8679
list.filterMatchBackground#1C1E2D
list.filterMatchBorder#F8D2C9
list.focusBackground#6B6D7C66
list.focusForeground#DEE0EF
list.focusOutline#6B6D7C33
list.highlightForeground#F8D2C9
list.hoverBackground#6B6D7C1a
list.hoverForeground#DEE0EF
list.inactiveFocusBackground#6B6D7C1a
list.inactiveSelectionBackground#1C1E2D
list.inactiveSelectionForeground#DEE0EF
list.inactiveSelectionIconForeground#8D8F9E
list.invalidItemForeground#ee8679
list.warningForeground#a78bfa
listFilterWidget.background#1C1E2D
listFilterWidget.noMatchesOutline#ee8679
listFilterWidget.outline#232534
menu.background#1C1E2D
menu.border#6B6D7C1a
menu.foreground#DEE0EF
menu.selectionBackground#6B6D7C33
menu.selectionBorder#232534
menu.selectionForeground#DEE0EF
menu.separatorBackground#DEE0EF
menubar.selectionBackground#6B6D7C33
menubar.selectionBorder#6B6D7C1a
menubar.selectionForeground#DEE0EF
merge.border#232534
merge.commonContentBackground#6B6D7C33
merge.commonHeaderBackground#6B6D7C33
merge.currentContentBackground#a78bfa80
merge.currentHeaderBackground#a78bfa80
merge.incomingContentBackground#94b8ff80
merge.incomingHeaderBackground#94b8ff80
minimap.background#1C1E2D
minimap.errorHighlight#ee867980
minimap.findMatchHighlight#6B6D7C33
minimap.selectionHighlight#6B6D7C33
minimap.warningHighlight#a78bfa80
minimapGutter.addedBackground#94b8ff
minimapGutter.deletedBackground#ee8679
minimapGutter.modifiedBackground#F8D2C9
minimapSlider.activeBackground#6B6D7C66
minimapSlider.background#6B6D7C33
minimapSlider.hoverBackground#6B6D7C33
notebook.cellEditorBackground#1C1E2D
notebook.cellHoverBackground#232534
notebook.editorBackground#151726
notebook.focusedCellBackground#1C1E2D
notebook.outputContainerBackgroundColor#1C1E2D
notebook.selectedCellBackground#232534
notebook.symbolHighlightBackground#6B6D7C33
notificationCenter.border#6B6D7C33
notificationCenterHeader.background#1C1E2D
notificationCenterHeader.foreground#8D8F9E
notificationLink.foreground#9ccfd8
notifications.background#1C1E2D
notifications.border#6B6D7C33
notifications.foreground#DEE0EF
notificationsErrorIcon.foreground#ee8679
notificationsInfoIcon.foreground#94b8ff
notificationsWarningIcon.foreground#a78bfa
notificationToast.border#6B6D7C33
panel.background#151726
panel.border#6B6D7C33
panel.dropBorder#232534
panelInput.border#1C1E2D
panelSection.dropBackground#6B6D7C33
panelSectionHeader.background#1C1E2D
panelSectionHeader.foreground#DEE0EF
panelTitle.activeBorder#6B6D7C66
panelTitle.activeForeground#DEE0EF
panelTitle.inactiveForeground#8D8F9E
peekView.border#232534
peekViewEditor.background#1C1E2D
peekViewEditor.matchHighlightBackground#6B6D7C66
peekViewResult.background#1C1E2D
peekViewResult.fileForeground#8D8F9E
peekViewResult.lineForeground#8D8F9E
peekViewResult.matchHighlightBackground#6B6D7C66
peekViewResult.selectionBackground#6B6D7C33
peekViewResult.selectionForeground#DEE0EF
peekViewTitle.background#232534
peekViewTitleDescription.foreground#8D8F9E
pickerGroup.border#6B6D7C66
pickerGroup.foreground#9ccfd8
ports.iconRunningProcessForeground#F8D2C9
problemsErrorIcon.foreground#ee8679
problemsInfoIcon.foreground#94b8ff
problemsWarningIcon.foreground#a78bfa
progressBar.background#F8D2C9
quickInput.background#1C1E2D
quickInput.foreground#8D8F9E
quickInputList.focusBackground#6B6D7C33
quickInputList.focusForeground#DEE0EF
quickInputList.focusIconForeground#DEE0EF
scrollbar.shadow#0000
scrollbarSlider.activeBackground#6B6D7C66
scrollbarSlider.background#6B6D7C1a
scrollbarSlider.hoverBackground#6B6D7C33
searchEditor.findMatchBackground#6B6D7C33
selection.background#6B6D7C66
settings.focusedRowBackground#1C1E2D
settings.focusedRowBorder#6B6D7C33
settings.headerForeground#DEE0EF
settings.modifiedItemIndicator#F8D2C9
settings.rowHoverBackground#1C1E2D
sideBar.background#151726
sideBar.border#6B6D7C33
sideBar.dropBackground#1C1E2D
sideBar.foreground#8D8F9E
sideBarSectionHeader.background#0000
sideBarSectionHeader.border#6B6D7C33
statusBar.background#151726
statusBar.debuggingBackground#9ccfd8
statusBar.debuggingForeground#151726
statusBar.foreground#8D8F9E
statusBar.noFolderBackground#151726
statusBar.noFolderForeground#8D8F9E
statusBarItem.activeBackground#6B6D7C66
statusBarItem.errorBackground#151726
statusBarItem.errorForeground#ee8679
statusBarItem.hoverBackground#6B6D7C33
statusBarItem.prominentBackground#232534
statusBarItem.prominentForeground#DEE0EF
statusBarItem.prominentHoverBackground#6B6D7C33
statusBarItem.remoteBackground#151726
statusBarItem.remoteForeground#a78bfa
symbolIcon.arrayForeground#8D8F9E
symbolIcon.classForeground#8D8F9E
symbolIcon.colorForeground#8D8F9E
symbolIcon.constantForeground#8D8F9E
symbolIcon.constructorForeground#8D8F9E
symbolIcon.enumeratorForeground#8D8F9E
symbolIcon.enumeratorMemberForeground#8D8F9E
symbolIcon.eventForeground#8D8F9E
symbolIcon.fieldForeground#8D8F9E
symbolIcon.fileForeground#8D8F9E
symbolIcon.folderForeground#8D8F9E
symbolIcon.functionForeground#8D8F9E
symbolIcon.interfaceForeground#8D8F9E
symbolIcon.keyForeground#8D8F9E
symbolIcon.keywordForeground#8D8F9E
symbolIcon.methodForeground#8D8F9E
symbolIcon.moduleForeground#8D8F9E
symbolIcon.namespaceForeground#8D8F9E
symbolIcon.nullForeground#8D8F9E
symbolIcon.numberForeground#8D8F9E
symbolIcon.objectForeground#8D8F9E
symbolIcon.operatorForeground#8D8F9E
symbolIcon.packageForeground#8D8F9E
symbolIcon.propertyForeground#8D8F9E
symbolIcon.referenceForeground#8D8F9E
symbolIcon.snippetForeground#8D8F9E
symbolIcon.stringForeground#8D8F9E
symbolIcon.structForeground#8D8F9E
symbolIcon.textForeground#8D8F9E
symbolIcon.typeParameterForeground#8D8F9E
symbolIcon.unitForeground#8D8F9E
symbolIcon.variableForeground#8D8F9E
tab.activeBackground#6B6D7C1a
tab.activeForeground#DEE0EF
tab.activeModifiedBorder#94b8ff
tab.border#0000
tab.hoverBackground#6B6D7C33
tab.inactiveBackground#0000
tab.inactiveForeground#8D8F9E
tab.inactiveModifiedBorder#94b8ff80
tab.lastPinnedBorder#6B6D7C
tab.unfocusedActiveBackground#0000
tab.unfocusedHoverBackground#0000
tab.unfocusedInactiveBackground#0000
tab.unfocusedInactiveModifiedBorder#94b8ff80
terminal.ansiBlack#232534
terminal.ansiBlue#94b8ff
terminal.ansiBrightBlack#8D8F9E
terminal.ansiBrightBlue#94b8ff
terminal.ansiBrightCyan#F8D2C9
terminal.ansiBrightGreen#5ba2d0
terminal.ansiBrightMagenta#9ccfd8
terminal.ansiBrightRed#ee8679
terminal.ansiBrightWhite#DEE0EF
terminal.ansiBrightYellow#a78bfa
terminal.ansiCyan#F8D2C9
terminal.ansiGreen#5ba2d0
terminal.ansiMagenta#9ccfd8
terminal.ansiRed#ee8679
terminal.ansiWhite#DEE0EF
terminal.ansiYellow#a78bfa
terminal.border#6B6D7C33
terminal.dropBackground#6B6D7C33
terminal.foreground#DEE0EF
terminal.selectionBackground#6B6D7C33
terminal.tab.activeBorder#DEE0EF
terminalCursor.background#DEE0EF
terminalCursor.foreground#6B6D7C
textBlockQuote.background#1C1E2D
textBlockQuote.border#6B6D7C33
textCodeBlock.background#1C1E2D
textLink.activeForeground#9ccfd8e6
textLink.foreground#9ccfd8
textPreformat.foreground#a78bfa
textSeparator.foreground#8D8F9E
titleBar.activeBackground#151726
titleBar.activeForeground#8D8F9E
titleBar.border#6B6D7C33
titleBar.inactiveBackground#151726
titleBar.inactiveForeground#8D8F9E
toolbar.activeBackground#6B6D7C66
toolbar.hoverBackground#6B6D7C33
tree.indentGuidesStroke#8D8F9E
walkThrough.embeddedEditorBackground#151726
welcomePage.background#151726
welcomePage.buttonBackground#1C1E2D
welcomePage.buttonHoverBackground#232534
widget.shadow#0101011a
window.activeBorder#1C1E2D
window.inactiveBorder#1C1E2D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#6B6D7C	italic
constant	#5ba2d0	—
constant.numeric, constant.language, constant.charcter.escape	#F8D2C9	—
entity.name	#F8D2C9	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#94b8ff	—
entity.other.attribute-name, entity.other.inherited-class	#9ccfd8	italic
invalid	#ee8679	—
invalid.deprecated	#8D8F9E	—
keyword	#5ba2d0	—
meta.tag, meta.brace	#DEE0EF	—
meta.import, meta.export	#5ba2d0	—
meta.directive.vue	#9ccfd8	italic
meta.property-name.css	#94b8ff	—
meta.property-value.css	#a78bfa	—
meta.tag.other.html	#8D8F9E	—
punctuation	#8D8F9E	—
punctuation.accessor	#5ba2d0	—
punctuation.definition.string	#a78bfa	—
punctuation.definition.tag	#6B6D7C	—
storage.type, storage.modifier	#5ba2d0	—
string	#a78bfa	—
support	#94b8ff	—
support.constant	#a78bfa	—
support.function	#ee8679	italic
variable	#F8D2C9	italic
variable.other, variable.language, variable.function, variable.argument	#DEE0EF	—
variable.parameter	#9ccfd8	—

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