GitHub Theme

Name: GitHub Theme
Author: GitHub

Publisher: GitHubThemes in package: 9

GitHub theme for VS Code

GitHub

Color themes

VS Code preview

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

GitHub Theme — GitHub Light Colorblind (Beta)

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#fd8c73
activityBar.background#ffffff
activityBar.border#d0d7de
activityBar.foreground#24292f
activityBar.inactiveForeground#57606a
activityBarBadge.background#0969da
activityBarBadge.foreground#ffffff
badge.background#0969da
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#57606a
breadcrumb.focusForeground#24292f
breadcrumb.foreground#57606a
breadcrumbPicker.background#ffffff
button.background#218bff
button.foreground#ffffff
button.hoverBackground#0969da
button.secondaryBackground#ebecf0
button.secondaryForeground#24292f
button.secondaryHoverBackground#f3f4f6
checkbox.background#f6f8fa
checkbox.border#d0d7de
debugConsole.errorForeground#b35900
debugConsole.infoForeground#57606a
debugConsole.sourceForeground#9a6700
debugConsole.warningForeground#7d4e00
debugConsoleInputIcon.foreground#6639ba
debugIcon.breakpointForeground#b35900
debugTokenExpression.boolean#0550ae
debugTokenExpression.error#8a4600
debugTokenExpression.name#0550ae
debugTokenExpression.number#0550ae
debugTokenExpression.string#0a3069
debugTokenExpression.value#0a3069
debugToolBar.background#ffffff
descriptionForeground#57606a
diffEditor.insertedLineBackground#b6e3ff4d
diffEditor.insertedTextBackground#80ccff80
diffEditor.removedLineBackground#ffddb04d
diffEditor.removedTextBackground#f7993966
dropdown.background#ffffff
dropdown.border#d0d7de
dropdown.foreground#24292f
dropdown.listBackground#ffffff
editor.background#ffffff
editor.findMatchBackground#bf8700
editor.findMatchHighlightBackground#fae17d80
editor.focusedStackFrameHighlightBackground#54aeff66
editor.foldBackground#6e77811a
editor.foreground#24292f
editor.lineHighlightBackground#eaeef280
editor.linkedEditingBackground#0969da12
editor.selectionHighlightBackground#54aeff40
editor.stackFrameHighlightBackground#d4a72c66
editor.wordHighlightBackground#eaeef280
editor.wordHighlightBorder#afb8c199
editor.wordHighlightStrongBackground#afb8c14d
editor.wordHighlightStrongBorder#afb8c199
editorBracketHighlight.foreground1#0969da
editorBracketHighlight.foreground2#0969da
editorBracketHighlight.foreground3#9a6700
editorBracketHighlight.foreground4#b35900
editorBracketHighlight.foreground5#bf3989
editorBracketHighlight.foreground6#8250df
editorBracketHighlight.unexpectedBracket.foreground#57606a
editorBracketMatch.background#54aeff40
editorBracketMatch.border#54aeff99
editorCursor.foreground#0969da
editorGroup.border#d0d7de
editorGroupHeader.tabsBackground#f6f8fa
editorGroupHeader.tabsBorder#d0d7de
editorGutter.addedBackground#54aeff66
editorGutter.deletedBackground#f7993966
editorGutter.modifiedBackground#d4a72c66
editorIndentGuide.activeBackground#24292f3d
editorIndentGuide.background#24292f1f
editorInlayHint.background#afb8c133
editorInlayHint.foreground#57606a
editorInlayHint.paramBackground#afb8c133
editorInlayHint.paramForeground#57606a
editorInlayHint.typeBackground#afb8c133
editorInlayHint.typeForeground#57606a
editorLineNumber.activeForeground#24292f
editorLineNumber.foreground#8c959f
editorOverviewRuler.border#ffffff
editorWhitespace.foreground#afb8c1
editorWidget.background#ffffff
errorForeground#b35900
focusBorder#0969da
foreground#24292f
gitDecoration.addedResourceForeground#0969da
gitDecoration.conflictingResourceForeground#b35900
gitDecoration.deletedResourceForeground#b35900
gitDecoration.ignoredResourceForeground#6e7781
gitDecoration.modifiedResourceForeground#9a6700
gitDecoration.submoduleResourceForeground#57606a
gitDecoration.untrackedResourceForeground#0969da
icon.foreground#57606a
input.background#ffffff
input.border#d0d7de
input.foreground#24292f
input.placeholderForeground#6e7781
keybindingLabel.foreground#24292f
list.activeSelectionBackground#afb8c133
list.activeSelectionForeground#24292f
list.focusBackground#ddf4ff
list.focusForeground#24292f
list.highlightForeground#0969da
list.hoverBackground#eaeef280
list.hoverForeground#24292f
list.inactiveFocusBackground#ddf4ff
list.inactiveSelectionBackground#afb8c133
list.inactiveSelectionForeground#24292f
minimapSlider.activeBackground#8c959f47
minimapSlider.background#8c959f33
minimapSlider.hoverBackground#8c959f3d
notificationCenterHeader.background#f6f8fa
notificationCenterHeader.foreground#57606a
notifications.background#ffffff
notifications.border#d0d7de
notifications.foreground#24292f
notificationsErrorIcon.foreground#b35900
notificationsInfoIcon.foreground#0969da
notificationsWarningIcon.foreground#9a6700
panel.background#f6f8fa
panel.border#d0d7de
panelInput.border#d0d7de
panelTitle.activeBorder#fd8c73
panelTitle.activeForeground#24292f
panelTitle.inactiveForeground#57606a
pickerGroup.border#d0d7de
pickerGroup.foreground#57606a
progressBar.background#0969da
quickInput.background#ffffff
quickInput.foreground#24292f
scrollbar.shadow#6e778133
scrollbarSlider.activeBackground#8c959f47
scrollbarSlider.background#8c959f33
scrollbarSlider.hoverBackground#8c959f3d
settings.headerForeground#24292f
settings.modifiedItemIndicator#d4a72c66
sideBar.background#f6f8fa
sideBar.border#d0d7de
sideBar.foreground#24292f
sideBarSectionHeader.background#f6f8fa
sideBarSectionHeader.border#d0d7de
sideBarSectionHeader.foreground#24292f
sideBarTitle.foreground#24292f
statusBar.background#ffffff
statusBar.border#d0d7de
statusBar.debuggingBackground#b35900
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#0969da80
statusBar.foreground#57606a
statusBar.noFolderBackground#ffffff
statusBarItem.activeBackground#24292f1f
statusBarItem.focusBorder#0969da
statusBarItem.hoverBackground#24292f14
statusBarItem.prominentBackground#afb8c133
statusBarItem.remoteBackground#eaeef2
statusBarItem.remoteForeground#24292f
symbolIcon.arrayForeground#8a4600
symbolIcon.booleanForeground#0550ae
symbolIcon.classForeground#8a4600
symbolIcon.colorForeground#0a3069
symbolIcon.constantForeground#0550ae
symbolIcon.constructorForeground#3e1f79
symbolIcon.enumeratorForeground#8a4600
symbolIcon.enumeratorMemberForeground#0550ae
symbolIcon.eventForeground#57606a
symbolIcon.fieldForeground#8a4600
symbolIcon.fileForeground#7d4e00
symbolIcon.folderForeground#7d4e00
symbolIcon.functionForeground#6639ba
symbolIcon.interfaceForeground#8a4600
symbolIcon.keyForeground#0550ae
symbolIcon.keywordForeground#8a4600
symbolIcon.methodForeground#6639ba
symbolIcon.moduleForeground#8a4600
symbolIcon.namespaceForeground#8a4600
symbolIcon.nullForeground#0550ae
symbolIcon.numberForeground#0550ae
symbolIcon.objectForeground#8a4600
symbolIcon.operatorForeground#0a3069
symbolIcon.packageForeground#8a4600
symbolIcon.propertyForeground#8a4600
symbolIcon.referenceForeground#0550ae
symbolIcon.snippetForeground#0550ae
symbolIcon.stringForeground#0a3069
symbolIcon.structForeground#8a4600
symbolIcon.textForeground#0a3069
symbolIcon.typeParameterForeground#0a3069
symbolIcon.unitForeground#0550ae
symbolIcon.variableForeground#8a4600
tab.activeBackground#ffffff
tab.activeBorder#ffffff
tab.activeBorderTop#fd8c73
tab.activeForeground#24292f
tab.border#d0d7de
tab.hoverBackground#ffffff
tab.inactiveBackground#f6f8fa
tab.inactiveForeground#57606a
tab.unfocusedActiveBorder#ffffff
tab.unfocusedActiveBorderTop#d0d7de
tab.unfocusedHoverBackground#eaeef280
terminal.ansiBlack#24292f
terminal.ansiBlue#0969da
terminal.ansiBrightBlack#57606a
terminal.ansiBrightBlue#218bff
terminal.ansiBrightCyan#3192aa
terminal.ansiBrightGreen#0969da
terminal.ansiBrightMagenta#a475f9
terminal.ansiBrightRed#8a4600
terminal.ansiBrightWhite#8c959f
terminal.ansiBrightYellow#633c01
terminal.ansiCyan#1b7c83
terminal.ansiGreen#0550ae
terminal.ansiMagenta#8250df
terminal.ansiRed#b35900
terminal.ansiWhite#6e7781
terminal.ansiYellow#4d2d00
terminal.foreground#24292f
textBlockQuote.background#f6f8fa
textBlockQuote.border#d0d7de
textCodeBlock.background#afb8c133
textLink.activeForeground#0969da
textLink.foreground#0969da
textPreformat.background#afb8c133
textPreformat.foreground#57606a
textSeparator.foreground#d8dee4
titleBar.activeBackground#ffffff
titleBar.activeForeground#57606a
titleBar.border#d0d7de
titleBar.inactiveBackground#f6f8fa
titleBar.inactiveForeground#57606a
tree.indentGuidesStroke#d8dee4
welcomePage.buttonBackground#f6f8fa
welcomePage.buttonHoverBackground#f3f4f6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#6e7781	—
constant.other.placeholder, constant.character	#b35900	—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity	#0550ae	—
entity.name, meta.export.default, meta.definition.variable	#8a4600	—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression	#24292f	—
entity.name.function	#8250df	—
entity.name.tag, support.class.component	#0550ae	—
keyword	#b35900	—
storage, storage.type	#b35900	—
storage.modifier.package, storage.modifier.import, storage.type.java	#24292f	—
string, string punctuation.section.embedded source	#0a3069	—
support	#0550ae	—
meta.property-name	#0550ae	—
variable	#8a4600	—
variable.other	#24292f	—
invalid.broken	#6f3800	italic
invalid.deprecated	#6f3800	italic
invalid.illegal	#6f3800	italic
invalid.unimplemented	#6f3800	italic
carriage-return	#f6f8fa	italic underline
message.error	#6f3800	—
string variable	#0550ae	—
source.regexp, string.regexp	#0a3069	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#0a3069	—
string.regexp constant.character.escape	#0550ae	bold
support.constant	#0550ae	—
support.variable	#0550ae	—
support.type.property-name.json	#0550ae	—
meta.module-reference	#0550ae	—
punctuation.definition.list.begin.markdown	#8a4600	—
markup.heading, markup.heading entity.name	#0550ae	bold
markup.quote	#0550ae	—
markup.italic	#24292f	italic
markup.bold	#24292f	bold
markup.underline	—	underline
markup.strikethrough	—	strikethrough
markup.inline.raw	#0550ae	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#6f3800	—
punctuation.section.embedded	#b35900	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#0550ae	—
markup.changed, punctuation.definition.changed	#8a4600	—
markup.ignored, markup.untracked	#eaeef2	—
meta.diff.range	#8250df	bold
meta.diff.header	#0550ae	—
meta.separator	#0550ae	bold
meta.output	#0550ae	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#57606a	—
brackethighlighter.unmatched	#6f3800	—
constant.other.reference.link, string.other.link	#0a3069	—

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