Sequoia

Name: Sequoia
Author: Michael Andreuzza

Publisher: Michael AndreuzzaThemes in package: 9

Black, elegant, modern, monochrome or colourful theme for VS Code and other interfaces.

GitHub

Color themes

VS Code preview

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

Sequoia — Sequoia Moonlight Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#565760	italic
constant	#4a85d4	—
constant.numeric, constant.language, constant.charcter.escape	#d9884a	—
entity.name	#d9884a	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#9a5fd9	—
entity.other.attribute-name, entity.other.inherited-class	#282930	italic
invalid	#c94da8	—
invalid.deprecated	#42434e	—
keyword	#4a85d4	—
meta.tag, meta.brace	#282930	—
meta.import, meta.export	#4a85d4	—
meta.directive.vue	#282930	italic
meta.property-name.css	#9a5fd9	—
meta.property-value.css	#6a6a78	—
meta.tag.other.html	#42434e	—
punctuation	#42434e	—
punctuation.accessor	#4a85d4	—
punctuation.definition.string	#6a6a78	—
punctuation.definition.tag	#565760	—
storage.type, storage.modifier	#4a85d4	—
string	#6a6a78	—
support	#9a5fd9	—
support.constant	#6a6a78	—
support.function	#c94da8	italic
variable	#d9884a	italic
variable.other, variable.language, variable.function, variable.argument	#282930	—
variable.parameter	#282930	—

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