Anemone Colors

Name: Anemone Colors
Author: anemones

Publisher: anemonesThemes in package: 4

colors for underwater friends

GitHub

Color themes

VS Code preview

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

Anemone Colors — Manatee

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.background#d5dbff
activityBar.border#d5dbff
activityBar.dropBackground#babce5
activityBar.foreground#4c3f7d
activityBarBadge.background#ed0090
activityBarBadge.foreground#d5dbff
badge.background#ed0090
badge.foreground#d5dbff
button.background#007699
button.foreground#d5dbff
button.hoverBackground#750091
debugExceptionWidget.background#babce5
debugExceptionWidget.border#babce5
debugToolBar.background#babce5
diffEditor.insertedTextBackground#00989220
diffEditor.removedTextBackground#f1410020
dropdown.background#babce5
dropdown.border#babce5
dropdown.foreground#301f63
editor.background#d5dbff
editor.findMatchBackground#0024f37f
editor.findMatchHighlightBackground#0024f33f
editor.findRangeHighlightBackground#babce5
editor.foreground#150049
editor.hoverHighlightBackground#9e9ccb
editor.inactiveSelectionBackground#00769933
editor.lineHighlightBackground#d5dbff
editor.lineHighlightBorder#babce5
editor.rangeHighlightBackground#babce5
editor.selectionBackground#00769933
editor.selectionHighlightBackground#babce5
editor.wordHighlightBackground#ed00907f
editor.wordHighlightStrongBackground#0018b17f
editorBracketMatch.background#babce5
editorBracketMatch.border#babce5
editorCodeLens.foreground#4c3f7d
editorCursor.foreground#ed0090
editorError.border#150049
editorError.foreground#f14100
editorGroup.border#babce5
editorGroup.dropBackground#9e9ccb7f
editorGroup.emptyBackground#d5dbff
editorGroup.focusedEmptyBorder#babce5
editorGroupHeader.noTabsBackground#d5dbff
editorGroupHeader.tabsBackground#d5dbff
editorGroupHeader.tabsBorder#d5dbff
editorGutter.addedBackground#009892
editorGutter.background#d5dbff
editorGutter.deletedBackground#f14100
editorGutter.modifiedBackground#0024f3
editorHoverWidget.background#babce5
editorHoverWidget.border#babce5
editorIndentGuide.activeBackground#9e9ccb
editorIndentGuide.background#babce5
editorLineNumber.foreground#9e9ccb
editorLink.activeForeground#750091
editorMarkerNavigation.background#babce5
editorMarkerNavigationError.background#f14100
editorMarkerNavigationWarning.background#00bce1
editorOverviewRuler.addedForeground#0098927f
editorOverviewRuler.border#babce5
editorOverviewRuler.commonContentForeground#ed0090
editorOverviewRuler.currentContentForeground#750091
editorOverviewRuler.deletedForeground#f141007f
editorOverviewRuler.errorForeground#f141007f
editorOverviewRuler.findMatchForeground#0024f3bf
editorOverviewRuler.incomingContentForeground#007699
editorOverviewRuler.infoForeground#0076997f
editorOverviewRuler.modifiedForeground#0024f37f
editorOverviewRuler.rangeHighlightForeground#9e9ccbbf
editorOverviewRuler.selectionHighlightForeground#babce5bf
editorOverviewRuler.warningForeground#00bce17f
editorOverviewRuler.wordHighlightForeground#9e9ccbbf
editorOverviewRuler.wordHighlightStrongForeground#837db1bf
editorPane.background#d5dbff
editorRuler.foreground#babce5
editorSuggestWidget.background#babce5
editorSuggestWidget.border#babce5
editorSuggestWidget.foreground#301f63
editorSuggestWidget.highlightForeground#0018b1
editorSuggestWidget.selectedBackground#9e9ccb
editorWarning.border#301f63
editorWarning.foreground#00bce1
editorWhitespace.foreground#babce5
editorWidget.background#babce5
editorWidget.border#babce5
errorForeground#f14100
extensionButton.prominentBackground#007699
extensionButton.prominentForeground#d5dbff
extensionButton.prominentHoverBackground#750091
focusBorder#ed0090
foreground#150049
gitDecoration.conflictingResourceForeground#750091
gitDecoration.deletedResourceForeground#f14100
gitDecoration.ignoredResourceForeground#837db1
gitDecoration.modifiedResourceForeground#0024f3
gitDecoration.untrackedResourceForeground#ed0090
input.background#babce5
input.border#babce5
input.foreground#301f63
input.placeholderForeground#9e9ccb
inputOption.activeBorder#750091
inputValidation.errorBackground#babce5
inputValidation.errorBorder#f14100
inputValidation.infoBackground#babce5
inputValidation.infoBorder#007699
inputValidation.warningBackground#babce5
inputValidation.warningBorder#00bce1
list.activeSelectionBackground#0098927f
list.activeSelectionForeground#d5dbff
list.dropBackground#837db1
list.errorForeground#f14100
list.focusBackground#837db1
list.focusForeground#d5dbff
list.highlightForeground#0024f3
list.hoverBackground#babce5
list.hoverForeground#4c3f7d
list.inactiveSelectionBackground#babce5
list.inactiveSelectionForeground#150049
list.invalidItemForeground#f14100
list.warningForeground#0024f3
listFilterWidget.background#babce5
listFilterWidget.noMatchesOutline#f14100
listFilterWidget.outline#007699
merge.border#675e97
merge.commonContentBackground#ed00904c
merge.commonHeaderBackground#ed00904c
merge.currentContentBackground#7500914c
merge.currentHeaderBackground#7500914c
merge.incomingContentBackground#0076994c
merge.incomingHeaderBackground#0076994c
notification.background#babce5
notification.buttonBackground#007699
notification.buttonForeground#d5dbff
notification.buttonHoverBackground#750091
notification.errorBackground#f14100
notification.errorForeground#d5dbff
notification.foreground#150049
notification.infoBackground#007699
notification.infoForeground#d5dbff
notification.warningBackground#00bce1
notification.warningForeground#d5dbff
panel.background#d5dbff
panel.border#babce5
panelTitle.activeBorder#837db1
panelTitle.activeForeground#301f63
panelTitle.inactiveForeground#675e97
peekView.border#0018b1
peekViewEditor.background#babce5
peekViewEditor.matchHighlightBackground#0024f37f
peekViewEditorGutter.background#babce5
peekViewResult.background#babce5
peekViewResult.fileForeground#301f63
peekViewResult.lineForeground#9e9ccb
peekViewResult.matchHighlightBackground#0024f3
peekViewResult.selectionBackground#837db1
peekViewResult.selectionForeground#150049
peekViewTitle.background#9e9ccb
peekViewTitleDescription.foreground#4c3f7d
peekViewTitleLabel.foreground#150049
pickerGroup.border#4c3f7d
pickerGroup.foreground#150049
progressBar.background#009892
scrollbar.shadow#15004966
scrollbarSlider.activeBackground#4c3f7d7f
scrollbarSlider.background#837db17f
scrollbarSlider.hoverBackground#675e977f
selection.background#9e9ccb
sideBar.background#d5dbff
sideBar.border#babce5
sideBar.foreground#301f63
sideBarSectionHeader.background#9e9ccb
sideBarSectionHeader.foreground#301f63
sideBarTitle.foreground#4c3f7d
statusBar.background#007699
statusBar.border#0076997f
statusBar.debuggingBackground#00bce1
statusBar.debuggingBorder#00bce17f
statusBar.debuggingForeground#d5dbff
statusBar.foreground#d5dbff
statusBar.noFolderBackground#ed0090
statusBar.noFolderBorder#ed00907f
statusBar.noFolderForeground#d5dbff
statusBarItem.activeBackground#750091
statusBarItem.hoverBackground#009892
statusBarItem.prominentBackground#750091
statusBarItem.prominentHoverBackground#009892
tab.activeBackground#d5dbff
tab.activeForeground#301f63
tab.border#d5dbff
tab.inactiveBackground#babce5
tab.inactiveForeground#837db1
tab.unfocusedActiveForeground#837db1
tab.unfocusedInactiveForeground#9e9ccb
terminal.ansiBlack#d5dbff
terminal.ansiBlue#007699
terminal.ansiBrightBlack#babce5
terminal.ansiBrightBlue#007699
terminal.ansiBrightCyan#750091
terminal.ansiBrightGreen#750091
terminal.ansiBrightMagenta#0018b1
terminal.ansiBrightRed#00bce1
terminal.ansiBrightWhite#150049
terminal.ansiBrightYellow#0024f3
terminal.ansiCyan#750091
terminal.ansiGreen#009892
terminal.ansiMagenta#0018b1
terminal.ansiRed#f14100
terminal.ansiWhite#301f63
terminal.ansiYellow#0024f3
terminal.background#d5dbff
terminal.foreground#301f63
terminal.selectionBackground#0076997f
terminalCursor.background#babce5
terminalCursor.foreground#4c3f7d
titleBar.activeBackground#d5dbff
titleBar.activeForeground#4c3f7d
titleBar.inactiveBackground#d5dbff
titleBar.inactiveForeground#837db1
tree.indentGuidesStroke#babce5
walkThrough.embeddedEditorBackground#d5dbff
welcomePage.buttonBackground#babce5
welcomePage.buttonHoverBackground#9e9ccb
widget.shadow#15004966

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#301f63	—
comment	#837db1	—
constant	#0018b1	—
entity	#750091	—
invalid	#f14100	—
keyword	#ed0090	—
storage	#0018b1	—
string	#009892	—
support	#750091	—
variable	#150049	—
markup.heading	#750091	—
markup.deleted	#f14100	—
markup.inserted	#009892	—
markup.changed	#0024f3	—
markup.underline	—	underline
markup.underline.link	#007699	—
markup.list	#150049	—
markup.raw	#0018b1	—

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