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

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#00106a
activityBar.border#00106a
activityBar.dropBackground#23327a
activityBar.foreground#aebbbb
activityBarBadge.background#2eacff
activityBarBadge.foreground#00106a
badge.background#2eacff
badge.foreground#00106a
button.background#ffc8f5
button.foreground#00106a
button.hoverBackground#d2ebff
debugExceptionWidget.background#23327a
debugExceptionWidget.border#23327a
debugToolBar.background#23327a
diffEditor.insertedTextBackground#9bdabb20
diffEditor.removedTextBackground#ff009c20
dropdown.background#23327a
dropdown.border#23327a
dropdown.foreground#d0ddcc
editor.background#00106a
editor.findMatchBackground#ffdd5d7f
editor.findMatchHighlightBackground#ffdd5d3f
editor.findRangeHighlightBackground#23327a
editor.foreground#f3ffdc
editor.hoverHighlightBackground#45548b
editor.inactiveSelectionBackground#ffc8f533
editor.lineHighlightBackground#00106a
editor.lineHighlightBorder#23327a
editor.rangeHighlightBackground#23327a
editor.selectionBackground#ffc8f533
editor.selectionHighlightBackground#23327a
editor.wordHighlightBackground#2eacff7f
editor.wordHighlightStrongBackground#ff4ab97f
editorBracketMatch.background#23327a
editorBracketMatch.border#23327a
editorCodeLens.foreground#aebbbb
editorCursor.foreground#2eacff
editorError.border#f3ffdc
editorError.foreground#ff009c
editorGroup.border#23327a
editorGroup.dropBackground#45548b7f
editorGroup.emptyBackground#00106a
editorGroup.focusedEmptyBorder#23327a
editorGroupHeader.noTabsBackground#00106a
editorGroupHeader.tabsBackground#00106a
editorGroupHeader.tabsBorder#00106a
editorGutter.addedBackground#9bdabb
editorGutter.background#00106a
editorGutter.deletedBackground#ff009c
editorGutter.modifiedBackground#ffdd5d
editorHoverWidget.background#23327a
editorHoverWidget.border#23327a
editorIndentGuide.activeBackground#45548b
editorIndentGuide.background#23327a
editorLineNumber.foreground#45548b
editorLink.activeForeground#d2ebff
editorMarkerNavigation.background#23327a
editorMarkerNavigationError.background#ff009c
editorMarkerNavigationWarning.background#ffa685
editorOverviewRuler.addedForeground#9bdabb7f
editorOverviewRuler.border#23327a
editorOverviewRuler.commonContentForeground#2eacff
editorOverviewRuler.currentContentForeground#d2ebff
editorOverviewRuler.deletedForeground#ff009c7f
editorOverviewRuler.errorForeground#ff009c7f
editorOverviewRuler.findMatchForeground#ffdd5dbf
editorOverviewRuler.incomingContentForeground#ffc8f5
editorOverviewRuler.infoForeground#ffc8f57f
editorOverviewRuler.modifiedForeground#ffdd5d7f
editorOverviewRuler.rangeHighlightForeground#45548bbf
editorOverviewRuler.selectionHighlightForeground#23327abf
editorOverviewRuler.warningForeground#ffa6857f
editorOverviewRuler.wordHighlightForeground#45548bbf
editorOverviewRuler.wordHighlightStrongForeground#68769bbf
editorPane.background#00106a
editorRuler.foreground#23327a
editorSuggestWidget.background#23327a
editorSuggestWidget.border#23327a
editorSuggestWidget.foreground#d0ddcc
editorSuggestWidget.highlightForeground#ff4ab9
editorSuggestWidget.selectedBackground#45548b
editorWarning.border#d0ddcc
editorWarning.foreground#ffa685
editorWhitespace.foreground#23327a
editorWidget.background#23327a
editorWidget.border#23327a
errorForeground#ff009c
extensionButton.prominentBackground#ffc8f5
extensionButton.prominentForeground#00106a
extensionButton.prominentHoverBackground#d2ebff
focusBorder#2eacff
foreground#f3ffdc
gitDecoration.conflictingResourceForeground#d2ebff
gitDecoration.deletedResourceForeground#ff009c
gitDecoration.ignoredResourceForeground#68769b
gitDecoration.modifiedResourceForeground#ffdd5d
gitDecoration.untrackedResourceForeground#2eacff
input.background#23327a
input.border#23327a
input.foreground#d0ddcc
input.placeholderForeground#45548b
inputOption.activeBorder#d2ebff
inputValidation.errorBackground#23327a
inputValidation.errorBorder#ff009c
inputValidation.infoBackground#23327a
inputValidation.infoBorder#ffc8f5
inputValidation.warningBackground#23327a
inputValidation.warningBorder#ffa685
list.activeSelectionBackground#9bdabb7f
list.activeSelectionForeground#00106a
list.dropBackground#68769b
list.errorForeground#ff009c
list.focusBackground#68769b
list.focusForeground#00106a
list.highlightForeground#ffdd5d
list.hoverBackground#23327a
list.hoverForeground#aebbbb
list.inactiveSelectionBackground#23327a
list.inactiveSelectionForeground#f3ffdc
list.invalidItemForeground#ff009c
list.warningForeground#ffdd5d
listFilterWidget.background#23327a
listFilterWidget.noMatchesOutline#ff009c
listFilterWidget.outline#ffc8f5
merge.border#8b99ab
merge.commonContentBackground#2eacff4c
merge.commonHeaderBackground#2eacff4c
merge.currentContentBackground#d2ebff4c
merge.currentHeaderBackground#d2ebff4c
merge.incomingContentBackground#ffc8f54c
merge.incomingHeaderBackground#ffc8f54c
notification.background#23327a
notification.buttonBackground#ffc8f5
notification.buttonForeground#00106a
notification.buttonHoverBackground#d2ebff
notification.errorBackground#ff009c
notification.errorForeground#00106a
notification.foreground#f3ffdc
notification.infoBackground#ffc8f5
notification.infoForeground#00106a
notification.warningBackground#ffa685
notification.warningForeground#00106a
panel.background#00106a
panel.border#23327a
panelTitle.activeBorder#68769b
panelTitle.activeForeground#d0ddcc
panelTitle.inactiveForeground#8b99ab
peekView.border#ff4ab9
peekViewEditor.background#23327a
peekViewEditor.matchHighlightBackground#ffdd5d7f
peekViewEditorGutter.background#23327a
peekViewResult.background#23327a
peekViewResult.fileForeground#d0ddcc
peekViewResult.lineForeground#45548b
peekViewResult.matchHighlightBackground#ffdd5d
peekViewResult.selectionBackground#68769b
peekViewResult.selectionForeground#f3ffdc
peekViewTitle.background#45548b
peekViewTitleDescription.foreground#aebbbb
peekViewTitleLabel.foreground#f3ffdc
pickerGroup.border#aebbbb
pickerGroup.foreground#f3ffdc
progressBar.background#9bdabb
scrollbar.shadow#00106a
scrollbarSlider.activeBackground#aebbbb7f
scrollbarSlider.background#68769b7f
scrollbarSlider.hoverBackground#8b99ab7f
selection.background#45548b
sideBar.background#00106a
sideBar.border#23327a
sideBar.foreground#d0ddcc
sideBarSectionHeader.background#45548b
sideBarSectionHeader.foreground#d0ddcc
sideBarTitle.foreground#aebbbb
statusBar.background#ffc8f5
statusBar.border#ffc8f57f
statusBar.debuggingBackground#ffa685
statusBar.debuggingBorder#ffa6857f
statusBar.debuggingForeground#00106a
statusBar.foreground#00106a
statusBar.noFolderBackground#2eacff
statusBar.noFolderBorder#2eacff7f
statusBar.noFolderForeground#00106a
statusBarItem.activeBackground#d2ebff
statusBarItem.hoverBackground#9bdabb
statusBarItem.prominentBackground#d2ebff
statusBarItem.prominentHoverBackground#9bdabb
tab.activeBackground#00106a
tab.activeForeground#d0ddcc
tab.border#00106a
tab.inactiveBackground#23327a
tab.inactiveForeground#68769b
tab.unfocusedActiveForeground#68769b
tab.unfocusedInactiveForeground#45548b
terminal.ansiBlack#00106a
terminal.ansiBlue#ffc8f5
terminal.ansiBrightBlack#23327a
terminal.ansiBrightBlue#ffc8f5
terminal.ansiBrightCyan#d2ebff
terminal.ansiBrightGreen#d2ebff
terminal.ansiBrightMagenta#ff4ab9
terminal.ansiBrightRed#ffa685
terminal.ansiBrightWhite#f3ffdc
terminal.ansiBrightYellow#ffdd5d
terminal.ansiCyan#d2ebff
terminal.ansiGreen#9bdabb
terminal.ansiMagenta#ff4ab9
terminal.ansiRed#ff009c
terminal.ansiWhite#d0ddcc
terminal.ansiYellow#ffdd5d
terminal.background#00106a
terminal.foreground#d0ddcc
terminal.selectionBackground#ffc8f57f
terminalCursor.background#23327a
terminalCursor.foreground#aebbbb
titleBar.activeBackground#00106a
titleBar.activeForeground#aebbbb
titleBar.inactiveBackground#00106a
titleBar.inactiveForeground#68769b
tree.indentGuidesStroke#23327a
walkThrough.embeddedEditorBackground#00106a
welcomePage.buttonBackground#23327a
welcomePage.buttonHoverBackground#45548b
widget.shadow#00106a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#d0ddcc	—
comment	#68769b	—
constant	#ff4ab9	—
entity	#d2ebff	—
invalid	#ff009c	—
keyword	#2eacff	—
storage	#ff4ab9	—
string	#9bdabb	—
support	#d2ebff	—
variable	#f3ffdc	—
markup.heading	#d2ebff	—
markup.deleted	#ff009c	—
markup.inserted	#9bdabb	—
markup.changed	#ffdd5d	—
markup.underline	—	underline
markup.underline.link	#ffc8f5	—
markup.list	#f3ffdc	—
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}!`;
}