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 Monochrome 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#454752
activityBarBadge.foreground#0f1014
badge.background#454752
badge.foreground#0f1014
banner.background#e2e3e8
banner.foreground#282930
banner.iconForeground#42434e
breadcrumb.activeSelectionForeground#454752
breadcrumb.background#edeef2
breadcrumb.focusForeground#42434e
breadcrumb.foreground#565760
breadcrumbPicker.background#e2e3e8
button.background#454752
button.foreground#0f1014
button.hoverBackground#454752e6
button.secondaryBackground#e2e3e8
button.secondaryForeground#282930
button.secondaryHoverBackground#d4d5dc
charts.foreground#282930
charts.indigo#5f6370
charts.lines#42434e
charts.metal#25262d
charts.orange#454752
charts.pink#525666
charts.sky#2e3038
charts.stone#50535e
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#525666
debugToolBar.background#e2e3e8
debugToolBar.border#d4d5dc
descriptionForeground#42434e
diffEditor.border#d4d5dc
diffEditor.diagonalFill#817c9c45
diffEditor.insertedTextBackground#5f637014
diffEditor.insertedTextBorder#5f637080
diffEditor.removedTextBackground#52566614
diffEditor.removedTextBorder#52566680
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#52566690
editorBracketHighlight.foreground2#2e303890
editorBracketHighlight.foreground3#50535e90
editorBracketHighlight.foreground4#5f637090
editorBracketHighlight.foreground5#45475290
editorBracketHighlight.foreground6#25262d90
editorBracketMatch.background#0000
editorBracketMatch.border#42434e
editorBracketPairGuide.activeBackground1#2e3038
editorBracketPairGuide.activeBackground2#454752
editorBracketPairGuide.activeBackground3#25262d
editorBracketPairGuide.activeBackground4#5f6370
editorBracketPairGuide.activeBackground5#50535e
editorBracketPairGuide.activeBackground6#525666
editorBracketPairGuide.background1#2e303880
editorBracketPairGuide.background2#45475280
editorBracketPairGuide.background3#25262d80
editorBracketPairGuide.background4#5f637080
editorBracketPairGuide.background5#50535e80
editorBracketPairGuide.background6#52566680
editorCodeLens.foreground#454752
editorCursor.background#282930
editorCursor.foreground#5f6370
editorError.border#0000
editorError.foreground#525666
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#5f6370
editorGutter.background#0000
editorGutter.commentRangeForeground#42434e
editorGutter.deletedBackground#525666
editorGutter.foldingControlForeground#25262d
editorGutter.modifiedBackground#454752
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#5f6370
editorInlayHint.background#d4d5dc
editorInlayHint.foreground#42434e
editorInlayHint.parameterBackground#d4d5dc
editorInlayHint.parameterForeground#25262d
editorInlayHint.typeBackground#d4d5dc
editorInlayHint.typeForeground#5f6370
editorLightBulb.foreground#2e3038
editorLightBulbAutoFix.foreground#454752
editorLineNumber.activeForeground#282930
editorLineNumber.foreground#42434e
editorLink.activeForeground#454752
editorMarkerNavigation.background#e2e3e8
editorMarkerNavigationError.background#e2e3e8
editorMarkerNavigationInfo.background#e2e3e8
editorMarkerNavigationWarning.background#e2e3e8
editorOverviewRuler.addedForeground#5f637080
editorOverviewRuler.background#edeef2
editorOverviewRuler.border#817c9c45
editorOverviewRuler.bracketMatchForeground#42434e
editorOverviewRuler.commonContentForeground#817c9c28
editorOverviewRuler.currentContentForeground#817c9c38
editorOverviewRuler.deletedForeground#52566680
editorOverviewRuler.errorForeground#52566680
editorOverviewRuler.findMatchForeground#817c9c45
editorOverviewRuler.incomingContentForeground#25262d80
editorOverviewRuler.infoForeground#5f637080
editorOverviewRuler.modifiedForeground#45475280
editorOverviewRuler.rangeHighlightForeground#817c9c45
editorOverviewRuler.selectionHighlightForeground#817c9c45
editorOverviewRuler.warningForeground#50535e80
editorOverviewRuler.wordHighlightForeground#817c9c38
editorOverviewRuler.wordHighlightStrongForeground#817c9c45
editorPane.background#0000
editorRuler.foreground#817c9c45
editorSuggestWidget.background#e2e3e8
editorSuggestWidget.border#0000
editorSuggestWidget.focusHighlightForeground#454752
editorSuggestWidget.foreground#42434e
editorSuggestWidget.highlightForeground#454752
editorSuggestWidget.selectedBackground#817c9c38
editorSuggestWidget.selectedForeground#282930
editorSuggestWidget.selectedIconForeground#282930
editorUnnecessaryCode.border#0000
editorUnnecessaryCode.opacity#00000080
editorWarning.border#0000
editorWarning.foreground#50535e
editorWhitespace.foreground#565760
editorWidget.background#e2e3e8
editorWidget.border#d4d5dc
editorWidget.foreground#42434e
editorWidget.resizeBorder#565760
errorForeground#525666
extensionBadge.remoteBackground#25262d
extensionBadge.remoteForeground#edeef2
extensionButton.prominentBackground#454752
extensionButton.prominentForeground#0f1014
extensionButton.prominentHoverBackground#454752e6
extensionIcon.starForeground#454752
extensionIcon.verifiedForeground#25262d
focusBorder#817c9c38
foreground#282930
gitDecoration.addedResourceForeground#5f6370
gitDecoration.conflictingResourceForeground#525666
gitDecoration.deletedResourceForeground#42434e
gitDecoration.ignoredResourceForeground#565760
gitDecoration.modifiedResourceForeground#454752
gitDecoration.renamedResourceForeground#2e3038
gitDecoration.stageDeletedResourceForeground#5f6370
gitDecoration.stageModifiedResourceForeground#25262d
gitDecoration.submoduleResourceForeground#50535e
gitDecoration.untrackedResourceForeground#50535e
icon.foreground#42434e
input.background#d4d5dc80
input.border#817c9c38
input.foreground#282930
input.placeholderForeground#42434e
inputOption.activeBackground#454752
inputOption.activeBorder#0000
inputOption.activeForeground#edeef2
inputValidation.errorBackground#0000
inputValidation.errorBorder#0000
inputValidation.errorForeground#525666
inputValidation.infoBackground#0000
inputValidation.infoBorder#0000
inputValidation.infoForeground#5f6370
inputValidation.warningBackground#0000
inputValidation.warningBorder#0000
inputValidation.warningForeground#5f637080
keybindingLabel.background#d4d5dc
keybindingLabel.border#817c9c45
keybindingLabel.bottomBorder#817c9c45
keybindingLabel.foreground#25262d
keybindingTable.headerBackground#d4d5dc
keybindingTable.rowsBackground#e2e3e8
list.activeSelectionBackground#817c9c38
list.activeSelectionForeground#282930
list.activeSelectionIconForeground#282930
list.deemphasizedForeground#42434e
list.dropBackground#e2e3e8
list.errorForeground#525666
list.filterMatchBackground#e2e3e8
list.filterMatchBorder#454752
list.focusBackground#817c9c45
list.focusForeground#282930
list.focusOutline#817c9c38
list.highlightForeground#454752
list.hoverBackground#817c9c28
list.hoverForeground#282930
list.inactiveFocusBackground#817c9c28
list.inactiveSelectionBackground#e2e3e8
list.inactiveSelectionForeground#282930
list.inactiveSelectionIconForeground#42434e
list.invalidItemForeground#525666
list.warningForeground#50535e
listFilterWidget.background#e2e3e8
listFilterWidget.noMatchesOutline#525666
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#50535e80
merge.currentHeaderBackground#50535e80
merge.incomingContentBackground#5f637080
merge.incomingHeaderBackground#5f637080
minimap.background#e2e3e8
minimap.errorHighlight#52566680
minimap.findMatchHighlight#817c9c38
minimap.selectionHighlight#817c9c38
minimap.warningHighlight#50535e80
minimapGutter.addedBackground#5f6370
minimapGutter.deletedBackground#525666
minimapGutter.modifiedBackground#454752
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#25262d
notifications.background#e2e3e8
notifications.border#817c9c38
notifications.foreground#282930
notificationsErrorIcon.foreground#525666
notificationsInfoIcon.foreground#5f6370
notificationsWarningIcon.foreground#50535e
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#25262d
ports.iconRunningProcessForeground#454752
problemsErrorIcon.foreground#525666
problemsInfoIcon.foreground#5f6370
problemsWarningIcon.foreground#50535e
progressBar.background#454752
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#454752
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#25262d
statusBar.debuggingForeground#edeef2
statusBar.foreground#42434e
statusBar.noFolderBackground#edeef2
statusBar.noFolderForeground#42434e
statusBarItem.activeBackground#817c9c45
statusBarItem.errorBackground#edeef2
statusBarItem.errorForeground#525666
statusBarItem.hoverBackground#817c9c38
statusBarItem.prominentBackground#d4d5dc
statusBarItem.prominentForeground#282930
statusBarItem.prominentHoverBackground#817c9c38
statusBarItem.remoteBackground#edeef2
statusBarItem.remoteForeground#50535e
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#282930
tab.activeForeground#282930
tab.activeModifiedBorder#5f6370
tab.border#0000
tab.hoverBackground#817c9c38
tab.inactiveBackground#0000
tab.inactiveForeground#42434e
tab.inactiveModifiedBorder#5f637080
tab.lastPinnedBorder#565760
tab.unfocusedActiveBackground#0000
tab.unfocusedHoverBackground#0000
tab.unfocusedInactiveBackground#0000
tab.unfocusedInactiveModifiedBorder#5f637080
terminal.ansiBlack#d4d5dc
terminal.ansiBlue#5f6370
terminal.ansiBrightBlack#42434e
terminal.ansiBrightBlue#5f6370
terminal.ansiBrightCyan#454752
terminal.ansiBrightGreen#2e3038
terminal.ansiBrightMagenta#25262d
terminal.ansiBrightRed#525666
terminal.ansiBrightWhite#282930
terminal.ansiBrightYellow#50535e
terminal.ansiCyan#454752
terminal.ansiGreen#2e3038
terminal.ansiMagenta#25262d
terminal.ansiRed#525666
terminal.ansiWhite#282930
terminal.ansiYellow#50535e
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#25262de6
textLink.foreground#25262d
textPreformat.foreground#50535e
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	#9da2ad	italic
constant	#2e3038	—
constant.numeric, constant.language, constant.charcter.escape	#454752	—
entity.name	#454752	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#5f6370	—
entity.other.attribute-name, entity.other.inherited-class	#25262d	italic
invalid	#525666	—
invalid.deprecated	#42434e	—
keyword	#2e3038	—
meta.tag, meta.brace	#282930	—
meta.import, meta.export	#2e3038	—
meta.directive.vue	#25262d	italic
meta.property-name.css	#5f6370	—
meta.property-value.css	#50535e	—
meta.tag.other.html	#42434e	—
punctuation	#42434e	—
punctuation.accessor	#2e3038	—
punctuation.definition.string	#50535e	—
punctuation.definition.tag	#565760	—
storage.type, storage.modifier	#2e3038	—
string	#50535e	—
support	#5f6370	—
support.constant	#50535e	—
support.function	#525666	italic
variable	#454752	italic
variable.other, variable.language, variable.function, variable.argument	#282930	—
variable.parameter	#25262d	—

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