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 Sunset

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#6e6a86	italic
constant	#DB7B75	—
constant.numeric, constant.language, constant.charcter.escape	#A7C8BD	—
entity.name	#A7C8BD	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#E79680	—
entity.other.attribute-name, entity.other.inherited-class	#8B95BB	italic
invalid	#EFC3A1	—
invalid.deprecated	#908caa	—
keyword	#DB7B75	—
meta.tag, meta.brace	#F2E9E1	—
meta.import, meta.export	#DB7B75	—
meta.directive.vue	#8B95BB	italic
meta.property-name.css	#E79680	—
meta.property-value.css	#83B4B5	—
meta.tag.other.html	#908caa	—
punctuation	#908caa	—
punctuation.accessor	#DB7B75	—
punctuation.definition.string	#83B4B5	—
punctuation.definition.tag	#6e6a86	—
storage.type, storage.modifier	#DB7B75	—
string	#83B4B5	—
support	#E79680	—
support.constant	#83B4B5	—
support.function	#EFC3A1	italic
variable	#A7C8BD	italic
variable.other, variable.language, variable.function, variable.argument	#F2E9E1	—
variable.parameter	#8B95BB	—

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