Malibu

Name: Malibu
Author: Michael Andreuzza

Publisher: Michael AndreuzzaThemes in package: 2

A retro theme inspired by the surfing days in Malibu beach

Open in VS Code GitHub

Color themes

VS Code preview

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

Malibu — Malibu Sunrise

fetchUser.ts

index.ts

README.md

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#93A0A5	italic
constant	#c8342a	—
constant.numeric, constant.language, constant.charcter.escape	#78aa9a	—
entity.name	#78aa9a	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#da5d3c	—
entity.other.attribute-name, entity.other.inherited-class	#3c63a6	italic
invalid	#e7a26e	—
invalid.deprecated	#758C93	—
keyword	#c8342a	—
markup.inserted.diff	#da5d3c	—
markup.deleted.diff	#e7a26e	—
meta.diff.range	#3c63a6	—
meta.tag, meta.brace	#526479	—
meta.import, meta.export	#c8342a	—
meta.directive.vue	#3c63a6	italic
meta.property-name.css	#da5d3c	—
meta.property-value.css	#418b8d	—
meta.tag.other.html	#758C93	—
punctuation	#758C93	—
punctuation.accessor	#c8342a	—
punctuation.definition.string	#418b8d	—
punctuation.definition.tag	#93A0A5	—
storage.type, storage.modifier	#c8342a	—
string	#418b8d	—
support	#da5d3c	—
support.constant	#418b8d	—
support.function	#e7a26e	italic
variable	#78aa9a	italic
variable.other, variable.language, variable.function, variable.argument	#526479	—
variable.parameter	#3c63a6	—

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