Paper Notebook Light

Name: Paper Notebook Light
Author: kpab

Publisher: kpabThemes in package: 1

A warm, paper-like light theme with ink-style colors.

Open in VS Code GitHub

VS Code preview

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

Paper Notebook Light — Paper Notebook 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#8A5A2B
activityBar.background#EADFCC
activityBar.foreground#4A3C2E
activityBarBadge.background#C1995B
activityBarBadge.foreground#FDF8EE
badge.background#C1995B
badge.foreground#FDF8EE
banner.background#EADFCC
banner.foreground#4A3C2E
breadcrumb.activeSelectionForeground#3A2E23
breadcrumb.background#F5F0E6
breadcrumb.focusForeground#4A3C2E
breadcrumb.foreground#8D7A64
button.background#8A5A2B
button.foreground#FDF8EE
button.hoverBackground#6C3F2C
button.secondaryBackground#E3D7C4
button.secondaryForeground#4A3C2E
button.secondaryHoverBackground#D9CBB4
checkbox.background#FDF8EE
checkbox.border#D1C1AA
contrastBorder#00000000
debugToolBar.background#F0E9DB
descriptionForeground#7D6A52
diffEditor.insertedLineBackground#7A9A6A18
diffEditor.insertedTextBackground#7A9A6A30
diffEditor.removedLineBackground#B06A5A18
diffEditor.removedTextBackground#B06A5A30
dropdown.background#FDF8EE
dropdown.border#D1C1AA
dropdown.foreground#3A2E23
editor.background#F5F0E6
editor.findMatchBackground#C1995B80
editor.findMatchHighlightBackground#C1995B40
editor.foldBackground#D9CBB440
editor.foreground#3A2E23
editor.hoverHighlightBackground#C1AF9460
editor.inactiveSelectionBackground#E3D7C4
editor.lineHighlightBackground#EDE3D2
editor.rangeHighlightBackground#C1995B40
editor.selectionBackground#D9CBB4
editor.selectionHighlightBackground#C1AF9460
editor.wordHighlightBackground#D9CBB480
editor.wordHighlightStrongBackground#D9CBB4B0
editorBracketHighlight.foreground1#8A5A2B
editorBracketHighlight.foreground2#5C6E4E
editorBracketHighlight.foreground3#4E5F73
editorBracketHighlight.foreground4#A86434
editorBracketHighlight.foreground5#8A5A75
editorBracketHighlight.foreground6#3F6E6A
editorBracketHighlight.unexpectedBracket.foreground#9A3A3A
editorBracketMatch.background#D9CBB480
editorBracketMatch.border#B6A58C
editorBracketPairGuide.activeBackground1#8A5A2B80
editorBracketPairGuide.activeBackground2#5C6E4E80
editorBracketPairGuide.activeBackground3#4E5F7380
editorBracketPairGuide.activeBackground4#A8643480
editorBracketPairGuide.activeBackground5#8A5A7580
editorBracketPairGuide.activeBackground6#3F6E6A80
editorBracketPairGuide.background1#8A5A2B40
editorBracketPairGuide.background2#5C6E4E40
editorBracketPairGuide.background3#4E5F7340
editorBracketPairGuide.background4#A8643440
editorBracketPairGuide.background5#8A5A7540
editorBracketPairGuide.background6#3F6E6A40
editorCursor.foreground#5C4633
editorError.foreground#9A3A3A
editorGhostText.foreground#8D7A64
editorGroup.border#D1C1AA
editorGroupHeader.tabsBackground#EADFCC
editorGutter.addedBackground#7A9A6A
editorGutter.deletedBackground#B06A5A
editorGutter.modifiedBackground#C1995B
editorHoverWidget.background#F0E9DB
editorHoverWidget.border#D1C1AA
editorIndentGuide.activeBackground1#C1AF94
editorIndentGuide.background1#E3D7C4
editorInfo.foreground#4E5F73
editorInlayHint.background#E3D7C4
editorInlayHint.foreground#5C4B37
editorInlayHint.parameterBackground#E3D7C4
editorInlayHint.parameterForeground#5C4B37
editorInlayHint.typeBackground#E3D7C4
editorInlayHint.typeForeground#5C4B37
editorLineNumber.activeForeground#5C4B37
editorLineNumber.foreground#94826A
editorOverviewRuler.commonContentForeground#A8977E
editorOverviewRuler.currentContentForeground#7A9A6A
editorOverviewRuler.incomingContentForeground#6A7E96
editorRuler.foreground#E3D7C4
editorSuggestWidget.background#F0E9DB
editorSuggestWidget.border#D1C1AA
editorSuggestWidget.highlightForeground#8A5A2B
editorSuggestWidget.selectedBackground#E3D7C4
editorWarning.foreground#A8752A
editorWhitespace.foreground#A08B6C
editorWidget.background#F0E9DB
editorWidget.border#D1C1AA
errorForeground#9A3A3A
focusBorder#C1995B
gitDecoration.addedResourceForeground#4A7A4A
gitDecoration.conflictingResourceForeground#A8752A
gitDecoration.deletedResourceForeground#9A3A3A
gitDecoration.ignoredResourceForeground#A8977E
gitDecoration.modifiedResourceForeground#8A5A2B
gitDecoration.untrackedResourceForeground#4A7A4A
input.background#FDF8EE
input.border#D1C1AA
input.foreground#3A2E23
input.placeholderForeground#A8977E
inputOption.activeBackground#D9CBB4
inputOption.activeBorder#C1995B
keybindingLabel.background#E3D7C4
keybindingLabel.border#D1C1AA
keybindingLabel.bottomBorder#C1AF94
keybindingLabel.foreground#4A3C2E
list.activeSelectionBackground#D9CBB4
list.activeSelectionForeground#3A2E23
list.focusBackground#D9CBB4
list.highlightForeground#8A5A2B
list.hoverBackground#EDE3D2
list.inactiveSelectionBackground#E3D7C4
menu.background#F0E9DB
menu.border#D1C1AA
menu.foreground#3A2E23
menu.selectionBackground#D9CBB4
menu.selectionForeground#3A2E23
menubar.selectionBackground#E3D7C4
merge.commonContentBackground#A8977E20
merge.commonHeaderBackground#A8977E60
merge.currentContentBackground#7A9A6A20
merge.currentHeaderBackground#7A9A6A60
merge.incomingContentBackground#6A7E9620
merge.incomingHeaderBackground#6A7E9660
minimap.background#F5F0E6
notebook.cellBorderColor#D1C1AA
notebook.cellEditorBackground#F5F0E6
notebook.cellHoverBackground#EADFCC
notebook.cellStatusBarItemHoverBackground#E3D7C4
notebook.cellToolbarSeparator#D1C1AA
notebook.editorBackground#F0E9DB
notebook.focusedCellBorder#C1995B
notebook.focusedEditorBorder#C1995B
notebook.inactiveFocusedCellBorder#D1C1AA
notebook.inactiveSelectedCellBorder#D1C1AA
notebook.outputContainerBackgroundColor#F5F0E6
notebook.outputContainerBorderColor#D1C1AA
notebook.selectedCellBackground#E3D7C4
notebook.selectedCellBorder#D1C1AA
notebook.symbolHighlightBackground#D9CBB480
notebookEditorOverviewRuler.runningCellForeground#4E5F73
notebookStatusErrorIcon.foreground#9A3A3A
notebookStatusRunningIcon.foreground#4E5F73
notebookStatusSuccessIcon.foreground#4A7A4A
notificationCenterHeader.background#EADFCC
notifications.background#F0E9DB
notifications.border#D1C1AA
notifications.foreground#3A2E23
panel.background#F5F0E6
panel.border#D1C1AA
panelTitle.activeBorder#8A5A2B
panelTitle.activeForeground#3A2E23
panelTitle.inactiveForeground#8D7A64
peekView.border#C1995B
peekViewEditor.background#F0E9DB
peekViewEditor.matchHighlightBackground#C1995B60
peekViewResult.background#EDE3D2
peekViewResult.matchHighlightBackground#C1995B60
peekViewResult.selectionBackground#D9CBB4
peekViewTitle.background#EADFCC
pickerGroup.border#D1C1AA
pickerGroup.foreground#8A5A2B
progressBar.background#C1995B
quickInput.background#F0E9DB
quickInputList.focusBackground#D9CBB4
quickInputList.focusForeground#3A2E23
scrollbarSlider.activeBackground#B6A58CC0
scrollbarSlider.background#D1C1AA80
scrollbarSlider.hoverBackground#C1AF94A0
selection.background#D9CBB4
settings.headerForeground#3A2E23
settings.modifiedItemIndicator#C1995B
sideBar.background#F3EDE2
sideBar.border#D1C1AA
sideBar.foreground#4A3C2E
sideBarSectionHeader.background#EADFCC
sideBarSectionHeader.foreground#4A3C2E
sideBarTitle.foreground#4A3C2E
statusBar.background#E3D7C4
statusBar.border#D1C1AA
statusBar.debuggingBackground#A8752A
statusBar.debuggingForeground#FDF8EE
statusBar.foreground#4A3C2E
statusBar.noFolderBackground#D9CBB4
statusBarItem.remoteBackground#8A5A2B
statusBarItem.remoteForeground#FDF8EE
symbolIcon.arrayForeground#4A3C2E
symbolIcon.booleanForeground#A86434
symbolIcon.classForeground#4E5F73
symbolIcon.colorForeground#C1995B
symbolIcon.constantForeground#A86434
symbolIcon.constructorForeground#6C3F2C
symbolIcon.enumeratorForeground#4E5F73
symbolIcon.enumeratorMemberForeground#A86434
symbolIcon.eventForeground#A8752A
symbolIcon.fieldForeground#4A3C2E
symbolIcon.fileForeground#7D6A52
symbolIcon.folderForeground#7D6A52
symbolIcon.functionForeground#6C3F2C
symbolIcon.interfaceForeground#4E5F73
symbolIcon.keyForeground#6C3F2C
symbolIcon.keywordForeground#854D2C
symbolIcon.methodForeground#6C3F2C
symbolIcon.moduleForeground#4E5F73
symbolIcon.namespaceForeground#4E5F73
symbolIcon.nullForeground#A86434
symbolIcon.numberForeground#A86434
symbolIcon.objectForeground#4E5F73
symbolIcon.operatorForeground#4A3C2E
symbolIcon.packageForeground#4E5F73
symbolIcon.propertyForeground#4A3C2E
symbolIcon.referenceForeground#8A5A2B
symbolIcon.snippetForeground#8A5A75
symbolIcon.stringForeground#5C6E4E
symbolIcon.structForeground#4E5F73
symbolIcon.textForeground#7D6A52
symbolIcon.typeParameterForeground#4E5F73
symbolIcon.unitForeground#A86434
symbolIcon.variableForeground#4A3C2E
tab.activeBackground#F5F0E6
tab.activeForeground#3A2E23
tab.border#E3D7C4
tab.inactiveBackground#EADFCC
tab.inactiveForeground#8D7A64
terminal.ansiBlack#4A3C2E
terminal.ansiBlue#4E5F73
terminal.ansiBrightBlack#7D6A52
terminal.ansiBrightBlue#6A7E96
terminal.ansiBrightCyan#5A8E8A
terminal.ansiBrightGreen#5C8A5C
terminal.ansiBrightMagenta#A8759A
terminal.ansiBrightRed#B85A5A
terminal.ansiBrightWhite#A8977E
terminal.ansiBrightYellow#C1913A
terminal.ansiCyan#3F6E6A
terminal.ansiGreen#4A7A4A
terminal.ansiMagenta#8A5A75
terminal.ansiRed#9A3A3A
terminal.ansiWhite#8D7A64
terminal.ansiYellow#A8752A
terminal.background#F5F0E6
terminal.foreground#3A2E23
terminal.selectionBackground#D9CBB480
terminalCommandDecoration.defaultBackground#A8977E
terminalCommandDecoration.errorBackground#9A3A3A
terminalCommandDecoration.successBackground#4A7A4A
terminalCursor.foreground#5C4633
textBlockQuote.background#EDE3D2
textBlockQuote.border#C1995B
textCodeBlock.background#EDE3D2
textLink.activeForeground#6C3F2C
textLink.foreground#8A5A2B
textPreformat.foreground#6C3F2C
titleBar.activeBackground#EADFCC
titleBar.activeForeground#4A3C2E
tree.indentGuidesStroke#D1C1AA
walkThrough.embeddedEditorBackground#F0E9DB
widget.shadow#3A2E2330

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword, storage	#854D2C	bold
keyword.operator, storage.type.function.arrow	#4A3C2E
keyword.operator.new, keyword.operator.expression, keyword.operator.logical.python, keyword.operator.wordlike, keyword.operator.delete, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.alignas, keyword.operator.typeid, keyword.operator.noexcept, keyword.operator.and.cpp, keyword.operator.or.cpp, keyword.operator.not.cpp, keyword.operator.xor.cpp, keyword.operator.and_eq.cpp, keyword.operator.or_eq.cpp, keyword.operator.xor_eq.cpp, keyword.operator.not_eq.cpp, keyword.operator.bitand.cpp, keyword.operator.bitor.cpp, keyword.operator.compl.cpp, keyword.operator.type.php, keyword.operator.logical.scss, keyword.operator.logical.lua, keyword.operator.logical.perl, keyword.operator.logical.and.media.css, keyword.operator.logical.not.media.css, keyword.operator.logical.only.media.css, keyword.operator.logical.feature, keyword.operator.type-casting.swift, keyword.operator.as.groovy, keyword.operator.in.groovy	#854D2C	bold
string	#5C6E4E	—
variable, parameter	#3A2E23	—
constant.numeric	#A86434	—
entity.name.function	#6C3F2C	—
entity.name.type, support.type	#4E5F73	—
comment	#8A7D6D	italic
punctuation, delimiter	#4A3C2E	—
meta.diff.header	#6C3F2C	bold
markup.inserted	#3A6B3A	—
markup.deleted	#9A3A3A	—
entity.name.tag	#854D2C	—
entity.other.attribute-name	#925F3C	italic
constant.language, constant.character	#A86434	bold
support.function	#6C3F2C	—
string.regexp	#8A5A2B	—
constant.character.escape	#A86434	—
variable.other.property, support.variable.property	#4A3C2E	—
support.type.property-name.json	#6C3F2C	—
markup.heading	#6C3F2C	bold
markup.bold	#3A2E23	bold
markup.italic	#3A2E23	italic
markup.inline.raw, markup.fenced_code.block	#7A5136	—
markup.underline.link, string.other.link	#8A5A2B	underline
markup.quote	#7D6A52	italic
invalid, invalid.illegal	#9A3A3A	—