Kanagawa Neutral Light

Name: Kanagawa Neutral Light
Author: Dima Botezatu

Publisher: Dima BotezatuThemes in package: 1

A neutral light interpretation of Kanagawa with restrained warmth and readable contrast.

Open in VS Code GitHub

VS Code preview

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

Kanagawa Neutral Light — Kanagawa Neutral Light

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#7E5D9E
activityBar.background#E5E5E1
activityBar.foreground#363646
activityBar.inactiveForeground#797983
activityBarBadge.background#7E5D9E
activityBarBadge.foreground#FFFFFF
badge.background#7E5D9E
badge.foreground#FFFFFF
button.background#345E9D
button.foreground#FFFFFF
button.hoverBackground#234F8D
descriptionForeground#686874
diffEditor.insertedTextBackground#58753920
diffEditor.removedTextBackground#C8405320
disabledForeground#92929A
dropdown.background#FFFFFF
dropdown.border#CDCDC9
dropdown.foreground#363646
editor.background#F5F5F2
editor.findMatchBackground#E6C38480
editor.findMatchHighlightBackground#E6C38450
editor.foreground#363646
editor.inactiveSelectionBackground#E1E1E5
editor.lineHighlightBackground#ECECE8
editor.selectionBackground#D8D8E5
editor.selectionHighlightBackground#D8D8E580
editor.wordHighlightBackground#D7E2D080
editor.wordHighlightStrongBackground#D8D8E5A0
editorBracketMatch.background#D8D8E580
editorBracketMatch.border#7E5D9E
editorCursor.foreground#7E5D9E
editorGroup.border#D8D8D4
editorGroupHeader.tabsBackground#E5E5E1
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#CDCDC9
editorHoverWidget.foreground#363646
editorIndentGuide.activeBackground1#A9A9AF
editorIndentGuide.background1#DDDDD9
editorLineNumber.activeForeground#545464
editorLineNumber.foreground#99999F
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.border#CDCDC9
editorSuggestWidget.foreground#363646
editorSuggestWidget.selectedBackground#D8D8E5
editorWhitespace.foreground#D0D0CC
errorForeground#C84053
focusBorder#7E5D9E
foreground#363646
gitDecoration.addedResourceForeground#587539
gitDecoration.deletedResourceForeground#C84053
gitDecoration.ignoredResourceForeground#92929A
gitDecoration.modifiedResourceForeground#8A6508
gitDecoration.untrackedResourceForeground#2A7081
icon.foreground#60606C
input.background#FFFFFF
input.border#CDCDC9
input.foreground#363646
input.placeholderForeground#85858E
list.activeSelectionBackground#C7C7DD
list.activeSelectionForeground#292936
list.focusOutline#7E5D9E
list.hoverBackground#E1E1DD
list.inactiveSelectionBackground#DADAE4
menu.background#F5F5F2
menu.foreground#363646
menu.selectionBackground#D8D8E5
menu.selectionForeground#292936
notifications.background#FFFFFF
notifications.border#CDCDC9
notifications.foreground#363646
panel.background#EEEEEB
panel.border#D8D8D4
panelTitle.activeBorder#7E5D9E
panelTitle.activeForeground#363646
panelTitle.inactiveForeground#777780
peekView.border#7E5D9E
peekViewEditor.background#EEEEEB
peekViewResult.background#E5E5E1
peekViewTitle.background#DCDCD7
progressBar.background#7E5D9E
selection.background#D8D8E5
sideBar.background#EEEEEB
sideBar.border#D8D8D4
sideBar.foreground#454552
sideBarSectionHeader.background#E5E5E1
sideBarSectionHeader.foreground#454552
sideBarTitle.foreground#363646
statusBar.background#DCDCD7
statusBar.debuggingBackground#C84053
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#363646
statusBar.noFolderBackground#E5E5E1
tab.activeBackground#F5F5F2
tab.activeBorderTop#7E5D9E
tab.activeForeground#292936
tab.border#D8D8D4
tab.inactiveBackground#E5E5E1
tab.inactiveForeground#71717B
terminal.ansiBlack#363646
terminal.ansiBlue#345E9D
terminal.ansiBrightBlack#72727A
terminal.ansiBrightBlue#234F8D
terminal.ansiBrightCyan#176273
terminal.ansiBrightGreen#446528
terminal.ansiBrightMagenta#684097
terminal.ansiBrightRed#B52A43
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#745400
terminal.ansiCyan#2A7081
terminal.ansiGreen#587539
terminal.ansiMagenta#7851A9
terminal.ansiRed#C84053
terminal.ansiWhite#D8D8D5
terminal.ansiYellow#8A6508
terminal.background#F5F5F2
terminal.foreground#363646
terminal.selectionBackground#D8D8E5
terminalCursor.foreground#7E5D9E
textLink.activeForeground#234F8D
textLink.foreground#345E9D
titleBar.activeBackground#E5E5E1
titleBar.activeForeground#363646
titleBar.inactiveBackground#ECECE9
titleBar.inactiveForeground#777780

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#777780	italic
string, string.quoted, constant.other.symbol	#587539	—
constant.numeric, constant.language, constant.character	#B05238	—
keyword, storage.type, storage.modifier	#7851A9	bold
entity.name.function, support.function, meta.function-call	#345E9D	—
entity.name.type, entity.name.class, support.type, support.class	#2A7081	—
variable, identifier, meta.object-literal.key	#363646	—
variable.parameter, meta.function.parameters	#8A6508	—
entity.name.tag, support.class.component	#C84053	—
entity.other.attribute-name	#8A6508	—
keyword.operator, punctuation.accessor	#7851A9	—
markup.heading, markup.heading.markdown, entity.name.section.markdown	#345E9D	bold
markup.bold, punctuation.definition.bold.markdown	#2A7081	bold
markup.italic, punctuation.definition.italic.markdown	#8A6508	italic
markup.quote, markup.quote.markdown, punctuation.definition.quote.begin.markdown	#777780	italic
markup.list, punctuation.definition.list.begin.markdown	#7851A9	—
markup.inline.raw, markup.fenced_code.block.markdown, markup.raw.block.markdown	#587539	—
string.other.link.title.markdown, markup.underline.link.markdown	#345E9D	underline
markup.underline.link.image.markdown, string.other.link.description.markdown	#2A7081	—
markup.underline.link.http.hyperlink.markdown, markup.underline.link.https.hyperlink.markdown	#B05238	underline
invalid, invalid.illegal	#FFFFFF	—