Waves Theme

Name: Waves Theme
Author: rafaeluchoa

Publisher: rafaeluchoaThemes in package: 1

Amazing material-like night theme for Visual Studio Code.

Open in VS Code

VS Code preview

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

Waves Theme — Waves Theme

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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#2D3654
activityBar.foreground#98A3C6
activityBarBadge.background#8FF0FF
activityBarBadge.foreground#2D3139
badge.background#2D3654
button.background#404754
debugToolBar.background#2D3654
diffEditor.insertedTextBackground#fdffb630
diffEditor.removedTextBackground#E25F6530
dropdown.background#2A3147
dropdown.border#181a1f
editor.background#2D3654
editor.findMatchHighlightBackground#6774A1
editor.foreground#EFEFF3
editor.lineHighlightBackground#2A3147
editor.selectionBackground#6774A1
editor.selectionHighlightBackground#6774A1
editor.wordHighlightBackground#484e5b
editor.wordHighlightStrongBackground#EFEFF326
editorCursor.foreground#f8f8f0
editorError.foreground#E25F65
editorGroup.border#181a1f
editorGroupHeader.tabsBackground#2D3654
editorGutter.addedBackground#fdffb6c0
editorGutter.deletedBackground#E25F65c0
editorGutter.modifiedBackground#56b5c2c0
editorHoverWidget.background#2D3654
editorHoverWidget.border#181a1f
editorIndentGuide.background#333D5B
editorLineNumber.foreground#6774A1
editorMarkerNavigation.background#2D3654
editorOverviewRuler.addedForeground#fdffb680
editorOverviewRuler.deletedForeground#E25F6580
editorOverviewRuler.modifiedForeground#56b5c280
editorRuler.foreground#EFEFF326
editorSuggestWidget.background#2D3654
editorSuggestWidget.border#181a1f
editorSuggestWidget.selectedBackground#2D3654
editorWhitespace.foreground#333D5B
editorWidget.background#2D3654
focusBorder#333D5B
gitDecoration.deletedResourceForeground#E25F65
gitDecoration.modifiedResourceForeground#56b5c2
gitDecoration.untrackedResourceForeground#fdffb6
input.background#2A3147
list.activeSelectionBackground#384368
list.activeSelectionForeground#d7dae0
list.focusBackground#2A3147
list.highlightForeground#c5c5c5
list.hoverBackground#2A3147
list.inactiveSelectionBackground#2D3654
list.inactiveSelectionForeground#d7dae0
peekViewEditor.background#2D3654
peekViewEditor.matchHighlightBackground#314365
peekViewResult.background#2D3654
peekViewResult.matchHighlightBackground#314365
scrollbarSlider.activeBackground#3E486D
scrollbarSlider.background#3E486D
scrollbarSlider.hoverBackground#3E486D
sideBar.background#2D3654
sideBar.foreground#98A3C6
sideBarSectionHeader.background#2D3654
sideBarTitle.foreground#98A3C6
statusBar.background#2D3654
statusBar.debuggingBackground#2D3654
statusBar.foreground#9da5b4
statusBar.noFolderBackground#2D3654
statusBarItem.hoverBackground#2D3654
tab.activeBackground#2D3654
tab.activeBorder#8FF0FF
tab.border#2D3654
tab.inactiveBackground#2D3654
terminal.ansiBlack#2D3139
terminal.ansiBlue#2e8ccf
terminal.ansiGreen#fdffb6
terminal.ansiRed#E25F65
terminal.ansiYellow#B4881D
terminal.border#333D5B
terminal.foreground#98A3C6
titleBar.activeBackground#2D3654
titleBar.activeForeground#9da5b4
titleBar.inactiveBackground#2D3654
titleBar.inactiveForeground#98A3C6
tree.indentGuidesStroke#333D5B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#98A3C6	—
comment	#98A3C6	—
string.quoted.docstring.multi.python	#EFEFF3	—
comment markup.link	#EFEFF3	—
markup.inserted.diff	#fdffb6	—
markup.deleted.diff	#E25F65	—
keyword.control.cpp	#e2adf2	—
punctuation.separator.key-value	#EFEFF3	—
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.language.super	—	—
variable.language.super.js	#8FF0FF	—
keyword.operator.expression.import	#8FF0FF	—
support.constant.math	#e2adf2	—
support.constant.property.math	#94F298	—
variable.other.jsdoc	#EFEFF3	—
meta.embedded.line.js	#EFEFF3	—
storage.type.annotation.java	#e2adf2	—
storage.modifier.import.java,storage.type.java	#e2adf2	—
meta.definition.variable.name.java	#e2adf2	—
keyword.operator.logical.js	#56b6c2	—
keyword.operator.bitwise	#56b6c2	—
support.constant.property-value.scss,support.constant.property-value.css	#94F298	—
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss	#94F298	—
punctuation.separator.list.comma.css	#EFEFF3	—
support.constant.color.w3c-standard-color-name.css	#94F298	—
support.type.vendored.property-name.css	#56b6c2	—
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end	#e2adf2	—
support.module.node,support.type.object.module,support.module.node	#e2adf2	—
support.constant.json	#94F298	—
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary	#B8B6FF	—
support.type.object.console	#e2adf2	—
support.variable.property.process	#94F298	—
entity.name.function,support.function.console	#8FF0FF	—
keyword.operator	#56b6c2	—
support.type.object.dom	#56b6c2	—
keyword.operator.arithmetic,keyword.operator.comparison	#56b6c2	—
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c	#B8B6FFff	—
punctuation.separator.delimiter.c	#EFEFF3	—
support.type.posix-reserved.c	#57adb8	—
keyword.operator.sizeof.c	#C178DD	—
variable.parameter.function.language.special.self.python, variable.language.special.self.python	#e2adf2	—
support.type.python	#56b6c2	—
keyword.operator.logical.python	#B8B6FF	—
variable.parameter.function.python	#D18C4E	—
meta.function-call.generic.python	#8FF0FF	—
punctuation.definition.comment	#98A3C6	—
none	#EFEFF3	—
keyword.operator	#EFEFF3	—
keyword	#B8B6FF	—
import.storage.java	#e2adf2	—
token.package.keyword	#B8B6FF	—
token.package	#EFEFF3	—
entity.name.function, meta.require, support.function.any-method	#8FF0FF	—
entity.name.type.namespace	#e2adf2	—
support.class, entity.name.type.class	#e2adf2	—
entity.name.class.identifier.namespace.type	#e2adf2	—
entity.name.class	#8FF0FF	—
entity.name.type	#e2adf2	—
keyword.control	#B8B6FF	—
control.elements, keyword.operator.less	#94F298	—
keyword.other.special-method	#8FF0FF	—
storage	#B8B6FF	—
token.storage	#B8B6FF	—
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void	#B8B6FF	—
token.storage.type.java	#e2adf2	—
support.function	#56b6c2	—
support.constant.property-value	#EFEFF3	—
support.constant.font-name	#94F298	—
meta.tag	#EFEFF3	—
string	#fdffb6	—
entity.other.inherited-class	#e2adf2	—
constant.other.symbol	#56b6c2	—
constant.numeric	#94F298	—
none	#94F298	—
none	#94F298	—
constant	#94F298	—
punctuation.definition.constant	#94F298	—
entity.name.tag	#e2adf2	—
entity.other.attribute-name	#94F298	—
entity.other.attribute-name.id	#8FF0FF	—
entity.other.attribute-name.class.css	#94F298	—
meta.selector	#B8B6FF	—
none	#D2945D	—
markup.heading	#EFEFF3	bold
markup.heading punctuation.definition.heading, entity.name.section	—	—
keyword.other.unit	#94F298	—
markup.bold,todo.bold	—	bold
emphasis md	#B8B6FF	—
markup.inline.raw.markdown, markup.inline.raw.string.markdown	#EFEFF3	—
beginning.punctuation.definition.list.markdown	#E25F65	—
markup.quote.markdown	#EFEFF3	italic
markup.underline.link.markdown,markup.underline.link.image.markdown	#EFEFF3	italic
string.other.link.title.markdown,string.other.link.description.markdown	#8FF0FF	—
markup.italic.markdown	—	italic
markup.bold.markdown	—	bold
string.regexp	#57B6C2	—
constant.character.escape	#57B6C2	—
punctuation.section.embedded, variable.interpolation	#EFEFF3	—
invalid.illegal	#FFFFFF	—
invalid.broken	#FFFFFF	—
invalid.deprecated	#FFFFFF	—
invalid.unimplemented	#FFFFFF	—
source.json meta.structure.dictionary.json > string.quoted.json	#E25F65	—
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string	#E25F65	—
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation	#fdffb6	—
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json	#56B6C2	—
entity.name.function.decorator.python	#8FF0FF	—
function.parameter	#94F298	—
function.parameter	#EFEFF3	—
function.brace	#EFEFF3	—
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx	#e2adf2	—
block.scope.end,block.scope.begin	#EFEFF3	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#E25F65	—
token.debug-token	#b267e6	—
variable.other.normal.shell, variable.other.positional.shell	#E25F65	—
entity.name.tag.yaml	#EFEFF3ff	—