Waterframe Theme

Name: Waterframe Theme
Author: Ivan Esmantovich

Publisher: Ivan EsmantovichThemes in package: 1

Long ago, people lived in peace, bathed in the warmth of light.

GitHub

VS Code preview

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

Waterframe Theme — Waterframe Theme

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

badge.background#CEC7FF
breadcrumb.activeSelectionForeground#9381FF
breadcrumb.background#ffffff
breadcrumb.foreground#000000
breadcrumbPicker.background#ffffff
button.background#9381FF
button.hoverBackground#745CFF
debugConsole.errorForeground#FA00D6
debugConsole.warningForeground#BFD62E
diffEditor.insertedLineBackground#BFD62E40
diffEditor.insertedTextBackground#BFD62E40
diffEditor.removedLineBackground#FA00D640
diffEditor.removedTextBackground#FA00D640
editor.background#ffffff
editor.findMatchBackground#CEC7FF80
editor.findMatchHighlightBackground#CEC7FF80
editor.findRangeHighlightBackground#CEC7FF80
editor.foreground#000000
editor.hoverHighlightBackground#CEC7FF80
editor.inactiveSelectionBackground#F7F6FF
editor.lineHighlightBackground#F7F6FF
editor.lineHighlightBorder#F7F6FF
editor.rangeHighlightBackground#CEC7FF80
editor.selectionBackground#F7F6FF
editor.selectionHighlightBackground#CEC7FF80
editor.stackFrameHighlightBackground#CEC7FF80
editor.symbolHighlightBackground#CEC7FF80
editor.wordHighlightBackground#CEC7FF80
editor.wordHighlightStrongBackground#CEC7FF80
editor.wordHighlightTextBackground#CEC7FF80
editorBracketHighlight.foreground1#4A0A77
editorBracketHighlight.foreground2#8B2FC9
editorBracketHighlight.foreground3#bd68ee
editorBracketHighlight.foreground4#D283FF
editorBracketHighlight.foreground5#E1ADFF
editorBracketHighlight.foreground6#E9C2FF
editorError.foreground#FA00D6
editorGroup.dropBackground#F7F6FF
editorGutter.addedBackground#BFD62E
editorGutter.background#ffffff
editorGutter.deletedBackground#FF99F0
editorGutter.modifiedBackground#DBE788
editorHoverWidget.highlightForeground#CEC7FF
editorLineNumber.activeForeground#CEC7FF
editorLineNumber.foreground#F7F6FF
editorOverviewRuler.errorForeground#FA00D6
editorOverviewRuler.warningForeground#BFD62E
editorSuggestWidget.background#ffffff
editorSuggestWidget.focusHighlightForeground#9381FF
editorSuggestWidget.highlightForeground#9381FF
editorSuggestWidget.selectedBackground#F7F6FF
editorSuggestWidget.selectedForeground#000000
editorSuggestWidget.selectedIconForeground#000000
editorUnicodeHighlight.background#CEC7FF80
editorUnnecessaryCode.opacity#00000040
editorWarning.foreground#BFD62E
editorWidget.background#ffffff
editorWidget.foreground#000000
errorForeground#FA00D6
focusBorder#E0E0E0
gitDecoration.modifiedResourceForeground#DBE788
gitDecoration.untrackedResourceForeground#BFD62E
input.background#FFFFFF
inputOption.activeBorder#FF99F0
inputValidation.errorBackground#FF99F0
inputValidation.errorBorder#FFFFFF
inputValidation.errorForeground#FFFFFF
inputValidation.infoBackground#FFFFFF
inputValidation.infoForeground#000000
inputValidation.warningBackground#BFD62E
inputValidation.warningForeground#FFFFFF
list.activeSelectionBackground#CEC7FF
list.activeSelectionForeground#000000
list.activeSelectionIconForeground#000000
list.errorForeground#FA00D6
list.focusBackground#F7F6FF
list.focusForeground#000000
list.focusHighlightForeground#9381FF
list.focusOutline#F7F6FF
list.highlightForeground#9381FF
list.inactiveFocusBackground#F7F6FF
list.inactiveSelectionBackground#F7F6FF
list.warningForeground#BFD62E
minimap.errorHighlight#FA00D6
notebookStatusErrorIcon.foreground#FA00D6
notificationsErrorIcon.foreground#FA00D6
notificationsWarningIcon.foreground#BFD62E
panel.background#FFFFFF
panel.border#E0E0E0
panelSection.dropBackground#F7F6FF
peekView.border#E0E0E0
peekViewEditor.background#FFFFFF
pickerGroup.border#E0E0E0
pickerGroup.foreground#000000
problemsErrorIcon.foreground#FA00D6
problemsWarningIcon.foreground#BFD62E
progressBar.background#CEC7FF
quickInput.background#ffffff
quickInput.foreground#000000
quickInputList.focusBackground#F7F6FF
quickInputList.focusForeground#000000
quickInputList.focusIconForeground#000000
quickInputTitle.background#000000
scrollbarSlider.activeBackground#745CFF
scrollbarSlider.background#CEC7FF80
scrollbarSlider.hoverBackground#9381FF
searchEditor.findMatchBackground#CEC7FF80
sideBar.background#FFFFFF
sideBar.border#E0E0E0
sideBar.dropBackground#F7F6FF
sideBar.foreground#000000
sideBarSectionHeader.background#F7F6FF
statusBar.background#F7F6FF
statusBar.debuggingBackground#F7F6FF
statusBar.foreground#000000
statusBar.noFolderBackground#F7F6FF
statusBarItem.errorBackground#F7F6FF
statusBarItem.errorForeground#FA00D6
statusBarItem.hoverBackground#CEC7FF
statusBarItem.warningBackground#BFD62E
statusBarItem.warningForeground#BFD62E
symbolIcon.arrayForeground#000000
symbolIcon.booleanForeground#000000
symbolIcon.classForeground#9381FF
symbolIcon.colorForeground#FF99F0
symbolIcon.constantForeground#000000
symbolIcon.constructorForeground#9381FF
symbolIcon.enumeratorForeground#BFD62E
symbolIcon.enumeratorMemberForeground#CEC7FF
symbolIcon.eventForeground#000000
symbolIcon.fieldForeground#CEC7FF
symbolIcon.fileForeground#FF99F0
symbolIcon.folderForeground#FF99F0
symbolIcon.functionForeground#9381FF
symbolIcon.interfaceForeground#BFD62E
symbolIcon.keyForeground#CEC7FF
symbolIcon.keywordForeground#000000
symbolIcon.methodForeground#9381FF
symbolIcon.moduleForeground#9381FF
symbolIcon.namespaceForeground#BFD62E
symbolIcon.nullForeground#000000
symbolIcon.numberForeground#000000
symbolIcon.objectForeground#9381FF
symbolIcon.operatorForeground#000000
symbolIcon.packageForeground#FF99F0
symbolIcon.propertyForeground#CEC7FF
symbolIcon.referenceForeground#FF99F0
symbolIcon.snippetForeground#FF99F0
symbolIcon.stringForeground#000000
symbolIcon.structForeground#9381FF
symbolIcon.textForeground#000000
symbolIcon.typeParameterForeground#CEC7FF
symbolIcon.unitForeground#000000
symbolIcon.variableForeground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable	#000000
entity.name.function	#9381FF	bold
entity.name.method	#9381FF	bold
entity.name.type	#BFD62E	—
entity.name.type	#BFD62E	—
support.type	#BFD62E	—
entity.name.tag	#000000	bold
entity.other.attribute-name	#CEC7FF	bold
storage.type	#000000	italic
storage.type.function.arrow	#000000	bold
keyword.control	#000000	bold
string	#36454f	italic
comment	#CEC7FF	italic

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