newsprint

Name: newsprint
Author: lumiknit

Publisher: lumiknitThemes in package: 5

Simple monochrome color theme & variatns

GitHub

Color themes

newsprint-so

VS Code preview

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

newsprint — newsprint-so

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#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#0c0d0f
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#9c2021a0
editorGhostText.foreground#587ca080
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#2981caa0
editorOverviewRuler.findMatchForeground#ccc
editorSuggestWidget.selectedBackground#fff
editorWhitespace.foreground#ffffff80
editorWidget.background#eee
errorForeground#9c2021
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#3b4044
terminal.ansiBlue#005493
terminal.ansiBrightBlack#626b74
terminal.ansiBrightBlue#0680db
terminal.ansiBrightCyan#43bfd8
terminal.ansiBrightGreen#88b52c
terminal.ansiBrightMagenta#b962b0
terminal.ansiBrightRed#c83232
terminal.ansiBrightWhite#fafafa
terminal.ansiBrightYellow#e67a22
terminal.ansiCyan#4290a0
terminal.ansiGreen#567a0d
terminal.ansiMagenta#803378
terminal.ansiRed#9c2021
terminal.ansiWhite#d5d9db
terminal.ansiYellow#b75300
terminal.background#e8e8e8
terminal.border#b7b7b7
terminal.foreground#0c0d0e
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	#666f78	—
comment.block.preprocessor, meta.shebang	#005493	—
comment.documentation, comment.block.documentation	#666f78	—
invalid.illegal	#9c2021	underline
keyword, storage	#005493	—
keyword.operator, keyword.symbol, keyword.control.preprocessor, keyword.other.colon, keyword.other.double-colon	#0c0d0f	—
meta.pattern-match, meta.type-definition	#0c0d0f	—
support.type, storage.type	#005493	—
storage.type.haskell, entity.name.type, entity.other.inherited-class, support.class	#b75300	—
entity.name.module, entity.name.namespace	#0c0d0f	—
constant.language, support.constant, variable.language	#b75300	—
constant.other	#b75300	—
variable, support.variable	#0c0d0f	—
variable.other.generic-type	#b75300	—
entity.name.function, support.function	#b75300	—
entity.name.exception	#9c2021	underline
entity.name.section	—	bold
constant.numeric, constant.character, constant	#b75300	—
string	#567a0d	—
constant.character.escape	#567a0d	—
string.regexp	#567a0d	—
constant.other.symbol	#567a0d	—
meta.attribute	#005493	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html	#005493	—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#0c0d0f	—
entity.name.tag	#b75300	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#005493	—
constant.character.entity, punctuation.definition.entity	#567a0d	—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css	#005493	—
meta.property-name, support.type.property-name	#803378	—
meta.property-value, meta.property-value constant.other, support.constant.property-value	#0c0d0f	—
keyword.other.important	#005493	—
meta.attribute-selector entity.other.attribute-name	#567a0d	—
markup.changed	#0c0d0f	—
markup.deleted	#0c0d0f	—
markup.italic	—	italic
markup.error	#660000	—
markup.inserted	#0c0d0f	—
meta.link	#0c0d0f	underline
markup.output, markup.raw	#777777	—
markup.prompt	#777777	—
markup.heading	#005493	—
markup.bold	—	bold
markup.traceback	#660000	—
markup.strikethrough	—	strikethrough
markup.underline	—	underline
markup.quote	#567a0d	—
markup.list	#666	—
markup.bold, markup.italic, markup.strikethrough, markup.underline	#0c0d0f	—
markup.inline.raw	#567a0d	—
markup.fenced_code.block	#567a0d	—
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}!`;
}