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 Electric

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...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#0a0e15
activityBar.border#0a0e15
activityBar.foreground#78a9ff
activityBar.inactiveForeground#8c94a3
activityBarBadge.background#f29e74
activityBarBadge.foreground#0a0e15
badge.background#f29e7433
badge.foreground#f29e74
button.background#f29e74
button.foreground#0a0e15
button.hoverBackground#fac761
debugExceptionWidget.background#0a0e15
debugExceptionWidget.border#0a0e15
debugToolBar.background#0a0e15
descriptionForeground#8c94a3
diffEditor.insertedTextBackground#9e81c926
diffEditor.removedTextBackground#f29e7426
dropdown.background#0a0e15
dropdown.border#11151d
dropdown.foreground#8c94a3
editor.background#0a0e15
editor.findMatchBackground#a6cc700d
editor.findMatchBorder#a6cc7080
editor.findMatchHighlightBackground#a6cc700d
editor.findMatchHighlightBorder#a6cc7080
editor.findRangeHighlightBackground#323a4c
editor.findRangeHighlightBorder#191f2800
editor.foreground#acb9d9
editor.inactiveSelectionBackground#323a4c
editor.lineHighlightBackground#11151d
editor.rangeHighlightBackground#11151d
editor.selectionBackground#33415e
editor.selectionHighlightBackground#323a4c
editor.selectionHighlightBorder#323a4c
editor.wordHighlightBackground#77a8d912
editor.wordHighlightBorder#77a8d980
editor.wordHighlightStrongBackground#a6cc7012
editor.wordHighlightStrongBorder#a6cc7080
editorBracketMatch.background#8c94a34d
editorBracketMatch.border#8c94a399
editorCodeLens.foreground#5c6773
editorCursor.foreground#f29e74
editorError.foreground#ff3333
editorGroup.border#0a0e15
editorGroupHeader.noTabsBackground#0a0e15
editorGroupHeader.tabsBackground#0a0e15
editorGroupHeader.tabsBorder#0a0e15
editorGutter.addedBackground#a6cc7099
editorGutter.deletedBackground#f2798399
editorGutter.modifiedBackground#77a8d999
editorHoverWidget.background#0a0e15
editorHoverWidget.border#101521
editorIndentGuide.activeBackground1#8c94a3b3
editorIndentGuide.background1#8c94a34d
editorLineNumber.activeForeground#8c94a3cc
editorLineNumber.foreground#8c94a366
editorLink.activeForeground#f29e74
editorMarkerNavigation.background#0a0e15
editorOverviewRuler.addedForeground#a6cc7099
editorOverviewRuler.border#0a0e15
editorOverviewRuler.deletedForeground#f2798399
editorOverviewRuler.errorForeground#ff3333
editorOverviewRuler.modifiedForeground#77a8d999
editorOverviewRuler.warningForeground#f29e74
editorRuler.foreground#8c94a34d
editorSuggestWidget.background#0a0e15
editorSuggestWidget.border#101521
editorSuggestWidget.highlightForeground#f29e74
editorSuggestWidget.selectedBackground#11151d
editorWarning.foreground#f29e74
editorWhitespace.foreground#8c94a366
editorWidget.background#0a0e15
errorForeground#ff3333
extensionButton.prominentBackground#f29e74
extensionButton.prominentForeground#0a0e15
extensionButton.prominentHoverBackground#fac761
focusBorder#596171
foreground#8c94a3
gitDecoration.conflictingResourceForeground#f29e74
gitDecoration.deletedResourceForeground#f27983b3
gitDecoration.ignoredResourceForeground#525a69
gitDecoration.modifiedResourceForeground#78a9ff
gitDecoration.submoduleResourceForeground#d4bfffb3
gitDecoration.untrackedResourceForeground#a6cc70b3
icon.foreground#8c94a3
input.background#11151d
input.border#11151d
input.foreground#acb9d9
input.placeholderForeground#5f6878
inputOption.activeBorder#78a9ff
inputValidation.errorBackground#0a0e15
inputValidation.errorBorder#ff3333
inputValidation.infoBackground#0a0e15
inputValidation.infoBorder#78a9ff
inputValidation.warningBackground#0a0e15
inputValidation.warningBorder#9df0f0
list.activeSelectionBackground#0a0e15
list.activeSelectionForeground#ffffff
list.errorForeground#f27983
list.filterMatchBackground#f29e740d
list.filterMatchBorder#f29e74
list.focusBackground#11151d
list.focusForeground#8c94a3
list.highlightForeground#f29e74
list.hoverBackground#0a0e15
list.hoverForeground#8c94a3
list.inactiveSelectionBackground#11151d
list.inactiveSelectionForeground#8c94a3
list.invalidItemForeground#5f6878
listFilterWidget.background#0a0e15
listFilterWidget.noMatchesOutline#ff3333
listFilterWidget.outline#f29e74
panel.background#0a0e15
panel.border#11151d
panelSection.dropBackground#f29e74
panelSectionHeader.background#0a0e15
panelSectionHeader.foreground#868690
panelTitle.activeBorder#78a9ff
panelTitle.activeForeground#acb9d9
panelTitle.inactiveForeground#8c94a3
peekView.border#0a0e15
peekViewEditor.background#0a0e15
peekViewEditor.matchHighlightBackground#f29e7433
peekViewResult.background#0a0e15
peekViewResult.fileForeground#8c94a3
peekViewResult.matchHighlightBackground#f29e7433
peekViewTitle.background#0a0e15
peekViewTitleDescription.foreground#8c94a3
peekViewTitleLabel.foreground#8c94a3
pickerGroup.border#0a0e15
pickerGroup.foreground#525a69
progressBar.background#f29e74
scrollbar.shadow#11151d
scrollbarSlider.activeBackground#8c94a3b3
scrollbarSlider.background#8c94a366
scrollbarSlider.hoverBackground#8c94a399
selection.background#33415efd
settings.headerForeground#acb9d9
settings.modifiedItemIndicator#77a8d9
sideBar.background#0a0e15
sideBar.border#11151d
sideBar.foreground#8c94a3
sideBarSectionHeader.background#0a0e15
sideBarSectionHeader.border#0a0e15
sideBarSectionHeader.foreground#78a9ff
sideBarTitle.foreground#78a9ff
statusBar.background#0a0e15
statusBar.border#0a0e15
statusBar.debuggingBackground#78a9ff
statusBar.debuggingForeground#0a0e15
statusBar.foreground#8c94a3
statusBar.noFolderBackground#0a0e15
statusBarItem.activeBackground#11151d
statusBarItem.hoverBackground#11151d
statusBarItem.prominentBackground#11151d
statusBarItem.prominentHoverBackground#00000030
tab.activeBackground#0a0e15
tab.activeBorder#0a0e15
tab.activeBorderTop#78a9ff
tab.activeForeground#acb9d9
tab.border#0a0e15
tab.inactiveBackground#0a0e15
tab.inactiveForeground#8c94a3
tab.unfocusedActiveBorderTop#8c94a3
tab.unfocusedActiveForeground#8c94a3
tab.unfocusedInactiveForeground#8c94a3
terminal.ansiBlack#1c1c1c
terminal.ansiBlue#78a9ff
terminal.ansiBrightBlack#6b7280
terminal.ansiBrightBlue#78a9ff80
terminal.ansiBrightCyan#67e8f9
terminal.ansiBrightGreen#a6cc70
terminal.ansiBrightMagenta#f0abfc
terminal.ansiBrightRed#d4bfff
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fad07b
terminal.ansiCyan#73d0ff
terminal.ansiGreen#748e4e
terminal.ansiMagenta#e879f9
terminal.ansiRed#9e81c9
terminal.ansiWhite#9ca3af
terminal.ansiYellow#c8a662
terminal.background#0a0e15
terminal.border#11151d
terminal.foreground#acb9d9
textBlockQuote.background#0a0e15
textLink.activeForeground#f29e74
textLink.foreground#f29e74
textPreformat.foreground#acb9d9
titleBar.activeBackground#0a0e15
titleBar.activeForeground#acb9d9
titleBar.border#11151d
titleBar.inactiveBackground#0a0e15
titleBar.inactiveForeground#8c94a3
tree.indentGuidesStroke#8c94a3b3
walkThrough.embeddedEditorBackground#0a0e15
widget.shadow#141925

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file, markup.deleted.diff, markup.inserted.diff, punctuation.accessor, keyword, storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, entity.name.function, entity.other.attribute-name, entity.other.attribute-name, entity.other.attribute-name, keyword.operator.relational, meta.delimiter.period, meta.selector, entity.name.tag.doctype, meta.tag.sgml.doctype, variable.other.object.property, entity.name.function, keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx, italic, quote, source.elixir .punctuation.binary.elixir, source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go, meta.tag.sgml.doctype.html, variable.other.object.js, markup.italic.markdown	—	italic
comment, string.quoted.docstring.multi.python	#ffffff30	italic
string, constant.other.symbol	#9e81c9	—
string.regexp, constant.character, constant.other	#95E6CB	—
constant.numeric, string.quoted.single	#f29e74	—
constant.language	#f29e74	—
variable	#acb9d9	—
variable.member	#F28779	—
variable.language	#78A9FF	italic
storage	#9e81c9	—
keyword	#9e81c9	—
keyword.operator, string.quoted.single	#F29E74	—
punctuation.separator, punctuation.terminator	#acb9d9	—
punctuation.section	#acb9d9	—
punctuation.accessor	#F29E74	—
source.java storage.type, source.haskell storage.type, source.c storage.type	#73D0FF	—
entity.other.inherited-class	#78A9FF	—
storage.type.function	#9e81c9	—
source.java storage.type.primitive	#78A9FF	—
entity.name.function	#9df0f0	—
variable.parameter, meta.parameter	#D4BFFF	—
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#9df0f0	—
support.function, support.macro	#F28779	—
entity.name.import, entity.name.package	#9e81c9	—
entity.name, storage.type.js, keyword.control.import.tsx	#73D0FF	—
entity.name.tag, meta.tag.sgml	#78A9FF	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#78A9FF80	—
entity.other.attribute-name	#9df0f0	—
support.constant	#F29E74	italic
support.type, support.class, source.go storage.type	#78A9FF	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation	#FFE6B3	—
invalid	#FF3333	—
meta.diff, meta.diff.header	#C594C5	—
source.ruby variable.other.readwrite	#9df0f0	—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag	#73D0FF	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#5C6773	—
support.type.property-name	#78A9FF	—
constant.numeric.line-number.find-in-files - match	#5C6773	—
constant.numeric.line-number.match	#9e81c9	—
entity.name.filename.find-in-files	#9e81c9	—
message.error	#FF3333	—
markup.heading, markup.heading entity.name	#9e81c9	bold
markup.underline.link, string.other.link	#78A9FF	—
markup.italic	#F28779	italic
markup.bold	#F28779	bold
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
meta.separator	#5C6773	bold
markup.quote	#95E6CB	italic
markup.list punctuation.definition.list.begin	#9df0f0	—
markup.inserted	#A6CC70	—
markup.changed	#77A8D9	—
markup.deleted	#F27983	—
markup.strike	#FFE6B3	—
markup.table	#78A9FF	—
text.html.markdown markup.inline.raw	#F29E74	—
text.html.markdown meta.dummy.line-break	#5C6773	—
punctuation.definition.markdown	#5C6773	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

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