GitHub Theme Minimal

Name: GitHub Theme Minimal
Author: Adrian Avram

Publisher: Adrian AvramThemes in package: 6

GitHub theme for VS Code, but modified for simplicity

Open in VS Code GitHub

Color themes

VS Code preview

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

GitHub Theme Minimal — GitHub Light

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.activeBorder#f9826c
activityBar.background#fff
activityBar.border#e1e4e8
activityBar.foreground#2f363d
activityBar.inactiveForeground#959da5
activityBarBadge.background#2188ff
activityBarBadge.foreground#fff
badge.background#dbedff
badge.foreground#005cc5
breadcrumb.activeSelectionForeground#586069
breadcrumb.focusForeground#2f363d
breadcrumb.foreground#6a737d
breadcrumbPicker.background#fafbfc
button.background#159739
button.foreground#fff
button.hoverBackground#138934
button.secondaryBackground#e1e4e8
button.secondaryForeground#1b1f23
button.secondaryHoverBackground#d1d5da
checkbox.background#fafbfc
checkbox.border#d1d5da
debugToolBar.background#fff
descriptionForeground#6a737d
diffEditor.insertedTextBackground#34d05822
diffEditor.removedTextBackground#d73a4922
dropdown.background#fafbfc
dropdown.border#e1e4e8
dropdown.foreground#2f363d
dropdown.listBackground#fff
editor.background#fff
editor.findMatchBackground#ffdf5d
editor.findMatchHighlightBackground#ffdf5d66
editor.focusedStackFrameHighlightBackground#28a74525
editor.foldBackground#d1d5da11
editor.foreground#1F2428
editor.inactiveSelectionBackground#0366d611
editor.lineHighlightBackground#ffffff
editor.linkedEditingBackground#0366d611
editor.selectionBackground#0366d625
editor.selectionHighlightBackground#34d05840
editor.selectionHighlightBorder#34d05800
editor.stackFrameHighlightBackground#ffd33d33
editor.wordHighlightBackground#34d05800
editor.wordHighlightBorder#24943e99
editor.wordHighlightStrongBackground#34d05800
editor.wordHighlightStrongBorder#24943e50
editorBracketMatch.background#34d05840
editorBracketMatch.border#34d05800
editorCursor.foreground#044289
editorGroup.border#e1e4e8
editorGroupHeader.tabsBackground#ffffff
editorGroupHeader.tabsBorder#e1e4e8
editorGutter.addedBackground#28a745
editorGutter.deletedBackground#d73a49
editorGutter.modifiedBackground#2188ff
editorIndentGuide.activeBackground#d7dbe0
editorIndentGuide.background#eff2f6
editorLineNumber.activeForeground#1F2428
editorLineNumber.foreground#1b1f234d
editorOverviewRuler.border#fff
editorWhitespace.foreground#d1d5da
editorWidget.background#ffffff
errorForeground#cb2431
focusBorder#2188ff
foreground#444d56
gitDecoration.addedResourceForeground#28a745
gitDecoration.conflictingResourceForeground#e36209
gitDecoration.deletedResourceForeground#d73a49
gitDecoration.ignoredResourceForeground#959da5
gitDecoration.modifiedResourceForeground#005cc5
gitDecoration.submoduleResourceForeground#959da5
gitDecoration.untrackedResourceForeground#28a745
input.background#fafbfc
input.border#e1e4e8
input.foreground#2f363d
input.placeholderForeground#959da5
list.activeSelectionBackground#e2e5e9
list.activeSelectionForeground#2f363d
list.focusBackground#cce5ff
list.hoverBackground#ebf0f4
list.hoverForeground#2f363d
list.inactiveFocusBackground#dbedff
list.inactiveSelectionBackground#e8eaed
list.inactiveSelectionForeground#2f363d
notificationCenterHeader.background#e1e4e8
notificationCenterHeader.foreground#6a737d
notifications.background#fafbfc
notifications.border#e1e4e8
notifications.foreground#2f363d
notificationsErrorIcon.foreground#d73a49
notificationsInfoIcon.foreground#005cc5
notificationsWarningIcon.foreground#e36209
panel.background#ffffff
panel.border#e1e4e8
panelInput.border#e1e4e8
panelTitle.activeBorder#f9826c
panelTitle.activeForeground#2f363d
panelTitle.inactiveForeground#6a737d
pickerGroup.border#e1e4e8
pickerGroup.foreground#2f363d
progressBar.background#2188ff
quickInput.background#fafbfc
quickInput.foreground#2f363d
scrollbar.shadow#6a737d33
scrollbarSlider.activeBackground#959da588
scrollbarSlider.background#959da533
scrollbarSlider.hoverBackground#959da544
settings.headerForeground#2f363d
settings.modifiedItemIndicator#2188ff
sideBar.background#ffffff
sideBar.border#e1e4e8
sideBar.foreground#586069
sideBarSectionHeader.background#ffffff
sideBarSectionHeader.border#e1e4e8
sideBarSectionHeader.foreground#2f363d
sideBarTitle.foreground#2f363d
statusBar.background#fff
statusBar.border#e1e4e8
statusBar.debuggingBackground#f9826c
statusBar.debuggingForeground#fff
statusBar.foreground#586069
statusBar.noFolderBackground#fff
statusBarItem.prominentBackground#e8eaed
tab.activeBackground#fff
tab.activeBorder#fff
tab.activeBorderTop#f9826c
tab.activeForeground#2f363d
tab.border#e1e4e8
tab.hoverBackground#fff
tab.inactiveBackground#ffffff
tab.inactiveForeground#6a737d
tab.unfocusedActiveBorder#fff
tab.unfocusedActiveBorderTop#e1e4e8
tab.unfocusedHoverBackground#fff
terminal.foreground#586069
terminal.tab.activeBorder#f9826c
textBlockQuote.background#fafbfc
textBlockQuote.border#e1e4e8
textCodeBlock.background#ffffff
textLink.activeForeground#005cc5
textLink.foreground#0366d6
textPreformat.foreground#586069
textSeparator.foreground#d1d5da
titleBar.activeBackground#fff
titleBar.activeForeground#2f363d
titleBar.border#e1e4e8
titleBar.inactiveBackground#ffffff
titleBar.inactiveForeground#6a737d
tree.indentGuidesStroke#e1e4e8
welcomePage.buttonBackground#ffffff
welcomePage.buttonHoverBackground#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#6a737d	—
constant, entity.name.constant, variable.other.constant, variable.language	#005cc5	—
entity, entity.name	#6f42c1	—
variable.parameter.function	#1F2428	—
entity.name.tag	#22863a	—
keyword	#d73a49	—
storage, storage.type	#d73a49	—
storage.modifier.package, storage.modifier.import, storage.type.java	#1F2428	—
string, punctuation.definition.string, string punctuation.section.embedded source	#032f62	—
support	#005cc5	—
meta.property-name	#005cc5	—
variable	#e36209	—
variable.other	#1F2428	—
invalid.broken	#b31d28	italic
invalid.deprecated	#b31d28	italic
invalid.illegal	#b31d28	italic
invalid.unimplemented	#b31d28	italic
carriage-return	#fafbfc	italic underline
message.error	#b31d28	—
string source	#1F2428	—
string variable	#005cc5	—
source.regexp, string.regexp	#032f62	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#032f62	—
string.regexp constant.character.escape	#22863a	bold
support.constant	#005cc5	—
support.variable	#005cc5	—
meta.module-reference	#005cc5	—
punctuation.definition.list.begin.markdown	#e36209	—
markup.heading, markup.heading entity.name	#005cc5	bold
markup.quote	#22863a	—
markup.italic	#1F2428	italic
markup.bold	#1F2428	bold
markup.raw	#005cc5	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#b31d28	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#22863a	—
markup.changed, punctuation.definition.changed	#e36209	—
markup.ignored, markup.untracked	#ffffff	—
meta.diff.range	#6f42c1	bold
meta.diff.header	#005cc5	—
meta.separator	#005cc5	bold
meta.output	#005cc5	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#586069	—
brackethighlighter.unmatched	#b31d28	—
constant.other.reference.link, string.other.link	#032f62	underline

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