GitHub Theme with Italics

Name: GitHub Theme with Italics
Author: gitKendra

Publisher: gitKendraThemes in package: 2

This VSCode theme merges GitHub color scheme with Tomorrow Operator Mono's text decoration scheme

Open in VS Code GitHub

Color themes

VS Code preview

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

GitHub Theme with Italics — Github Dark (Italics)

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.activeBorder#f9826c
activityBar.background#24292e
activityBar.border#1b1f23
activityBar.foreground#fafbfc
activityBar.inactiveForeground#6a737d
activityBarBadge.background#0366d6
activityBarBadge.foreground#ffffff
badge.background#044289
badge.foreground#c8e1ff
breadcrumb.activeSelectionForeground#d1d5da
breadcrumb.focusForeground#fafbfc
breadcrumb.foreground#959da5
breadcrumbPicker.background#2b3036
button.background#176f2c
button.foreground#dcffe4
button.hoverBackground#22863a
checkbox.background#444d56
checkbox.border#1b1f23
debugToolBar.background#2b3036
descriptionForeground#959da5
diffEditor.insertedTextBackground#28a74530
diffEditor.removedTextBackground#d73a4930
dropdown.background#2f363d
dropdown.border#1b1f23
dropdown.foreground#fafbfc
dropdown.listBackground#24292e
editor.background#24292e
editor.findMatchBackground#ffd33d44
editor.findMatchHighlightBackground#ffd33d22
editor.focusedStackFrameHighlightBackground#dbab09
editor.foldBackground#282e33
editor.foreground#fafbfc
editor.inactiveSelectionBackground#3392ff22
editor.lineHighlightBackground#2b3036
editor.selectionBackground#3392ff44
editor.selectionHighlightBackground#17e5e633
editor.stackFrameHighlightBackground#b08800
editor.wordHighlightBackground#17e5e600
editor.wordHighlightBorder#17e5e633
editor.wordHighlightStrongBackground#17e5e600
editor.wordHighlightStrongBorder#17e5e666
editorBracketMatch.background#17e5e650
editorBracketMatch.border#17e5e600
editorCursor.foreground#c8e1ff
editorGroup.border#1b1f23
editorGroupHeader.tabsBackground#1f2428
editorGroupHeader.tabsBorder#1b1f23
editorGutter.addedBackground#28a745
editorGutter.deletedBackground#ea4a5a
editorGutter.modifiedBackground#2188ff
editorIndentGuide.activeBackground#444d56
editorIndentGuide.background#2f363d
editorLineNumber.activeForeground#fafbfc
editorLineNumber.foreground#444d56
editorOverviewRuler.border#1b1f23
editorWhitespace.foreground#444d56
editorWidget.background#1f2428
errorForeground#f97583
focusBorder#005cc5
foreground#d1d5da
gitDecoration.addedResourceForeground#34d058
gitDecoration.conflictingResourceForeground#ffab70
gitDecoration.deletedResourceForeground#ea4a5a
gitDecoration.ignoredResourceForeground#6a737d
gitDecoration.modifiedResourceForeground#79b8ff
gitDecoration.submoduleResourceForeground#6a737d
gitDecoration.untrackedResourceForeground#34d058
input.background#2f363d
input.border#1b1f23
input.foreground#fafbfc
input.placeholderForeground#959da5
list.activeSelectionBackground#39414a
list.activeSelectionForeground#fafbfc
list.focusBackground#044289
list.hoverBackground#282e34
list.hoverForeground#fafbfc
list.inactiveFocusBackground#1d2d3e
list.inactiveSelectionBackground#282e34
list.inactiveSelectionForeground#fafbfc
notificationCenterHeader.background#24292e
notificationCenterHeader.foreground#959da5
notifications.background#2f363d
notifications.border#1b1f23
notifications.foreground#fafbfc
notificationsErrorIcon.foreground#ea4a5a
notificationsInfoIcon.foreground#79b8ff
notificationsWarningIcon.foreground#ffab70
panel.background#1f2428
panel.border#1b1f23
panelInput.border#2f363d
panelTitle.activeBorder#f9826c
panelTitle.activeForeground#fafbfc
panelTitle.inactiveForeground#959da5
pickerGroup.border#444d56
pickerGroup.foreground#fafbfc
progressBar.background#0366d6
quickInput.background#24292e
quickInput.foreground#fafbfc
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#6a737d88
scrollbarSlider.background#6a737d33
scrollbarSlider.hoverBackground#6a737d44
settings.headerForeground#fafbfc
settings.modifiedItemIndicator#0366d6
sideBar.background#1f2428
sideBar.border#1b1f23
sideBar.foreground#e1e4e8
sideBarSectionHeader.background#1f2428
sideBarSectionHeader.border#1b1f23
sideBarSectionHeader.foreground#fafbfc
sideBarTitle.foreground#fafbfc
statusBar.background#24292e
statusBar.border#1b1f23
statusBar.debuggingBackground#931c06
statusBar.debuggingForeground#ffffff
statusBar.foreground#d1d5da
statusBar.noFolderBackground#24292e
tab.activeBackground#24292e
tab.activeBorder#24292e
tab.activeBorderTop#f9826c
tab.activeForeground#fafbfc
tab.border#1b1f23
tab.hoverBackground#24292e
tab.inactiveBackground#1f2428
tab.inactiveForeground#959da5
tab.unfocusedActiveBorder#24292e
tab.unfocusedActiveBorderTop#1b1f23
tab.unfocusedHoverBackground#24292e
terminal.foreground#d1d5da
textBlockQuote.background#24292e
textBlockQuote.border#444d56
textCodeBlock.background#2f363d
textLink.activeForeground#c8e1ff
textLink.foreground#79b8ff
textPreformat.foreground#d1d5da
textSeparator.foreground#586069
titleBar.activeBackground#24292e
titleBar.activeForeground#fafbfc
titleBar.border#1b1f23
titleBar.inactiveBackground#1f2428
titleBar.inactiveForeground#959da5
tree.indentGuidesStroke#2f363d
welcomePage.buttonBackground#2f363d
welcomePage.buttonHoverBackground#444d56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis, storage, comment, entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.tag.jade, entity.other.attribute-name.tag.pug, markup.italic, keyword.control, variable.language	—	italic
strong, markup.bold, markup.heading	—	bold
markup.underline	—	underline
comment, punctuation.definition.comment, string.comment	#6A737D	—
constant, entity.name.constant, variable.other.constant, variable.language	#79B8FF	—
entity, entity.name	#B392F0	—
variable.parameter.function	#FAFBFC	—
entity.name.tag	#85E89D	—
keyword	#F97583	—
storage, storage.type	#F97583	—
storage.modifier.package, storage.modifier.import, storage.type.java	#FAFBFC	—
string, punctuation.definition.string, string punctuation.section.embedded source	#9ECBFF	—
support	#79B8FF	—
meta.property-name	#79B8FF	—
variable	#FFAB70	—
variable.other	#FAFBFC	—
invalid.broken	#FDAEB7	italic
invalid.deprecated	#FDAEB7	italic
invalid.illegal	#FDAEB7	italic
invalid.unimplemented	#FDAEB7	italic
carriage-return	#24292E	italic underline
message.error	#FDAEB7	—
string source	#FAFBFC	—
string variable	#79B8FF	—
source.regexp, string.regexp	#DBEDFF	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#DBEDFF	—
string.regexp constant.character.escape	#85E89D	bold
support.constant	#79B8FF	—
support.variable	#79B8FF	—
meta.module-reference	#79B8FF	—
markup.list	#FFFDEF	—
markup.heading, markup.heading entity.name	#79B8FF	bold
markup.quote	#85E89D	—
markup.italic	#FAFBFC	italic
markup.bold	#FAFBFC	bold
markup.raw	#79B8FF	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#FDAEB7	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#85E89D	—
markup.changed, punctuation.definition.changed	#FFAB70	—
markup.ignored, markup.untracked	#2F363D	—
meta.diff.range	#B392F0	bold
meta.diff.header	#79B8FF	—
meta.separator	#79B8FF	bold
meta.output	#79B8FF	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#D1D5DA	—
brackethighlighter.unmatched	#FDAEB7	—
constant.other.reference.link, string.other.link	#DBEDFF	underline
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

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