Vintage Paper Theme

Name: Vintage Paper Theme
Author: Wu Qiong

Publisher: Wu QiongThemes in package: 1

Vintage paper theme for Visual Studio Code

Open in VS Code GitHub

VS Code preview

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

Vintage Paper Theme — Vintage Paper

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#eeeeee
activityBar.activeBorder#d70087
activityBar.background#878787
activityBar.dropBorder#d70087
activityBar.foreground#005faf
activityBar.inactiveForeground#e4e4e4
activityBarBadge.background#d70087
activityBarBadge.foreground#eeeeee
activityBarItem.profilesBackground#ff0000
activityBarItem.profilesForeground#ff0000
activityBarItem.profilesHoverForeground#ff0000
badge.background#d70087
badge.foreground#eeeeee
breadcrumb.background#eeeeee
breadcrumb.foreground#444444
button.background#005f87
button.foreground#e4e4e4
button.hoverBackground#0087af
descriptionForeground#444444
diffEditor.diagonalFill#ffd787
diffEditor.insertedLineBackground#afffaf
diffEditor.removedLineBackground#ffd7ff
diffEditorGutter.insertedLineBackground#afffaf
diffEditorGutter.removedLineBackground#ffd7ff
diffEditorOverview.insertedForeground#008700
diffEditorOverview.removedForeground#af0000
disabledForeground#878787
editor.background#eeeeee
editor.findMatchBackground#ffff5f
editor.findMatchHighlightBackground#ffff5f
editor.findRangeHighlightBackground#ffff5f
editor.foldBackground#afd7ff
editor.foreground#444444
editor.lineHighlightBackground#e4e4e4
editor.selectionBackground#0087af88
editor.selectionForeground#eeeeee
editor.wordHighlightBackground#0087af88
editorCursor.background#eeeeee
editorCursor.foreground#005f87
editorError.background#ffd7ff
editorError.foreground#af0000
editorGhostText.foreground#d70000
editorGroup.border#005f87
editorGroupHeader.noTabsBackground#ff0000
editorGroupHeader.tabsBackground#d0d0d0
editorGutter.addedBackground#008700
editorGutter.background#eeeeee
editorGutter.deletedBackground#af0000
editorGutter.modifiedBackground#0087af
editorInlayHint.background#eeeeee
editorInlayHint.foreground#878787
editorLineNumber.activeForeground#af5f00
editorLineNumber.foreground#b2b2b2
editorOverviewRuler.addedForeground#008700
editorOverviewRuler.deletedForeground#af0000
editorOverviewRuler.modifiedForeground#0087af
editorPane.background#ff0000
editorWidget.resizeBorder#005f87
errorForeground#af0000
focusBorder#eeeeee
foreground#444444
gitDecoration.addedResourceForeground#008700
gitDecoration.conflictingResourceForeground#d70000
gitDecoration.deletedResourceForeground#af0000
gitDecoration.ignoredResourceForeground#878787
gitDecoration.modifiedResourceForeground#0087af
gitDecoration.renamedResourceForeground#0087af
gitDecoration.stageDeletedResourceForeground#af0000
gitDecoration.stageModifiedResourceForeground#0087af
gitDecoration.untrackedResourceForeground#008700
icon.foreground#444444
list.activeSelectionBackground#afd7ff
list.activeSelectionForeground#0087af
list.errorForeground#d70000
list.filterMatchBackground#ffff5f
list.focusBackground#afd7ff
list.focusForeground#0087af
list.hoverBackground#afd7ff
list.inactiveSelectionBackground#afd7ff
list.warningForeground#d75f00
menu.background#eeeeee
menu.border#d0d0d0
menu.foreground#444444
menu.selectionBackground#d0d0d0
menu.selectionForeground#444444
menubar.selectionBackground#0087af
minimapGutter.addedBackground#008700
minimapGutter.deletedBackground#af0000
minimapGutter.modifiedBackground#0087af
panel.background#eeeeee
panel.border#005f87
panel.dropBorder#d70087
panelSectionHeader.background#ff0000
panelSectionHeader.foreground#008700
panelTitle.activeForeground#005f87
panelTitle.inactiveForeground#444444
progressBar.background#d70087
sash.hoverBorder#005f87
scrollbar.shadow#005f87
selection.background#0087af88
sideBar.background#eeeeee
sideBar.border#005f87
sideBar.foreground#444444
sideBarSectionHeader.background#d0d0d0
sideBarSectionHeader.foreground#444444
sideBarTitle.foreground#444444
sideBySideEditor.horizontalBorder#005f87
sideBySideEditor.verticalBorder#005f87
statusBar.background#005f87
statusBar.debuggingBackground#005f87
statusBar.debuggingBorder#ffd787
statusBar.debuggingForeground#ffd787
statusBar.foreground#e4e4e4
statusBar.noFolderBackground#005f87
statusBar.noFolderBorder#afffaf
statusBar.noFolderForeground#afffaf
statusBarItem.activeBackground#0087af
statusBarItem.errorBackground#d70000
statusBarItem.hoverBackground#0087af
statusBarItem.prominentBackground#005faf
statusBarItem.remoteBackground#444444
statusBarItem.warningBackground#d75f00
tab.activeBackground#eeeeee
tab.activeBorder#eeeeee
tab.activeForeground#444444
tab.border#ffffff
tab.hoverBackground#eeeeee
tab.inactiveBackground#d0d0d0
tab.inactiveForeground#444444
textBlockQuote.border#005f87
textLink.activeForeground#0087af
textLink.foreground#005faf
titleBar.activeBackground#005f87
titleBar.activeForeground#e4e4e4
toolbar.hoverOutline#0087af
widget.shadow#005f87

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
strong	—	bold
property	—	italic
keyword	#d70087	normal
keyword.import, keyword.package	#d70087	normal
keyword.control.at-rule, keyword.declaration	#005faf	normal
keyword.control, keyword.control.conditional, keyword.control.flow, punctuation.definition.keyword	#8700af	bold
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.word	#444444	normal
keyword.operator.logical	#0087af	bold
keyword.operator.expression	#005faf	normal
keyword.function, keyword.operator.new, keyword.fragment	#005f87	bold
keyword.control.directive	#d70000	normal
keyword.type	#005f87	bold
keyword.other	#d70087	normal
keyword.other.using, keyword.other.definition	#005faf	normal
storage.type	#005faf	normal
storage.type.built-in.primitive, storage.type.primitive, storage.type.numeric, storage.type.function	#d70087	bold
storage.type.namespace	#005f87	bold
storage.type.type	#005faf	normal
storage.type.class, storage.type.struct, storage.type.enum, storage.type.union, storage.type.trait, storage.type.interface, storage.type.impl	#d70087	bold
storage.modifier	#005f87	bold
storage.modifier.mut	#005f87	bold
support.function	#005faf	normal
support.function.kernel	#d70087	normal
support.function.builtin	#5f8700	bold
support.module, support.type	#444444	bold
support.class, support.type.primitive, support.type.builtin	#d70087	bold
support.type.property-name	#005f87	bold
support.constant	#d75f00	normal
entity.name.constant, entity.name.label	#444444	normal
entity.name.function	#005faf	normal
entity.name.type, entity.name.class, entity.name.struct, entity.name.union, entity.name.class.ford-decl, entity.other.inherited-class, entity.name.function.definition, entity.name.function.constructor, entity.name.function.destructor	#0087af	bold
entity.name.trait, entity.name.interface, entity.name.impl	#005faf	bold
entity.name.fragment	#005f87	normal
entity.name.type.numeric, entity.name.type.primitive, punctuation.definition.anchor, punctuation.definition.alias, entity.name.type.anchor	#d70087	bold
entity.name.namespace	#005faf	normal
entity.name.function.macro, entity.name.function.preprocessor	#5f8700	bold
entity.name.enum	#008700	bold
punctuation.definition.tag, entity.name.tag	#005faf	normal
entity.name.section.group-title, entity.other.attribute-name	#d70087	normal
punctuation.definition.interpolation, meta.interpolation, punctuation.section.interpolation, meta.interpolated	#d75f00	normal
variable.other, variable.other.readwrite, variable.parameter, variable.other.member, variable.function, variable.annotation, punctuation.definition.annotation	#444444	normal
variable.other.normal	#0087af	normal
variable.other.bracket	#8700af	normal
variable.other.constant, variable.other.global, variable.other.readwrite.global	#005faf	normal
variable.other.property	—	italic
variable.language	#d75f00	normal
variable.other.predefined, variable.other.alias, variable.fragment	#d70087	bold
constant, constant.numeric, constant.numeric.integer, constant.numeric.integer.binary, constant.numeric.integer.octal, constant.numeric.integer.decimal, constant.numeric.integer.hexadecimal, constant.numeric.integer.other, constant.numeric.float, constant.numeric.float.binary, constant.numeric.float.octal, constant.numeric.float.decimal, constant.numeric.float.hexadecimal, constant.numeric.float.other, constant.numeric.complex, constant.numeric.complex.real, constant.numeric.complex.imaginary, constant.character.escape, constant.other.placeholder, constant.other	#d75f00	normal
constant.language	#008700	bold
constant.other.reference, constant.other.reference.link	—	underline
string	#5f8700	normal
string.unquoted, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.other, meta.string, string.quoted.unquoted, string.quoted.regexp, source.language-suffix.embedded, string.interpolated, string.regexp	#5f8700	normal
string.unquoted.plain	#444444	normal
string.other.math	#005f87	normal
punctuation.definition.link, string.other.link	—	underline
string.interpolated.dollar	#0087af	normal
comment	#878787	italic
comment.line, comment.block, comment.block.documentation, punctuation.definition.comment, meta.toc-list	#878787	italic
punctuation.definition.entity	#444444	normal
punctuation.section.embedded	#d75f00	normal
punctuation.definition.list, punctuation.definition.heading	—	bold
invalid	#d70000	normal
invalid.illegal, invalid.deprecated	#d70000	italic underline strikethrough
markup.bold	—	bold
markup.italic	#878787	italic
markup.underline	—	underline
markup.strikethrough	#5f8700	strikethrough
markup.deleted	#d70000	strikethrough
markup.heading	#d75f00	bold
heading.1	#008700	bold
heading.2	#0087af	bold
heading.3	#d70087	bold
markup.raw.inline, markup.other, markup.changed	#d70000	normal
markup.inserted	#008700	normal
markup.underline.link	#878787	italic underline
markup.inline.raw, markup.fenced_code.block, markup.raw.block, markup.quote	#5f8700	normal
markup.deleted.diff	#af0000	—
markup.inserted.diff	#008700	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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}!`;
}