Serendipity V1

Name: Serendipity V1
Author: Michael Andreuzza

Publisher: Michael AndreuzzaThemes in package: 3

Old and unconsistent version of Serendipity. No maintained but is here because some users wanted it.

Open in VS Code GitHub

Color themes

VS Code preview

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

Serendipity V1 — Serendipity Morning V1

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#fafafa
activityBar.border#8a91991a
activityBar.foreground#8a9199cc
activityBar.inactiveForeground#8a919999
activityBarBadge.background#F06897
activityBarBadge.foreground#fafafa
badge.background#F0689733
badge.foreground#f48f36
button.background#F06897
button.foreground#f9fafa
button.hoverBackground#f9943b
debugExceptionWidget.background#ffffff
debugExceptionWidget.border#8a91991a
debugToolBar.background#ffffff
descriptionForeground#8a9199
diffEditor.insertedTextBackground#a173ff26
diffEditor.removedTextBackground#ed936626
dropdown.background#ffffff
dropdown.border#dddfe1
dropdown.foreground#8a9199
editor.background#ffffff
editor.findMatchBackground#F068970d
editor.findMatchBorder#F06897
editor.findMatchHighlightBackground#F068970d
editor.findMatchHighlightBorder#F0689759
editor.findRangeHighlightBackground#e7e8e9
editor.findRangeHighlightBorder#fafafa00
editor.foreground#575f66
editor.inactiveSelectionBackground#e7e8e9
editor.lineHighlightBackground#8a91991a
editor.rangeHighlightBackground#8a91991a
editor.selectionBackground#d1e4f4
editor.selectionHighlightBackground#e7e8e9
editor.selectionHighlightBorder#e1e1e2
editor.wordHighlightBackground#709ecc12
editor.wordHighlightBorder#709ecc80
editor.wordHighlightStrongBackground#99bf4d12
editor.wordHighlightStrongBorder#99bf4d80
editorBracketMatch.background#8a91994d
editorBracketMatch.border#8a919999
editorCodeLens.foreground#abb0b6
editorCursor.foreground#F06897
editorError.foreground#f51818
editorGroup.background#ffffff
editorGroup.border#8a91991a
editorGroupHeader.noTabsBackground#fafafa
editorGroupHeader.tabsBackground#fafafa
editorGroupHeader.tabsBorder#8a91991a
editorGutter.addedBackground#99bf4d99
editorGutter.deletedBackground#f2798399
editorGutter.modifiedBackground#709ecc99
editorHoverWidget.background#ffffff
editorHoverWidget.border#f0f0f0
editorIndentGuide.activeBackground#8a919959
editorIndentGuide.background#8a91992e
editorLineNumber.activeForeground#8a9199cc
editorLineNumber.foreground#8a919966
editorLink.activeForeground#F06897
editorMarkerNavigation.background#ffffff
editorOverviewRuler.addedForeground#99bf4d99
editorOverviewRuler.border#8a91991a
editorOverviewRuler.deletedForeground#f2798399
editorOverviewRuler.errorForeground#f51818
editorOverviewRuler.modifiedForeground#709ecc99
editorOverviewRuler.warningForeground#F06897
editorRuler.foreground#8a91992e
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#f0f0f0
editorSuggestWidget.highlightForeground#F06897
editorSuggestWidget.selectedBackground#8a91991a
editorWarning.foreground#f29e74
editorWhitespace.foreground#8a919966
editorWidget.background#ffffff
errorForeground#f51818
extensionButton.prominentBackground#F06897
extensionButton.prominentForeground#f9fafa
extensionButton.prominentHoverBackground#f9943b
focusBorder#bec1c6
foreground#8a9199
gitDecoration.bignoredResourceForeground#c9cccf
gitDecoration.conflictingResourceForeground
gitDecoration.deletedResourceForeground#f27983b3
gitDecoration.modifiedResourceForeground#709eccb3
gitDecoration.submoduleResourceForeground#a37accb3
gitDecoration.untrackedResourceForeground#99bf4db3
icon.foreground#8a9199
input.background#f7f7f7
input.border#dddfe1
input.foreground#575f66
input.placeholderForeground#b2b7bb
inputOption.activeBorder#F06897
inputValidation.errorBackground#fafafa
inputValidation.errorBorder#f51818
inputValidation.infoBackground#fafafa
inputValidation.infoBorder#4589ff
inputValidation.warningBackground#fafafa
inputValidation.warningBorder#14B8A6
list.activeSelectionBackground#8a91991a
list.activeSelectionForeground#8a9199
list.errorForeground#f27983
list.filterMatchBackground#F068970d
list.filterMatchBorder#F06897
list.focusBackground#8a91991a
list.focusForeground#8a9199
list.highlightForeground#F06897
list.hoverBackground#8a91991a
list.hoverForeground#8a9199
list.inactiveSelectionBackground#8a91991a
list.inactiveSelectionForeground#8a9199
list.invalidItemForeground#b2b7bb
listFilterWidget.background#ffffff
listFilterWidget.noMatchesOutline#f51818
listFilterWidget.outline#F06897
panel.background#fafafa
panel.border#8a91991a
panelTitle.activeBorder#F06897
panelTitle.activeForeground#575f66
panelTitle.inactiveForeground#8a9199
peekView.border#8a91991a
peekViewEditor.background#ffffff
peekViewEditor.matchHighlightBackground#F0689733
peekViewResult.background#ffffff
peekViewResult.fileForeground#8a9199
peekViewResult.matchHighlightBackground#F0689733
peekViewTitle.background#ffffff
peekViewTitleDescription.foreground#8a9199
peekViewTitleLabel.foreground#8a9199
pickerGroup.border#8a91991a
pickerGroup.foreground#c9cccf
progressBar.background#F06897
scrollbar.shadow#8a91991a
scrollbarSlider.activeBackground#8a9199b3
scrollbarSlider.background#8a919966
scrollbarSlider.hoverBackground#8a919999
selection.background#d1e4f4fd
settings.headerForeground#575f66
settings.modifiedItemIndicator#709ecc
sideBar.background#fafafa
sideBar.border#8a91991a
sideBarSectionHeader.background#fafafa
sideBarSectionHeader.border#8a91991a
sideBarSectionHeader.foreground#8a9199cc
sideBarTitle.foreground#4589ff
statusBar.background#fafafa
statusBar.border#8a91991a
statusBar.debuggingBackground#4589ff
statusBar.debuggingForeground#f9fafa
statusBar.foreground#8a9199
statusBar.noFolderBackground#ffffff
statusBarItem.activeBackground#8a91991a
statusBarItem.hoverBackground#8a91991a
statusBarItem.prominentBackground#8a91991a
statusBarItem.prominentHoverBackground#00000030
tab.activeBackground#ffffff
tab.activeBorder#ffffff
tab.activeBorderTop#F06897
tab.activeForeground#4589ff
tab.border#8a91991a
tab.inactiveBackground#fafafa
tab.inactiveForeground#8a9199
tab.unfocusedActiveBorderTop#8a9199
tab.unfocusedActiveForeground#8a9199
tab.unfocusedInactiveForeground#8a9199
terminal.ansiBlack#1c1c1c
terminal.ansiBlue#6087cc
terminal.ansiBrightBlack#6b7280
terminal.ansiBrightBlue#78A9FF
terminal.ansiBrightCyan#5fc2d1
terminal.ansiBrightGreen#a6cc70
terminal.ansiBrightMagenta#f0abfc
terminal.ansiBrightRed#9177b9
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fad07b
terminal.ansiCyan#1ba8be
terminal.ansiGreen#748E4E
terminal.ansiMagenta#e879f9
terminal.ansiRed#8568b2
terminal.ansiWhite#9ca3af
terminal.ansiYellow#c8a662
terminal.background#fafafa
terminal.foreground#575f66
textBlockQuote.background#ffffff
textLink.activeForeground#F06897
textLink.foreground#F06897
textPreformat.foreground#575f66
titleBar.activeBackground#fafafa
titleBar.activeForeground#575f66
titleBar.border#8a91991a
titleBar.inactiveBackground#fafafa
titleBar.inactiveForeground#8a9199
tree.indentGuidesStroke#8a919959
walkThrough.embeddedEditorBackground#ffffff
widget.shadow#424a5040

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
—	#575f66	—
comment, string.quoted.docstring.multi.python	#abb0b6	italic
string, constant.other.symbol	#a173ff	—
string.regexp, constant.character, constant.other	#4cbf99	—
constant.numeric	#F06897	—
constant.language	#F06897	—
variable	#575f66	—
variable.member	#f07171	—
variable.language	#4589ff	italic
storage	#a173ff	—
keyword	#a173ff	—
keyword.operator	#ed9366	—
punctuation.separator, punctuation.terminator	#575f66b3	—
punctuation.section	#575f66	—
punctuation.accessor	#ed9366	—
source.java storage.type, source.haskell storage.type, source.c storage.type	#399ee6	—
entity.other.inherited-class	#4589ff	—
storage.type.function	#a173ff	—
source.java storage.type.primitive	#4589ff	—
entity.name.function	#14B8A6	—
variable.parameter, meta.parameter	#a37acc	—
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#14B8A6	—
support.function, support.macro	#f07171	—
entity.name.import, entity.name.package	#a173ff	—
entity.name, storage.type.js, keyword.control.import.tsx	#399ee6	—
entity.name.tag, meta.tag.sgml	#4589ff	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#4589ff80	—
entity.other.attribute-name	#14B8A6	—
support.constant	#ed9366	italic
support.type, support.class, source.go storage.type	#4589ff	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation	#e6ba7e	—
invalid	#f51818	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#14B8A6	—
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	#399ee6	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#abb0b6	—
support.type.property-name	#4589ff	normal
constant.numeric.line-number.find-in-files - match	#abb0b6	—
constant.numeric.line-number.match	#a173ff	—
entity.name.filename.find-in-files	#a173ff	—
message.error	#f51818	—
markup.heading, markup.heading entity.name	#a173ff	bold
markup.underline.link, string.other.link	#4589ff	—
markup.italic	#f07171	italic
markup.bold	#f07171	bold
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw	—	—
markup.raw.inline	—	—
meta.separator	#abb0b6	bold
markup.quote	#4cbf99	italic
markup.list punctuation.definition.list.begin	#14B8A6	—
markup.inserted	#99bf4d	—
markup.changed	#709ecc	—
markup.deleted	#f27983	—
markup.strike	#e6ba7e	—
markup.table	#4589ff	—
text.html.markdown markup.inline.raw	#ed9366	—
text.html.markdown meta.dummy.line-break	#abb0b6	—
punctuation.definition.markdown	#abb0b6	—

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