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 — Anemones

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#eae2ff
activityBar.border#eae2ff
activityBar.dropBackground#ccc2e5
activityBar.foreground#52417d
activityBarBadge.background#0018b1
activityBarBadge.foreground#eae2ff
badge.background#0018b1
badge.foreground#eae2ff
button.background#007699
button.foreground#eae2ff
button.hoverBackground#ed0090
debugExceptionWidget.background#ccc2e5
debugExceptionWidget.border#ccc2e5
debugToolBar.background#ccc2e5
diffEditor.insertedTextBackground#00989220
diffEditor.removedTextBackground#f1410020
dropdown.background#ccc2e5
dropdown.border#ccc2e5
dropdown.foreground#332063
editor.background#eae2ff
editor.findMatchBackground#7500917f
editor.findMatchHighlightBackground#7500913f
editor.findRangeHighlightBackground#ccc2e5
editor.foreground#150049
editor.hoverHighlightBackground#ada1cb
editor.inactiveSelectionBackground#00769933
editor.lineHighlightBackground#eae2ff
editor.lineHighlightBorder#ccc2e5
editor.rangeHighlightBackground#ccc2e5
editor.selectionBackground#00769933
editor.selectionHighlightBackground#ccc2e5
editor.wordHighlightBackground#0018b17f
editor.wordHighlightStrongBackground#0024f37f
editorBracketMatch.background#ccc2e5
editorBracketMatch.border#ccc2e5
editorCodeLens.foreground#52417d
editorCursor.foreground#0018b1
editorError.border#150049
editorError.foreground#f14100
editorGroup.border#ccc2e5
editorGroup.dropBackground#ada1cb7f
editorGroup.emptyBackground#eae2ff
editorGroup.focusedEmptyBorder#ccc2e5
editorGroupHeader.noTabsBackground#eae2ff
editorGroupHeader.tabsBackground#eae2ff
editorGroupHeader.tabsBorder#eae2ff
editorGutter.addedBackground#009892
editorGutter.background#eae2ff
editorGutter.deletedBackground#f14100
editorGutter.modifiedBackground#750091
editorHoverWidget.background#ccc2e5
editorHoverWidget.border#ccc2e5
editorIndentGuide.activeBackground#ada1cb
editorIndentGuide.background#ccc2e5
editorLineNumber.foreground#ada1cb
editorLink.activeForeground#ed0090
editorMarkerNavigation.background#ccc2e5
editorMarkerNavigationError.background#f14100
editorMarkerNavigationWarning.background#00bce1
editorOverviewRuler.addedForeground#0098927f
editorOverviewRuler.border#ccc2e5
editorOverviewRuler.currentContentForeground#ed0090
editorOverviewRuler.deletedForeground#f141007f
editorOverviewRuler.errorForeground#f141007f
editorOverviewRuler.findMatchForeground#750091bf
editorOverviewRuler.incomingContentForeground#007699
editorOverviewRuler.infoForeground#0076997f
editorOverviewRuler.modifiedForeground#7500917f
editorOverviewRuler.rangeHighlightForeground#ada1cbbf
editorOverviewRuler.selectionHighlightForeground#ccc2e5bf
editorOverviewRuler.warningForeground#00bce17f
editorOverviewRuler.wordHighlightForeground#ada1cbbf
editorOverviewRuler.wordHighlightStrongForeground#8f81b1bf
editorPane.background#eae2ff
editorRuler.foreground#ccc2e5
editorSuggestWidget.background#ccc2e5
editorSuggestWidget.border#ccc2e5
editorSuggestWidget.foreground#332063
editorSuggestWidget.highlightForeground#0024f3
editorSuggestWidget.selectedBackground#ada1cb
editorWarning.border#332063
editorWarning.foreground#00bce1
editorWhitespace.foreground#ccc2e5
editorWidget.background#ccc2e5
editorWidget.border#ccc2e5
errorForeground#f14100
extensionButton.prominentBackground#007699
extensionButton.prominentForeground#eae2ff
extensionButton.prominentHoverBackground#ed0090
focusBorder#0018b1
foreground#150049
gitDecoration.conflictingResourceForeground#ed0090
gitDecoration.deletedResourceForeground#f14100
gitDecoration.ignoredResourceForeground#8f81b1
gitDecoration.modifiedResourceForeground#750091
gitDecoration.untrackedResourceForeground#0018b1
input.background#ccc2e5
input.border#ccc2e5
input.foreground#332063
input.placeholderForeground#ada1cb
inputOption.activeBorder#ed0090
inputValidation.errorBackground#ccc2e5
inputValidation.errorBorder#f14100
inputValidation.infoBackground#ccc2e5
inputValidation.infoBorder#007699
inputValidation.warningBackground#ccc2e5
inputValidation.warningBorder#00bce1
list.activeSelectionBackground#0098927f
list.activeSelectionForeground#eae2ff
list.dropBackground#8f81b1
list.focusBackground#8f81b1
list.focusForeground#eae2ff
list.highlightForeground#750091
list.hoverBackground#ccc2e5
list.hoverForeground#52417d
list.inactiveSelectionBackground#ccc2e5
list.inactiveSelectionForeground#150049
merge.border#706197
merge.currentContentBackground#ed00907f
merge.currentHeaderBackground#ed0090
merge.incomingContentBackground#0076997f
merge.incomingHeaderBackground#007699
notification.background#ccc2e5
notification.buttonBackground#007699
notification.buttonForeground#eae2ff
notification.buttonHoverBackground#ed0090
notification.errorBackground#f14100
notification.errorForeground#eae2ff
notification.foreground#150049
notification.infoBackground#007699
notification.infoForeground#eae2ff
notification.warningBackground#00bce1
notification.warningForeground#eae2ff
panel.background#eae2ff
panel.border#ccc2e5
panelTitle.activeBorder#8f81b1
panelTitle.activeForeground#332063
panelTitle.inactiveForeground#706197
peekView.border#0024f3
peekViewEditor.background#ccc2e5
peekViewEditor.matchHighlightBackground#750091
peekViewEditorGutter.background#ccc2e5
peekViewResult.background#ccc2e5
peekViewResult.fileForeground#332063
peekViewResult.lineForeground#ada1cb
peekViewResult.matchHighlightBackground#750091
peekViewResult.selectionBackground#8f81b1
peekViewResult.selectionForeground#150049
peekViewTitle.background#ada1cb
peekViewTitleDescription.foreground#52417d
peekViewTitleLabel.foreground#150049
pickerGroup.border#52417d
pickerGroup.foreground#150049
progressBar.background#009892
scrollbar.shadow#15004966
scrollbarSlider.activeBackground#52417d7f
scrollbarSlider.background#8f81b17f
scrollbarSlider.hoverBackground#7061977f
selection.background#ada1cb
sideBar.background#eae2ff
sideBar.border#ccc2e5
sideBar.foreground#332063
sideBarSectionHeader.background#ada1cb
sideBarSectionHeader.foreground#332063
sideBarTitle.foreground#52417d
statusBar.background#ccc2e5
statusBar.border#52417d
statusBar.debuggingBackground#00bce1
statusBar.debuggingBorder#00bce17f
statusBar.debuggingForeground#eae2ff
statusBar.foreground#332063
statusBar.noFolderBackground#0018b1
statusBar.noFolderBorder#0018b17f
statusBar.noFolderForeground#eae2ff
statusBarItem.activeBackground#ed0090
statusBarItem.hoverBackground#009892
statusBarItem.prominentBackground#ed0090
statusBarItem.prominentHoverBackground#009892
tab.activeBackground#ccc2e5
tab.activeForeground#52417d
tab.border#eae2ff
tab.inactiveBackground#eae2ff
tab.inactiveForeground#706197
tab.unfocusedActiveForeground#8f81b1
tab.unfocusedInactiveForeground#ada1cb
terminal.ansiBlack#eae2ff
terminal.ansiBlue#007699
terminal.ansiBrightBlack#ccc2e5
terminal.ansiBrightBlue#007699
terminal.ansiBrightCyan#ed0090
terminal.ansiBrightGreen#ed0090
terminal.ansiBrightMagenta#0024f3
terminal.ansiBrightRed#00bce1
terminal.ansiBrightWhite#150049
terminal.ansiBrightYellow#750091
terminal.ansiCyan#ed0090
terminal.ansiGreen#009892
terminal.ansiMagenta#0024f3
terminal.ansiRed#f14100
terminal.ansiWhite#332063
terminal.ansiYellow#750091
terminal.background#eae2ff
terminal.foreground#332063
terminal.selectionBackground#0076997f
terminalCursor.background#ccc2e5
terminalCursor.foreground#52417d
titleBar.activeBackground#eae2ff
titleBar.activeForeground#52417d
titleBar.inactiveBackground#eae2ff
titleBar.inactiveForeground#8f81b1
walkThrough.embeddedEditorBackground#eae2ff
welcomePage.buttonBackground#ccc2e5
welcomePage.buttonHoverBackground#ada1cb
widget.shadow#15004966

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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