newsprint

Name: newsprint
Author: lumiknit

Publisher: lumiknitThemes in package: 5

Simple monochrome color theme & variatns

GitHub

Color themes

VS Code preview

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

newsprint — newsprint

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

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#e8e8e8
activityBar.activeBorder#b7b7b7
activityBar.activeFocusBorder#444
activityBar.background#ddd
activityBar.border#b7b7b7
activityBar.dropBorder#444
activityBar.foreground#444
activityBar.inactiveForeground#aaa
activityBarBadge.background#666
activityBarBadge.foreground#eee
badge.background#bbb
badge.foreground#222
breadcrumb.activeSelectionForeground#000
breadcrumb.background#e8e8e8
breadcrumb.focusForeground#000
breadcrumb.foreground#444
breadcrumbPicker.background#ddd
button.background#f2f2f2
button.border#b7b7b7
button.foreground#444
button.hoverBackground#fff
checkbox.background#fff
checkbox.border#8880
checkbox.foreground#444
disabledForeground#777
dropdown.background#fff
dropdown.border#8880
dropdown.foreground#444
dropdown.listBackground#fff
editor.background#f2f2f2
editor.findMatchBackground#ff7b0040
editor.findMatchBorder#ff7b00a0
editor.findMatchHighlightBackground#ff7b0020
editor.findMatchHighlightBorder#ff7b0080
editor.findRangeHighlightBackground#ff7b0020
editor.foreground#444
editor.hoverHighlightBackground#d8d5cf
editor.lineHighlightBackground#f0f0f0
editor.lineHighlightBorder#8888
editor.selectionBackground#0099ff30
editor.selectionHighlightBackground#0099ff20
editor.selectionHighlightBorder#0099ff60
editor.wordHighlightBackground#0001
editor.wordHighlightBorder#0008
editor.wordHighlightStrongBackground#0001
editor.wordHighlightStrongBorder#0008
editorBracketMatch.background#e8e8e8
editorBracketMatch.border#000
editorCursor.background#fff
editorCursor.foreground#320
editorError.foreground#e41507
editorGroup.border#b7b7b7
editorGroup.dropBackground#8888
editorGroup.emptyBackground#eee
editorGroupHeader.border#b7b7b7
editorGroupHeader.tabsBackground#ddd
editorGroupHeader.tabsBorder#b7b7b7
editorGutter.addedBackground#57bd66
editorGutter.deletedBackground#e41507
editorGutter.foldingControlForeground#222
editorGutter.modifiedBackground#2981ca
editorIndentGuide.activeBackground#00000080
editorIndentGuide.background#00000010
editorLineNumber.activeForeground#888
editorLineNumber.foreground#ccc
editorLink.activeForeground#2981ca
editorOverviewRuler.findMatchForeground#ccc
editorSuggestWidget.selectedBackground#fff
editorWhitespace.foreground#ffffff80
editorWidget.background#eee
errorForeground#e41507
extensionButton.prominentBackground#ccc
extensionButton.prominentHoverBackground#ddd
focusBorder#888
foreground#444
icon.foreground#888
input.background#fff
input.border#8880
input.foreground#444
list.activeSelectionBackground#eee
list.activeSelectionForeground#000000
list.focusBackground#eee
list.focusForeground#000000
list.highlightForeground#000000
list.hoverForeground#000000
list.inactiveFocusBackground#ddd
list.inactiveSelectionBackground#ddd
list.inactiveSelectionForeground#000000
panel.background#e8e8e8
panel.border#b7b7b7
quickInput.background#ccc
quickInput.foreground#000
quickInputList.focusBackground#f2f2f2
quickInputList.focusForeground#444
quickInputList.focusIconForeground#444
quickInputTitle.background#ccc
searchEditor.findMatchBackground#ff7b0040
searchEditor.findMatchBorder#ff7b00a0
sideBar.background#e8e8e8
sideBar.border#b7b7b7
sideBar.dropBackground#eee
sideBar.foreground#444
sideBarSectionHeader.background#ddd
sideBarSectionHeader.border#b7b7b7
sideBarSectionHeader.foreground#000
sideBarTitle.foreground#222
statusBar.background#ddd
statusBar.border#b7b7b7
statusBar.debuggingBackground#ddd
statusBar.foreground#444
statusBar.noFolderBackground#ddd
tab.activeBackground#e8e8e8
tab.activeBorder#e8e8e8
tab.border#b7b7b7
tab.inactiveBackground#ddd
terminal.ansiBlack#000000
terminal.ansiBlue#2981ca
terminal.ansiBrightBlack#505050
terminal.ansiBrightBlue#4190F7
terminal.ansiBrightCyan#a3ffff
terminal.ansiBrightGreen#99e391
terminal.ansiBrightMagenta#d9b9f0
terminal.ansiBrightRed#FF675D
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffde82
terminal.ansiCyan#51d2ff
terminal.ansiGreen#57bd66
terminal.ansiMagenta#a464d1
terminal.ansiRed#e41507
terminal.ansiWhite#DDDDDD
terminal.ansiYellow#ffbd5e
terminal.background#e8e8e8
terminal.border#b7b7b7
terminal.foreground#444
terminalCursor.background#ddd
terminalCursor.foreground#444
textLink.activeForeground#4190f7
textLink.foreground#2981ca
titleBar.activeBackground#ddd
titleBar.border#b7b7b7
titleBar.inactiveBackground#ddd
widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#bbb	italic
comment.block.preprocessor	#999	bold
comment.documentation, comment.block.documentation	#999	—
invalid.illegal	#800000	underline
keyword, storage	#000	bold
keyword.operator, keyword.symbol, keyword.control.preprocessor, keyword.other.colon, keyword.other.double-colon	#444	—
meta.pattern-match, meta.type-definition	#444	—
support.type, storage.type	#000	bold
entity.name.type, entity.other.inherited-class, support.class	#666	bold italic
entity.name.module, entity.name.namespace	#222	bold italic
constant.language, support.constant, variable.language	#111	italic
constant.other	#444	italic
variable, support.variable	#888	italic
entity.name.function, support.function	#666	italic
entity.name.exception	#a00	underline
entity.name.section	—	bold
constant.numeric, constant.character, constant	#000	—
string	#000	—
constant.character.escape	#444	bold
string.regexp	#000	—
constant.other.symbol	#000	—
punctuation, comment.punctuation, meta.brace, meta.bracket, meta.paren, meta.paren-group	#777	—
meta.attribute	#888	bold italic
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html	#aaa	—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#888	bold
entity.name.tag	#000	bold
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#666	italic
constant.character.entity, punctuation.definition.entity	#666	italic
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css	#000	bold italic
meta.property-name, support.type.property-name	#444	bold
meta.property-value, meta.property-value constant.other, support.constant.property-value	#666	italic
keyword.other.important	#000	bold
markup.changed	#000000	—
markup.deleted	#000000	—
markup.italic	—	italic
markup.error	#660000	—
markup.inserted	#000000	—
meta.link	#000	underline
markup.output, markup.raw	#777777	—
markup.prompt	#777777	—
markup.heading	#000	bold
markup.bold	—	bold
markup.traceback	#660000	—
markup.strikethrough	—	strikethrough
markup.underline	—	underline
markup.quote	#888	italic
markup.list	#666	—
markup.bold, markup.italic, markup.strikethrough, markup.underline	#222	—
markup.inline.raw	#888
meta.diff.range, meta.diff.index, meta.separator	#434343	—
meta.diff.header.from-file	#434343	—
meta.diff.header.to-file	#434343	—

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