Kanagawa Paper

Name: Kanagawa Paper
Author: thesimonho

Publisher: thesimonhoThemes in package: 2

Remixed Kanagawa colourscheme with muted colors. For VSCode.

Open in VS Code GitHub

Color themes

VS Code preview

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

Kanagawa Paper — Kanagawa Paper Canvas

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.

actionBar.toggledBackground#c1b4c1
activityBar.activeBorder#7e8faf
activityBar.background#d1cfc5
activityBar.border#cbc8bc
activityBar.foreground#7e8faf
activityBar.inactiveForeground#8e8a80
activityBarBadge.background#7e8faf
activityBarBadge.foreground#ecece8
badge.background#7e8faf
badge.foreground#ecece8
button.background#7e8faf
button.border#00000000
button.foreground#ecece8
button.hoverBackground#6b8998
button.secondaryBackground#e6e6e3
button.secondaryForeground#73787d
button.secondaryHoverBackground#cbc8bc
chat.editedFileForeground#b4a88a
chat.slashCommandBackground#9ba1bf
chat.slashCommandForeground#809ba7
checkbox.background#ecece8
checkbox.border#aeaea6
debugToolBar.background#d1cfc5
descriptionForeground#8e8a80
diffEditor.insertedTextBackground#7a8c6a33
dropdown.background#ecece8
dropdown.border#aeaea6
dropdown.foreground#73787d
dropdown.listBackground#e1e1de
editor.background#e1e1de
editor.findMatchBackground#a7956a
editor.findMatchBorder#b4a88a
editor.findMatchHighlightBackground#9ba1bf80
editor.foreground#73787d
editor.inactiveSelectionBackground#d4cdd480
editor.lineHighlightBackground#d8d8d2
editor.selectionBackground#d4cdd480
editor.selectionHighlightBackground#d4cdd480
editor.selectionHighlightBorder#aeaea6
editor.wordHighlightBackground#d4cdd44d
editor.wordHighlightBorder#aeaea6
editor.wordHighlightStrongBackground#d4cdd44d
editor.wordHighlightStrongBorder#aeaea6
editorBracketHighlight.foreground1#c27672
editorBracketHighlight.foreground2#9e7e98
editorBracketHighlight.foreground3#809ba7
editorBracketHighlight.foreground4#a8826a
editorBracketHighlight.foreground5#7e9579
editorBracketHighlight.foreground6#637263
editorBracketHighlight.unexpectedBracket.foreground#c27672
editorBracketMatch.background#ecece8
editorBracketMatch.border#aeaea6
editorBracketPairGuide.activeBackground1#c27672
editorBracketPairGuide.activeBackground2#9e7e98
editorBracketPairGuide.activeBackground3#809ba7
editorBracketPairGuide.activeBackground4#a8826a
editorBracketPairGuide.activeBackground5#7e9579
editorBracketPairGuide.activeBackground6#637263
editorBracketPairGuide.background1#c2767266
editorBracketPairGuide.background2#9e7e9866
editorBracketPairGuide.background3#809ba766
editorBracketPairGuide.background4#a8826a66
editorBracketPairGuide.background5#7e957966
editorBracketPairGuide.background6#63726366
editorCursor.background#e1e1de
editorCursor.foreground#73787d
editorError.foreground#c27672
editorGroup.border#73787d
editorGroupHeader.tabsBackground#d1cfc5
editorGroupHeader.tabsBorder#cbc8bc
editorGutter.addedBackground#7a8c6a
editorGutter.deletedBackground#c27672
editorGutter.modifiedBackground#a7956a
editorHoverWidget.background#e1e1de
editorHoverWidget.border#cbc8bc
editorHoverWidget.highlightForeground#7e8faf
editorIndentGuide.activeBackground1#aeaea6
editorIndentGuide.background1#d1cfc5
editorInlayHint.background#ecece8
editorInlayHint.foreground#8e8a80
editorLineNumber.activeForeground#73787d
editorLineNumber.foreground#8e8a80
editorMarkerNavigation.background#d8d8d2
editorOverviewRuler.border#d1cfc5
editorRuler.foreground#d1cfc5
editorSuggestWidget.background#ecece8
editorSuggestWidget.border#d1cfc5
editorSuggestWidget.selectedBackground#d8d8d2
editorWarning.foreground#a7956a
editorWhitespace.foreground#d8d8d2
editorWidget.background#e6e6e3
errorForeground#c27672
focusBorder#7e8faf
foreground#73787d
gitDecoration.addedResourceForeground#7a8c6a
gitDecoration.conflictingResourceForeground#a7956a
gitDecoration.deletedResourceForeground#c27672
gitDecoration.ignoredResourceForeground#aeaea6
gitDecoration.modifiedResourceForeground#a7956a
gitDecoration.untrackedResourceForeground#7a8c6a
icon.foreground#73787d
input.background#ecece8
input.border#aeaea6
input.foreground#73787d
input.placeholderForeground#8e8a80
inputOption.activeBackground#7e8faf
inputOption.activeBorder#7e8faf
keybindingLabel.foreground#73787d
list.activeSelectionBackground#d8d8d2
list.activeSelectionForeground#73787d
list.activeSelectionIconForeground#ecece8
list.dropBackground#d8d8d2
list.errorForeground#c27672
list.focusBackground#cbc8bc
list.focusForeground#73787d
list.highlightForeground#809ba7
list.hoverBackground#d8d8d2
list.hoverForeground#73787d
list.inactiveSelectionBackground#cbc8bc
list.inactiveSelectionForeground#73787d
list.warningForeground#a7956a
menu.background#e1e1de
menu.border#aeaea6
menu.foreground#73787d
menu.selectionBackground#7e8faf
menu.selectionForeground#ecece8
menu.separatorBackground#aeaea6
minimapGutter.addedBackground#7a8c6a
minimapGutter.deletedBackground#c27672
minimapGutter.modifiedBackground#a7956a
notificationCenterHeader.background#e1e1de
notificationCenterHeader.foreground#73787d
notifications.background#e1e1de
notifications.border#cbc8bc
notifications.foreground#73787d
panel.background#d1cfc5
panel.border#cbc8bc
panelInput.border#cbc8bc
panelSectionHeader.background#d1cfc5
panelTitle.activeBorder#7e8faf
panelTitle.activeForeground#73787d
panelTitle.inactiveForeground#8e8a80
peekView.border#aeaea6
peekViewEditor.background#e1e1de
peekViewEditor.matchHighlightBackground#b28d77
peekViewResult.background#e1e1de
peekViewResult.matchHighlightBackground#b28d77
pickerGroup.border#aeaea6
ports.iconRunningProcessForeground#7a8c6a
progressBar.background#7e8faf
quickInput.background#e6e6e3
quickInput.foreground#73787d
quickInputList.focusBackground#cbc8bc
quickInputList.focusForeground#73787d
quickInputList.focusIconForeground#73787d
scrollbar.shadow#d1cfc5
scrollbarSlider.activeBackground#8e8a8080
scrollbarSlider.background#8e8a8066
scrollbarSlider.hoverBackground#8e8a8080
settings.dropdownBackground#ecece8
settings.dropdownBorder#aeaea6
settings.focusedRowBackground#d8d8d2
settings.headerForeground#7e8faf
settings.modifiedItemIndicator#b28d77
sideBar.background#d8d8d2
sideBar.border#cbc8bc
sideBar.foreground#73787d
sideBarSectionHeader.background#d8d8d2
sideBarSectionHeader.border#cbc8bc
sideBarSectionHeader.foreground#73787d
sideBarTitle.foreground#73787d
statusBar.background#d1cfc5
statusBar.border#cbc8bc
statusBar.debuggingBackground#7e8faf
statusBar.debuggingBorder#7880a5
statusBar.debuggingForeground#ecece8
statusBar.focusBorder#7e8faf
statusBar.foreground#73787d
statusBar.noFolderBackground#e1e1de
statusBarItem.errorBackground#c27672
statusBarItem.focusBorder#7e8faf
statusBarItem.hoverBackground#cbc8bc
statusBarItem.hoverForeground#73787d
statusBarItem.prominentBackground#7e8faf
statusBarItem.prominentForeground#ecece8
statusBarItem.remoteBackground#7e8faf
statusBarItem.remoteForeground#ecece8
statusBarItem.warningBackground#a7956a
tab.activeBackground#e1e1de
tab.activeBorder#e1e1de
tab.activeBorderTop#7e8faf
tab.activeForeground#73787d
tab.activeModifiedBorder#a7956a
tab.border#cbc8bc
tab.hoverBackground#e1e1de
tab.inactiveBackground#d1cfc5
tab.inactiveForeground#73787d
tab.inactiveModifiedBorder#a7956a
tab.lastPinnedBorder#73787d
tab.selectedBackground#e6e6e3
tab.selectedBorderTop#9ba1bf
tab.selectedForeground#73787d
tab.unfocusedActiveBorder#e1e1de
tab.unfocusedActiveBorderTop#cbc8bc
tab.unfocusedActiveModifiedBorder#a7956a
tab.unfocusedHoverBackground#e1e1de
tab.unfocusedInactiveModifiedBorder#a7956a
terminal.ansiBlack#8e8a80
terminal.ansiBlue#809ba7
terminal.ansiBrightBlack#aeaea6
terminal.ansiBrightBlue#6b8998
terminal.ansiBrightCyan#7e8faf
terminal.ansiBrightGreen#9ba98e
terminal.ansiBrightMagenta#9e7e98
terminal.ansiBrightRed#c27672
terminal.ansiBrightWhite#ecece8
terminal.ansiBrightYellow#a7956a
terminal.ansiCyan#7e8faf
terminal.ansiGreen#7a8c6a
terminal.ansiMagenta#9e7e98
terminal.ansiRed#c27672
terminal.ansiWhite#73787d
terminal.ansiYellow#a7956a
terminal.background#e1e1de
terminal.border#cbc8bc
terminal.foreground#73787d
terminal.inactiveSelectionBackground#d4cdd4
terminal.selectionBackground#d4cdd480
terminal.tab.activeBorder#7e8faf
textBlockQuote.background#cbc8bc
textBlockQuote.border#8e8a80
textCodeBlock.background#cbc8bc
textLink.activeForeground#809ba7
textLink.foreground#809ba7
textPreformat.background#d1cfc5
textPreformat.foreground#8e8a80
textSeparator.foreground#aeaea6
titleBar.activeBackground#d1cfc5
titleBar.activeForeground#73787d
titleBar.border#cbc8bc
titleBar.inactiveBackground#d1cfc5
titleBar.inactiveForeground#8e8a80
walkThrough.embeddedEditorBackground#e1e1de
welcomePage.progress.foreground#7e8faf
welcomePage.tileBackground#cbc8bc
widget.border#aeaea6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#aeaea6	italic
comment.documentation, comment.block.documentation	#9ba98e	—
invalid.illegal	#c27672	—
keyword.operator	#c27672	—
keyword, storage	#9e7e98	—
storage.type, support.type	#7b958e	—
constant.language, support.constant, variable.language	#b28d77	—
variable, support.variable	#7b958e	—
entity.name.function, support.function	#c27672	bold
entity.name.type, entity.other.inherited-class, support.class	#7b958e	bold
entity.name.exception	#c27672	—
entity.name.section	—	bold
constant.numeric, constant.character, constant	#9e7e98	—
string	#7e9579	—
constant.character.escape	#8e8a80	—
string.regexp, constant.regexp	#c27672	—
constant.other.symbol	#c27672	—
punctuation	#aeaea6	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html	#aeaea6	—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#809ba7	—
entity.name.tag	#7880a5	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#809ba7	italic
constant.character.entity, punctuation.definition.entity	#b28d77	—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css	#7b958e	—
meta.property-name, support.type.property-name	#b28d77	—
meta.property-value, meta.property-value constant.other, support.constant.property-value	#7e9579	—
keyword.other.important	—	bold
markup.changed	#a7956a	—
markup.deleted	#c27672	—
markup.error	#c27672	—
markup.inserted	#7a8c6a	—
meta.link	#7880a5	—
markup.output, markup.raw	#8e8a80	—
markup.prompt	#8e8a80	—
markup.heading	#c27672	—
markup.traceback	#c27672	—
markup.underline	—	underline
markup.quote	#9e7e98	—
markup.list	#809ba7	—
markup.bold, markup.italic	#a8826a	—
markup.inline.raw	#7e9579
meta.diff.range, meta.diff.index, meta.separator	#8e8a80	—
meta.diff.header.from-file	#8e8a80	—
meta.diff.header.to-file	#8e8a80	—