Paper

Name: Paper
Author: Anurag Soni

Publisher: Anurag SoniThemes in package: 3

Light theme with minimal colors

Open in VS Code GitHub

Color themes

VS Code preview

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

Paper — Paper

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#fffff4
activityBar.background#fffff4
activityBar.border#ecece2
activityBar.foreground#111111
activityBar.inactiveForeground#8d8d87
activityBarBadge.background#4c4c49
badge.background#cecec6
badge.foreground#111111
button.background#d2d2c9
button.hoverBackground#c5c5bd
checkbox.border#ecece2
dart.closingLabels#dadad0
debugIcon.breakpointCurrentStackframeForeground#111111
debugIcon.breakpointDisabledForeground#111111
debugIcon.breakpointForeground#111111
debugIcon.breakpointStackframeForeground#111111
debugIcon.breakpointUnverifiedForeground#111111
debugIcon.continueForeground#111111
debugIcon.disconnectForeground#111111
debugIcon.pauseForeground#111111
debugIcon.restartForeground#111111
debugIcon.startForeground#111111
debugIcon.stepBackForeground#111111
debugIcon.stepIntoForeground#111111
debugIcon.stepOutForeground#111111
debugIcon.stepOverForeground#111111
debugIcon.stopForeground#111111
debugToolBar.background#fffff4
dropdown.background#fffff4
dropdown.foreground#111111
editor.background#fffff4
editor.findMatchBackground#fffff4
editor.findMatchBorder#111111
editor.findMatchHighlightBackground#fffff4
editor.findMatchHighlightBorder#8d8d87
editor.foldBackground#f3f3e9
editor.foreground#111111
editor.hoverHighlightBackground#e3e3d9
editor.lineHighlightBackground#f3f3e9
editor.selectionBackground#e3e3d9
editorBracketMatch.background#fffff4
editorBracketMatch.border#8d8d87
editorCursor.foreground#111111
editorError.foreground#535350
editorGroup.border#ecece2
editorGroupHeader.tabsBackground#fffff4
editorGroupHeader.tabsBorder#ecece2
editorHoverWidget.statusBarBackground#fffff4
editorIndentGuide.activeBackground#8d8d87
editorIndentGuide.background#d9d9d0
editorInfo.foreground#535350
editorLightBulb.foreground#111111
editorLineNumber.activeForeground#84847e
editorLineNumber.foreground#cecec6
editorLink.activeForeground#111111
editorOverviewRuler.border#ecece2
editorRuler.foreground#d9d9d0
editorSuggestWidget.foreground#4c4c49
editorSuggestWidget.highlightForeground#111111
editorWarning.foreground#535350
editorWhitespace.foreground#cecec6
editorWidget.background#fffff4
focusBorder#fffff4
gitDecoration.addedResourceForeground#111111
gitDecoration.conflictingResourceForeground#111111
gitDecoration.deletedResourceForeground#4c4c49
gitDecoration.ignoredResourceForeground#b6b6ae
gitDecoration.modifiedResourceForeground#111111
gitDecoration.submoduleResourceForeground#4c4c49
gitDecoration.untrackedResourceForeground#111111
icon.foreground#969690
input.background#fffff4
input.border#fffff4
input.foreground#111111
list.activeSelectionBackground#ecece2
list.activeSelectionForeground#111111
list.errorForeground#bf1e0d
list.filterMatchBackground#cecec6
list.filterMatchBorder#fffff4
list.focusBackground#ecece2
list.highlightForeground#111111
list.hoverBackground#fffff4
list.inactiveSelectionBackground#fffff4
list.inactiveSelectionForeground#111111
list.warningForeground#bd7c16
listFilterWidget.background#fffff4
listFilterWidget.noMatchesOutline#bf1e0d
listFilterWidget.outline#8d8d87
menu.background#fffff4
menu.foreground#111111
menubar.selectionBackground#ecece2
panel.border#ecece2
panelTitle.activeBorder#fffff4
panelTitle.activeForeground#111111
panelTitle.inactiveForeground#8d8d87
peekView.border#969690
peekViewEditor.background#fffff4
peekViewEditor.matchHighlightBackground#fffff4
peekViewEditor.matchHighlightBorder#8d8d87
peekViewEditorGutter.background#fffff4
peekViewResult.background#f4f4e9
peekViewResult.fileForeground#111111
peekViewResult.lineForeground#8d8d87
peekViewResult.matchHighlightBackground#e3e3d9
peekViewResult.selectionBackground#fffff4
peekViewResult.selectionForeground#111111
pickerGroup.foreground#111111
sash.hoverBorder#e3e3d9
scrollbar.shadow#fffff4
scrollbarSlider.activeBackground#1111111e
scrollbarSlider.background#1111111e
scrollbarSlider.hoverBackground#1111111e
settings.checkboxBorder#ecece2
settings.dropdownBorder#ecece2
settings.modifiedItemIndicator#969690
settings.textInputBorder#ecece2
sideBar.background#fffff4
sideBar.border#ecece2
sideBar.foreground#4c4c49
sideBarSectionHeader.background#fffff4
sideBarSectionHeader.border#ecece2
statusBar.background#fffff4
statusBar.border#ecece2
statusBar.debuggingBackground#fffff4
statusBar.debuggingBorder#ecece2
statusBar.debuggingForeground#111111
statusBar.foreground#111111
statusBar.noFolderBackground#fffff4
statusBar.noFolderBorder#ecece2
statusBar.noFolderForeground#111111
statusBarItem.activeBackground#fffff4
statusBarItem.hoverBackground#fffff4
symbolIcon.arrayForeground#111111
symbolIcon.booleanForeground#111111
symbolIcon.classForeground#111111
symbolIcon.colorForeground#111111
symbolIcon.constantForeground#111111
symbolIcon.constructorForeground#111111
symbolIcon.enumeratorForeground#111111
symbolIcon.enumeratorMemberForeground#111111
symbolIcon.eventForeground#111111
symbolIcon.fieldForeground#111111
symbolIcon.fileForeground#111111
symbolIcon.folderForeground#111111
symbolIcon.functionForeground#111111
symbolIcon.interfaceForeground#111111
symbolIcon.keyForeground#111111
symbolIcon.keywordForeground#111111
symbolIcon.methodForeground#111111
symbolIcon.moduleForeground#111111
symbolIcon.namespaceForeground#111111
symbolIcon.nullForeground#111111
symbolIcon.numberForeground#111111
symbolIcon.objectForeground#111111
symbolIcon.operatorForeground#111111
symbolIcon.packageForeground#111111
symbolIcon.propertyForeground#111111
symbolIcon.referenceForeground#111111
symbolIcon.snippetForeground#111111
symbolIcon.stringForeground#111111
symbolIcon.structForeground#111111
symbolIcon.textForeground#111111
symbolIcon.typeParameterForeground#111111
symbolIcon.unitForeground#111111
symbolIcon.variableForeground#111111
tab.activeForeground#111111
tab.border#fffff4
tab.inactiveBackground#fffff4
tab.inactiveForeground#8d8d87
terminal.ansiBlack#fffff4
terminal.ansiBlue#a0a099
terminal.ansiBrightBlack#cfcfc7
terminal.ansiBrightBlue#a0a099
terminal.ansiBrightCyan#41413e
terminal.ansiBrightGreen#70706c
terminal.ansiBrightMagenta#111111
terminal.ansiBrightRed#111111
terminal.ansiBrightWhite#111111
terminal.ansiBrightYellow#111111
terminal.ansiCyan#41413e
terminal.ansiGreen#70706c
terminal.ansiMagenta#111111
terminal.ansiRed#111111
terminal.ansiWhite#111111
terminal.ansiYellow#111111
terminal.background#fffff4
terminal.foreground#111111
terminalCursor.background#fffff4
terminalCursor.foreground#111111
textLink.activeForeground#111111
textLink.foreground#111111
textPreformat.foreground#111111
titleBar.activeBackground#fffff4
titleBar.activeForeground#111111
titleBar.border#ecece2
titleBar.inactiveBackground#fffff4
tree.indentGuidesStroke#dadad0
window.activeBorder#ecece2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable.parameter.function	#111111	—
comment, punctuation.definition.comment	#a9a9a2	—
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array	#111111	—
none	#111111	—
keyword.operator	#111111	bold
keyword	#373735	bold
variable	#2e2e2d	—
entity.name.function, meta.require, support.function.any-method	#4c4c49	—
support.class, entity.name.class, entity.name.type.class	#111111	—
meta.class	#111111	—
keyword.other.special-method	#4c4c49	bold
storage	#373735	—
support.function	#111111	—
string, constant.other.symbol, entity.other.inherited-class	#216609	—
constant.numeric	#1E6FCC	—
constant	#111111	—
entity.name.tag	#2e2e2d	—
entity.other.attribute-name	#111111	—
entity.other.attribute-name.id, punctuation.definition.entity	#4c4c49	—
meta.selector	#373735	—
markup.heading punctuation.definition.heading, entity.name.section	#4c4c49	bold
keyword.other.unit	#111111	bold
markup.bold, punctuation.definition.bold	#111111	bold
markup.italic, punctuation.definition.italic	#373735	italic
markup.raw.inline	#111111	—
string.other.link, punctuation.definition.string.end.markdown	#2e2e2d	—
meta.link	#111111	—
markup.list	#2e2e2d	—
markup.quote	#111111	—
meta.separator	#111111	—
markup.inserted	#111111	—
markup.deleted	#2e2e2d	—
markup.changed	#373735	—
constant.other.color	#111111	—
string.regexp	#111111	—
constant.character.escape	#111111	—
punctuation.section.embedded, variable.interpolation	#373735	—
invalid.illegal	#111111	—
invalid.broken	#fffff4	—
invalid.deprecated	#111111	—
invalid.unimplemented	#111111	—

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