github-dotcom-dimmed-preview

Name: github-dotcom-dimmed-preview
Author: james-prado

Publisher: james-pradoThemes in package: 1

GitHub

VS Code preview

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

github-dotcom-dimmed-preview — github dotcom dimmed - preview

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.activeBorder#f9826c
activityBar.background#22272e
activityBar.border#444c56
activityBar.foreground#adbac7
activityBar.inactiveForeground#768390
activityBarBadge.background#316dca
activityBarBadge.foreground#cdd9e5
badge.background#1b4b91
badge.foreground#6cb6ff
breadcrumb.activeSelectionForeground#768390
breadcrumb.focusForeground#adbac7
breadcrumb.foreground#768390
breadcrumbPicker.background#373e47
button.background#347d39
button.foreground#ffffff
button.hoverBackground#46954a
checkbox.background#2d333b
checkbox.border#444c56
debugToolBar.background#373e47
descriptionForeground#768390
diffEditor.insertedTextBackground#46954a33
diffEditor.removedTextBackground#c93c3733
dropdown.background#373e47
dropdown.border#444c56
dropdown.foreground#adbac7
dropdown.listBackground#373e47
editor.background#22272e
editor.findMatchBackground#ffd33d44
editor.findMatchHighlightBackground#ffd33d22
editor.focusedStackFrameHighlightBackground#b808
editor.foldBackground#1e2228
editor.foreground#cdd9e5
editor.inactiveSelectionBackground#3392FF22
editor.lineHighlightBackground#2d333b
editor.selectionBackground#3392FF44
editor.selectionHighlightBackground#17E5E633
editor.selectionHighlightBorder#17E5E600
editor.stackFrameHighlightBackground#a707
editor.wordHighlightBackground#17E5E600
editor.wordHighlightBorder#17E5E699
editor.wordHighlightStrongBackground#17E5E600
editor.wordHighlightStrongBorder#17E5E666
editorBracketMatch.background#17E5E650
editorBracketMatch.border#17E5E600
editorCursor.foreground#6cb6ff
editorGroup.border#444c56
editorGroupHeader.tabsBackground#1e2228
editorGroupHeader.tabsBorder#444c56
editorGutter.addedBackground#2b6a30
editorGutter.deletedBackground#ad2e2c
editorGutter.modifiedBackground#966600
editorIndentGuide.activeBackground#444c56
editorIndentGuide.background#373e47
editorLineNumber.activeForeground#adbac7
editorLineNumber.foreground#768390
editorOverviewRuler.border#1c2128
editorWhitespace.foreground#545d68
editorWidget.background#373e47
errorForeground#e5534b
focusBorder#4184e4
foreground#adbac7
gitDecoration.addedResourceForeground#6bc46d
gitDecoration.conflictingResourceForeground#daaa3f
gitDecoration.deletedResourceForeground#e5534b
gitDecoration.ignoredResourceForeground#545d68
gitDecoration.modifiedResourceForeground#daaa3f
gitDecoration.submoduleResourceForeground#768390
gitDecoration.untrackedResourceForeground#6bc46d
input.background#22272e
input.border#373e47
input.foreground#adbac7
input.placeholderForeground#545d68
list.activeSelectionBackground#373e47
list.activeSelectionForeground#768390
list.focusBackground#373e47
list.focusForeground#cdd9e5
list.highlightForeground#4184e4
list.hoverBackground#2d333b
list.hoverForeground#768390
list.inactiveFocusBackground#2d333b
list.inactiveSelectionBackground#2d333b
list.inactiveSelectionForeground#768390
notificationCenterHeader.background#22272e
notificationCenterHeader.foreground#636e7b
notifications.background#2d333b
notifications.border#444c56
notifications.foreground#768390
notificationsErrorIcon.foreground#e5534b
notificationsInfoIcon.foreground#539bf5
notificationsWarningIcon.foreground#e0823d
panel.background#1e2228
panel.border#444c56
panelInput.border#444c56
panelTitle.activeBorder#f9826c
panelTitle.activeForeground#adbac7
panelTitle.inactiveForeground#768390
peekViewEditor.background#0d111788
peekViewEditor.matchHighlightBackground#ffd33d33
peekViewResult.background#22272e
peekViewResult.matchHighlightBackground#ffd33d33
pickerGroup.border#373e47
pickerGroup.foreground#768390
progressBar.background#316dca
quickInput.background#22272e
quickInput.foreground#adbac7
scrollbar.shadow#0008
scrollbarSlider.activeBackground#484F5888
scrollbarSlider.background#484F5833
scrollbarSlider.hoverBackground#484F5844
settings.headerForeground#768390
settings.modifiedItemIndicator#966600
sideBar.background#1e2228
sideBar.border#444c56
sideBar.foreground#768390
sideBarSectionHeader.background#1e2228
sideBarSectionHeader.border#444c56
sideBarSectionHeader.foreground#adbac7
sideBarTitle.foreground#adbac7
statusBar.background#22272e
statusBar.border#444c56
statusBar.debuggingBackground#c93c37
statusBar.debuggingForeground#cdd9e5
statusBar.foreground#768390
statusBar.noFolderBackground#22272e
statusBarItem.prominentBackground#2d333b
tab.activeBackground#22272e
tab.activeBorder#22272e
tab.activeBorderTop#f9826c
tab.activeForeground#adbac7
tab.border#444c56
tab.hoverBackground#22272e
tab.inactiveBackground#1e2228
tab.inactiveForeground#768390
tab.unfocusedActiveBorder#22272e
tab.unfocusedActiveBorderTop#444c56
tab.unfocusedHoverBackground#2d333b
terminal.ansiBlack#22272e
terminal.ansiBlue#539bf5
terminal.ansiBrightBlack#2d333b
terminal.ansiBrightBlue#2d333b
terminal.ansiBrightCyan#b3f0ff
terminal.ansiBrightGreen#6bc46d
terminal.ansiBrightMagenta#dcbdfb
terminal.ansiBrightRed#ff938a
terminal.ansiBrightWhite#909dab
terminal.ansiBrightYellow#daaa3f
terminal.ansiCyan#76e3ea
terminal.ansiGreen#57ab5a
terminal.ansiMagenta#b083f0
terminal.ansiRed#f47067
terminal.ansiWhite#909dab
terminal.ansiYellow#c69026
terminal.foreground#768390
textBlockQuote.background#1e2228
textBlockQuote.border#4f5964
textCodeBlock.background#cdd9e526
textLink.activeForeground#539bf5
textLink.foreground#539bf5
textPreformat.foreground#768390
textSeparator.foreground#373e47
titleBar.activeBackground#22272e
titleBar.activeForeground#768390
titleBar.border#444c56
titleBar.inactiveBackground#1e2228
titleBar.inactiveForeground#768390
tree.indentGuidesStroke#373e47
welcomePage.buttonBackground#373e47
welcomePage.buttonHoverBackground#444c56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#768390	—
constant, entity.name.constant, variable.other.constant, variable.language, entity	#6cb6ff	—
entity.name, meta.export.default, meta.definition.variable	#f69d50	—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression	#cdd9e5	—
entity.name.function	#dcbdfb	—
entity.name.tag, support.class.component	#8ddb8c	—
keyword	#f47067	—
storage, storage.type	#f47067	—
storage.modifier.package, storage.modifier.import, storage.type.java	#cdd9e5	—
string, punctuation.definition.string, string punctuation.section.embedded source	#96d0ff	—
support	#6cb6ff	—
meta.property-name	#6cb6ff	—
variable	#f69d50	—
variable.other	#cdd9e5	—
invalid.broken	#ff938a	italic
invalid.deprecated	#ff938a	italic
invalid.illegal	#ff938a	italic
invalid.unimplemented	#ff938a	italic
carriage-return	#22272e	italic underline
message.error	#ff938a	—
string source	#cdd9e5	—
string variable	#6cb6ff	—
source.regexp, string.regexp	#96d0ff	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#96d0ff	—
string.regexp constant.character.escape	#8ddb8c	bold
support.constant	#6cb6ff	—
support.variable	#6cb6ff	—
meta.module-reference	#6cb6ff	—
punctuation.definition.list.begin.markdown	#f69d50	—
markup.heading, markup.heading entity.name	#6cb6ff	bold
markup.quote	#8ddb8c	—
markup.italic	#cdd9e5	italic
markup.bold	#cdd9e5	bold
markup.raw	#6cb6ff	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#ff938a	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#8ddb8c	—
markup.changed, punctuation.definition.changed	#f69d50	—
markup.ignored, markup.untracked	#2d333b	—
meta.diff.range	#dcbdfb	bold
meta.diff.header	#6cb6ff	—
meta.separator	#6cb6ff	bold
meta.output	#6cb6ff	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#768390	—
brackethighlighter.unmatched	#ff938a	—
constant.other.reference.link, string.other.link	#96d0ff	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}!`;
}