Grimoire

Name: Grimoire
Author: Nathan Edwards

Publisher: Nathan EdwardsThemes in package: 2

Grimoire is a take on many themes with vibrant colors without sacrificing readability and reducing strain during those late hours, with a touch of magic.🔮

Open in VS Code GitHub

Color themes

VS Code preview

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

Grimoire — Grimoire Nox

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.activeBackground#2B2D35
activityBar.background#24262E
activityBar.border#160E20
activityBar.inactiveForeground#ffffff30
activityBarBadge.background#EF7D4D
activityBarBadge.foreground#160E20
badge.background#EF7D4D
badge.foreground#35313f
breadcrumb.background#1c1e26
button.background#EF7D4D
button.foreground#CBCBCB
button.hoverBackground#EF7D4D
contrastBorder#ffffff00
debugExceptionWidget.background#1c1e26
debugExceptionWidget.border#160E20
debugToolBar.background#1c1e26
descriptionForeground#CBCBCB
diffEditor.insertedTextBackground#4ADE2533
diffEditor.insertedTextBorder#3ad90055
diffEditor.removedTextBackground#ee3a4333
diffEditor.removedTextBorder#ee3a4355
dropdown.background#2B2D35
dropdown.border#2B2D35
dropdown.foreground#E0DCE8
editor.background#24262E
editor.foreground#E0DCE8
editor.lineHighlightBackground#2E3038
editor.selectionBackground#46434f
editorCursor.foreground#dcdae0
editorGroup.background#A22929
editorGroup.border#160E20
editorGroup.dropBackground#46434F
editorGroupHeader.noTabsBackground#2B2D35
editorGroupHeader.tabsBackground#2B2D35
editorGroupHeader.tabsBorder#160E20
editorLineNumber.foreground#757180
editorWhitespace.activeForeground#E0DCE8
editorWhitespace.foreground#46434F
extensionButton.prominentBackground#EF7D4D
extensionButton.prominentForeground#E0DCE8
extensionButton.prominentHoverBackground#EF7D4D
focusBorder#160E20
foreground#CBCBCB
gitDecoration.conflictingResourceForeground#e87517
gitDecoration.deletedResourceForeground#f07092
gitDecoration.ignoredResourceForeground#808080
gitDecoration.modifiedResourceForeground#ebc642
gitDecoration.untrackedResourceForeground#45c516
input.background#2B2D35
input.border#2B2D35
input.foreground#CBCBCB
input.placeholderForeground#CBCBCB
inputOption.activeBorder#EF7D4D
inputValidation.errorBackground#231B2E
inputValidation.errorBorder#EF7D4D
inputValidation.infoBackground#231B2E
inputValidation.infoBorder#2E3038
inputValidation.warningBackground#231B2E
inputValidation.warningBorder#EF7D4D
list.activeSelectionBackground#2B2D35
list.activeSelectionForeground#CBCBCB
list.dropBackground#2B2D35
list.focusBackground#2B2D35
list.focusForeground#aaaaaa
list.highlightForeground#EF7D4D
list.hoverBackground#2E3038
list.hoverForeground#aaaaaa
list.inactiveSelectionBackground#24262E
list.inactiveSelectionForeground#aaaaba
menu.background#2B2D35
notificationCenter.border#24262E
notificationCenterHeader.background#24262E
notificationCenterHeader.foreground#E0DCE8
notificationLink.foreground#E0DCE8
notifications.background#24262E
notifications.border#24262E
notifications.foreground#CDD3DE
notificationToast.border#24262E
panel.background#171921
panel.border#4A4C54
panelTitle.activeBorder#EF7D4D
panelTitle.activeForeground#E0DCE8
panelTitle.inactiveForeground#aaaaba
pickerGroup.border#160E20
pickerGroup.foreground#CBCBCB
progressBar.background#EF7D4D
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#2E3038
scrollbarSlider.background#2E3038
scrollbarSlider.hoverBackground#2E3038
selection.background#EF7D4D
sideBar.background#1c1e26
sideBar.border#160E20
sideBarSectionHeader.background#2B2D35
sideBarSectionHeader.border#160E20
sideBarSectionHeader.foreground#CBCBCB
statusBar.background#1C1E26
statusBar.debuggingBackground#EF7D4D
statusBar.debuggingForeground#15141B
statusBar.noFolderBackground#24222E
statusBar.noFolderBorder#15141B
statusBarItem.activeBackground#EF7D4D
statusBarItem.hoverBackground#363253
statusBarItem.prominentBackground#EF7D4D
statusBarItem.prominentHoverBackground#1b1641
tab.activeBorderTop#CBCBCB
tab.inactiveBackground#2B2D35
terminal.ansiBlack#302f3d
terminal.ansiBlue#49ace9
terminal.ansiBrightBlack#504e65
terminal.ansiBrightBlue#60b6eb
terminal.ansiBrightCyan#60dbeb
terminal.ansiBrightGreen#60ebb1
terminal.ansiBrightMagenta#e798b3
terminal.ansiBrightRed#e97749
terminal.ansiBrightWhite#c5c2d6
terminal.ansiBrightYellow#e69533
terminal.ansiCyan#49d6e9
terminal.ansiGreen#49e9a6
terminal.ansiMagenta#df769b
terminal.ansiRed#e66533
terminal.ansiWhite#b6b3cc
terminal.ansiYellow#e4b781
terminal.background#171921
terminal.foreground#E0DCE8
terminalCursor.background#EF7D4D
terminalCursor.foreground#EF7D4D
textLink.foreground#EF7D4D
titleBar.activeBackground#24262E
titleBar.activeForeground#CBCBCB
titleBar.inactiveBackground#24262E
titleBar.inactiveForeground#aaaaba
widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#757180	—
—	#E0DCE8	—
keyword.operator.class, constant.other, source.php.embedded.line	#B7B3C7
variable.other.property	#E36687	—
keyword	#F8786B	—
meta.require, support.function.any-method, entity.name.function	#70B7E6	—
entity.name.tag	#E36687	—
keyword.other.special-method	#70B7E6	—
constant.numeric, keyword.other.unit, constant, markup.quote, meta.link	#F8786B	—
meta.selector	#E36687	—
constant.other.color	#F8786B	—
entity.other.attribute-name	#F0AD64	—
string, constant.other.symbol, entity.other.inherited-class	#62CCA0	—
entity.other.attribute-name.id, entity.other.attribute-name.id.css punctuation.definition.entity.css	#62CCA0	—
constant	#E36687	—
storage	#F0AD64	—
support	#70B7E6	—
keyword.operator	#F8786B	—
keyword.operator.logical	#F8786B	—
source.python meta.function-call.python	#70B7E6	—
meta.function-call.python punctuation.definition.arguments.end.python, meta.function-call.python punctuation.definition.arguments.begin.python	#E0DCE8	—
meta.function.python storage.type.function.python	—	bold
variable.language.python	—	italic
meta.function-call.python meta.function-call.arguments.python	#E0DCE8	—
support.class, entity.name.class, entity.name.type.class	#F0AD64	—
meta.class	#E0DCE8	—
meta.property-name.css support.type.property-name.css	#E0DCE8	—
variable.language.arguments		italic