Gray Matter

Name: Gray Matter
Author: philipbe

Publisher: philipbeThemes in package: 2

A pair of colour schemes that take aesthetic cues from popular minimalist writing apps and aims to minimise the visual impact of most of the markdown punctuation.

GitHub

Color themes

VS Code preview

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

Gray Matter — Gray Matter Dark

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#1A191A
activityBar.foreground#616161
activityBarBadge.background#222122
activityBarBadge.foreground#BEBEBE
editor.background#1A191A
editor.findMatchBackground#1C434D
editor.findMatchHighlightBackground#1C434D
editor.findRangeHighlightBackground#29BEEA
editor.foreground#BEBEBE
editor.hoverHighlightBackground#222122
editor.inactiveSelectionBackground#1C434D
editor.lineHighlightBackground#222122
editor.rangeHighlightBackground#222122
editor.selectionBackground#1C434D
editor.wordHighlightBackground#1C434D
editor.wordHighlightStrongBackground#29BEEA
editorCursor.background#FFF
editorCursor.foreground#29BEEA
editorGroupHeader.tabsBackground#1A191A
editorIndentGuide.background#1A191A
editorLineNumber.foreground#616161
editorOverviewRuler.border#1A191A
editorWhitespace.foreground#616161
list.activeSelectionBackground#1C434D
list.activeSelectionForeground#BEBEBE
list.inactiveSelectionBackground#222122
peekViewEditor.matchHighlightBackground#222122
peekViewResult.matchHighlightBackground#1C434D
scrollbar.shadow#222122
sideBar.background#1A191A
sideBar.foreground#BEBEBE
sideBarSectionHeader.background#1A191A
sideBarSectionHeader.foreground#BEBEBE
statusBar.background#1A191A
statusBar.debuggingBackground#1A191A
statusBar.foreground#BEBEBE
statusBar.noFolderBackground#1A191A
tab.activeBackground#222122
tab.activeBorder#222122
tab.activeForeground#BEBEBE
tab.border#1A191A
tab.inactiveBackground#1A191A
tab.inactiveForeground#616161
terminalCursor.background#FFF
terminalCursor.foreground#29BEEA
titleBar.activeBackground#1A191A
titleBar.activeForeground#BEBEBE
titleBar.inactiveBackground#1A191A
titleBar.inactiveForeground#616161
widget.shadow#222122

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#BEBEBE	—
comment, comment punctuation	#616161
punctuation.definition.constant.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.heading.markdown, punctuation.definition.heading.begin.markdown, punctuation.definition.heading.end.markdown, punctuation.definition.heading.setext.markdown, punctuation.definition.list_item.markdown, markup.list.numbered.bullet.markdown, punctuation.definition.bold.begin.markdown, punctuation.definition.bold.end.markdown, punctuation.definition.italic.begin.markdown, punctuation.definition.italic.end.markdown	#616161	—
punctuation.definition.heading.begin.markdown, punctuation.definition.heading.end.markdown	—	normal
markup.heading.1.markdown, markup.heading.2.markdown, markup.heading.3.markdown, markup.heading.4.markdown, markup.heading.5.markdown, markup.heading.6.markdown, markup.heading.markdown	#BEBEBE	—
markup.heading.1.markdown, markup.heading.2.markdown	—	bold italic
markup.heading.3.markdown, markup.heading.4.markdown	—	bold
markup.bold.markdown	—	bold
markup.italic.markdown	—	italic
markup.quote.markdown	—	italic
meta.separator.markdown, meta.separator.thematic-break.markdown, punctuation.definition.thematic-break.markdown	#616161	—
punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.link.markdown, punctuation.definition.link.begin.markdown, punctuation.definition.link.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.blockquote.markdown	#616161	—
punctuation.definition.metadata.markdown, string.other.link.title.markdown, meta.link.inline.markdown, meta.link.reference.markdown, string.other.link.description.title.markdown, meta.link.reference.literal.markdown, punctuation.separator.key-value.markdown	#616161	—
meta.image.inline.markdown, punctuation.definition.image.begin.markdown, punctuation.definition.image.end.markdown	#616161	—
meta.image.reference.markdown	#616161	—
string.other.link.title.markdown	#BEBEBE	—
markup.underline	#616161	—
constant.character.escape.markdown	#616161	—
markup.raw.block.markdown, markup.raw.inline.markdown, markup.raw.code-fence.markdown	—	—
punctuation.definition.raw.code-fence.begin.markdown, punctuation.definition.raw.code-fence.end.markdown	#616161	—
meta.tag.inline.any.html, meta.tag.block.any.html	#616161	—
meta.header.multimarkdown, keyword.other.multimarkdown, string.unquoted.multimarkdown, punctuation.separator.key-value.multimarkdown	#616161	—
constant.other.reference.link.markdown	#616161	—
punctuation.definition.table-cell-alignment.markdown, punctuation.section.table-header.markdown, punctuation.separator.table-cell.markdown	#616161	—
meta.table.header.markdown, meta.table.header.markdown-gfm, meta.table.header-separator.markdown-gfm	—	bold
meta.link.reference.literal.footnote-id.markdown	#616161	—
meta.link.reference.def.markdown markup.underline.link.markdown	#BEBEBE	—
markup.raw.yaml.front-matter	#616161	—
entity.name.reference.link.markdown	#616161	—
footnote.delim.pandoc	#616161	—
citation.bracket.pandoc	#616161	—
footnote.num.pandoc	#616161	—
quote.pandoc	—	italic
markup.deleted.git_gutter, markup.inserted.git_gutter, markup.changed.git_guttermmarkup.ignored.git_gutter, markup.untracked.git_gutter	#616161	—
string.other.link.description.markdown	#BEBEBE	—

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