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 — Sea Urchin

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#150049
activityBar.border#150049
activityBar.dropBackground#331f63
activityBar.foreground#aa9dcb
activityBarBadge.background#2eacff
activityBarBadge.foreground#150049
badge.background#2eacff
badge.foreground#150049
button.background#ffc8f5
button.foreground#150049
button.hoverBackground#A2D2FF
debugExceptionWidget.background#331f63
debugExceptionWidget.border#331f63
debugToolBar.background#331f63
diffEditor.insertedTextBackground#9bdabb20
diffEditor.removedTextBackground#ff009c20
dropdown.background#331f63
dropdown.border#331f63
dropdown.foreground#c8bde5
editor.background#150049
editor.findMatchBackground#fff3c57f
editor.findMatchHighlightBackground#fff3c53f
editor.findRangeHighlightBackground#331f63
editor.foreground#e6dcff
editor.hoverHighlightBackground#513f7d
editor.inactiveSelectionBackground#ffc8f533
editor.lineHighlightBackground#150049
editor.lineHighlightBorder#331f63
editor.rangeHighlightBackground#331f63
editor.selectionBackground#ffc8f533
editor.selectionHighlightBackground#331f63
editor.wordHighlightBackground#2eacff7f
editor.wordHighlightStrongBackground#ff4ab97f
editorBracketMatch.background#331f63
editorBracketMatch.border#331f63
editorCodeLens.foreground#aa9dcb
editorCursor.foreground#2eacff
editorError.border#e6dcff
editorError.foreground#ff009c
editorGroup.border#331f63
editorGroup.dropBackground#513f7d7f
editorGroup.emptyBackground#150049
editorGroup.focusedEmptyBorder#331f63
editorGroupHeader.noTabsBackground#150049
editorGroupHeader.tabsBackground#150049
editorGroupHeader.tabsBorder#150049
editorGutter.addedBackground#9bdabb
editorGutter.background#150049
editorGutter.deletedBackground#ff009c
editorGutter.modifiedBackground#fff3c5
editorHoverWidget.background#331f63
editorHoverWidget.border#331f63
editorIndentGuide.activeBackground#513f7d
editorIndentGuide.background#8c7eb1
editorLineNumber.foreground#8c7eb1
editorLink.activeForeground#A2D2FF
editorMarkerNavigation.background#331f63
editorMarkerNavigationError.background#ff009c
editorMarkerNavigationWarning.background#ffa685
editorOverviewRuler.addedForeground#9bdabb7f
editorOverviewRuler.border#331f63
editorOverviewRuler.currentContentForeground#A2D2FF
editorOverviewRuler.deletedForeground#ff009c7f
editorOverviewRuler.errorForeground#ff009c7f
editorOverviewRuler.findMatchForeground#fff3c5bf
editorOverviewRuler.incomingContentForeground#ffc8f5
editorOverviewRuler.infoForeground#ffc8f57f
editorOverviewRuler.modifiedForeground#fff3c57f
editorOverviewRuler.rangeHighlightForeground#513f7dbf
editorOverviewRuler.selectionHighlightForeground#331f63bf
editorOverviewRuler.warningForeground#ffa6857f
editorOverviewRuler.wordHighlightForeground#513f7dbf
editorOverviewRuler.wordHighlightStrongForeground#6f5e97bf
editorPane.background#150049
editorRuler.foreground#331f63
editorSuggestWidget.background#331f63
editorSuggestWidget.border#331f63
editorSuggestWidget.foreground#c8bde5
editorSuggestWidget.highlightForeground#ff4ab9
editorSuggestWidget.selectedBackground#513f7d
editorWarning.border#c8bde5
editorWarning.foreground#ffa685
editorWhitespace.foreground#8c7eb1
editorWidget.background#331f63
editorWidget.border#331f63
errorForeground#ff009c
extensionButton.prominentBackground#ffc8f5
extensionButton.prominentForeground#150049
extensionButton.prominentHoverBackground#A2D2FF
focusBorder#2eacff
foreground#ffc8f5
gitDecoration.conflictingResourceForeground#A2D2FF
gitDecoration.deletedResourceForeground#ff009c
gitDecoration.ignoredResourceForeground#6f5e97
gitDecoration.modifiedResourceForeground#fff3c5
gitDecoration.untrackedResourceForeground#2eacff
input.background#331f63
input.border#331f63
input.foreground#c8bde5
input.placeholderForeground#513f7d
inputOption.activeBorder#A2D2FF
inputValidation.errorBackground#331f63
inputValidation.errorBorder#ff009c
inputValidation.infoBackground#331f63
inputValidation.infoBorder#ffc8f5
inputValidation.warningBackground#331f63
inputValidation.warningBorder#ffa685
list.activeSelectionBackground#9bdabb7f
list.activeSelectionForeground#150049
list.dropBackground#6f5e97
list.focusBackground#6f5e97
list.focusForeground#150049
list.highlightForeground#fff3c5
list.hoverBackground#331f63
list.hoverForeground#aa9dcb
list.inactiveSelectionBackground#331f63
list.inactiveSelectionForeground#e6dcff
merge.border#8c7eb1
merge.currentContentBackground#A2D2FF7f
merge.currentHeaderBackground#A2D2FF
merge.incomingContentBackground#ffc8f57f
merge.incomingHeaderBackground#ffc8f5
notification.background#331f63
notification.buttonBackground#ffc8f5
notification.buttonForeground#150049
notification.buttonHoverBackground#A2D2FF
notification.errorBackground#ff009c
notification.errorForeground#150049
notification.foreground#e6dcff
notification.infoBackground#ffc8f5
notification.infoForeground#150049
notification.warningBackground#ffa685
notification.warningForeground#150049
panel.background#150049
panel.border#331f63
panelTitle.activeBorder#6f5e97
panelTitle.activeForeground#c8bde5
panelTitle.inactiveForeground#8c7eb1
peekView.border#ff4ab9
peekViewEditor.background#331f63
peekViewEditor.matchHighlightBackground#fff3c5
peekViewEditorGutter.background#331f63
peekViewResult.background#331f63
peekViewResult.fileForeground#c8bde5
peekViewResult.lineForeground#513f7d
peekViewResult.matchHighlightBackground#fff3c5
peekViewResult.selectionBackground#6f5e97
peekViewResult.selectionForeground#e6dcff
peekViewTitle.background#513f7d
peekViewTitleDescription.foreground#aa9dcb
peekViewTitleLabel.foreground#e6dcff
pickerGroup.border#aa9dcb
pickerGroup.foreground#e6dcff
progressBar.background#9bdabb
scrollbar.shadow#150049
scrollbarSlider.activeBackground#aa9dcb7f
scrollbarSlider.background#6f5e977f
scrollbarSlider.hoverBackground#8c7eb17f
selection.background#513f7d
sideBar.background#150049
sideBar.border#331f63
sideBar.foreground#c8bde5
sideBarSectionHeader.background#513f7d
sideBarSectionHeader.foreground#c8bde5
sideBarTitle.foreground#aa9dcb
statusBar.background#331f63
statusBar.border#331f63
statusBar.debuggingBackground#ffa685
statusBar.debuggingBorder#ffa6857f
statusBar.debuggingForeground#150049
statusBar.foreground#ffc8f5
statusBar.noFolderBackground#2eacff
statusBar.noFolderBorder#2eacff7f
statusBar.noFolderForeground#150049
statusBarItem.activeBackground#A2D2FF
statusBarItem.hoverBackground#9bdabb
statusBarItem.prominentBackground#A2D2FF
statusBarItem.prominentHoverBackground#9bdabb
tab.activeBackground#331f63
tab.activeForeground#aa9dcb
tab.border#150049
tab.inactiveBackground#150049
tab.inactiveForeground#8c7eb1
tab.unfocusedActiveForeground#6f5e97
tab.unfocusedInactiveForeground#513f7d
terminal.ansiBlack#150049
terminal.ansiBlue#ffc8f5
terminal.ansiBrightBlack#8c7eb1
terminal.ansiBrightBlue#e6dcff
terminal.ansiBrightCyan#A2D2FF
terminal.ansiBrightGreen#A2D2FF
terminal.ansiBrightMagenta#ff4ab9
terminal.ansiBrightRed#ffa685
terminal.ansiBrightWhite#ffc8f5
terminal.ansiBrightYellow#fff3c5
terminal.ansiCyan#A2D2FF
terminal.ansiGreen#9bdabb
terminal.ansiMagenta#ff4ab9
terminal.ansiRed#ff009c
terminal.ansiWhite#ffc8f5
terminal.ansiYellow#fff3c5
terminal.background#150049
terminal.foreground#c8bde5
terminal.selectionBackground#ffc8f57f
terminalCursor.background#331f63
terminalCursor.foreground#aa9dcb
titleBar.activeBackground#150049
titleBar.activeForeground#aa9dcb
titleBar.inactiveBackground#150049
titleBar.inactiveForeground#6f5e97
walkThrough.embeddedEditorBackground#150049
welcomePage.buttonBackground#331f63
welcomePage.buttonHoverBackground#513f7d
widget.shadow#150049

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#c8bde5	—
comment	#6f5e97	—
constant	#ff4ab9	—
entity	#A2D2FF	—
invalid	#331f63	—
keyword	#2eacff	—
storage	#ff4ab9	—
string	#9bdabb	—
support	#A2D2FF	—
variable	#e6dcff	—
markup.heading	#A2D2FF	—
markup.deleted	#ff009c	—
markup.inserted	#9bdabb	—
markup.changed	#fff3c5	—
markup.underline	—	underline
markup.underline.link	#ffc8f5	—
markup.list	#e6dcff	—
markup.raw	#ff4ab9	—

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