Pre

Name: Pre
Author: Leandro Matos

Publisher: Leandro MatosThemes in package: 1

GitHub

VS Code preview

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

Pre — Pre

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#f8f8f8
activityBar.background#191919
activityBar.border#191919
activityBar.dropBackground#191919
activityBar.foreground#f8f8f8
activityBar.inactiveForeground#f8f8f866
activityBarBadge.background#23ff5e
activityBarBadge.foreground#191919
badge.background#23ff5e
badge.foreground#191919
breadcrumb.activeSelectionForeground#23ff5e
breadcrumb.background#292929
breadcrumb.focusForeground#f8f8f8
breadcrumb.foreground#7b7b7b
breadcrumbPicker.background#191919
button.background#23ff53
button.foreground#191919
button.hoverBackground#23ff53
checkbox.background#292929
checkbox.border#191919
checkbox.foreground#f8f8f8
contrastActiveBorder#19191900
contrastBorder#19191900
debugExceptionWidget.background#292929
debugExceptionWidget.border#7b7b7b
debugToolBar.background#292929
descriptionForeground#7b7b7b
diffEditor.insertedTextBackground#23ff5350
diffEditor.insertedTextBorder#23ff5e00
diffEditor.removedTextBackground#fe002650
diffEditor.removedTextBorder#fe002600
dropdown.background#292929
dropdown.border#19191900
dropdown.foreground#f8f8f8
editor.background#292929
editor.findMatchBackground#23ff5e00
editor.findMatchBorder#23ff5e
editor.findMatchHighlightBackground#191919
editor.findMatchHighlightBorder#f8f8f8
editor.foreground#f8f8f8
editor.hoverHighlightBackground#191919
editor.inactiveSelectionBackground#454545
editor.lineHighlightBackground#191919
editor.lineHighlightBorder#191919
editor.rangeHighlightBackground#191919
editor.selectionBackground#191919
editor.selectionHighlightBackground#19191900
editor.selectionHighlightBorder#f8f8f8
editor.wordHighlightBackground#19191900
editor.wordHighlightStrongBackground#191919
editorBracketMatch.background#191919
editorBracketMatch.border#23ff5e
editorCodeLens.foreground#7b7b7b
editorCursor.foreground#23ff5e
editorError.border#191919
editorError.foreground#fe0026
editorGroup.border#191919
editorGroup.dropBackground#191919
editorGroupHeader.noTabsBackground#191919
editorGroupHeader.tabsBackground#191919
editorGroupHeader.tabsBorder#191919
editorGutter.addedBackground#23ff5e
editorGutter.background#292929
editorGutter.deletedBackground#ff2b92
editorGutter.modifiedBackground#fff64f
editorHoverWidget.background#191919
editorHoverWidget.border#191919
editorIndentGuide.background#454545
editorLineNumber.foreground#7b7b7b
editorLink.activeForeground#7b7b7b
editorMarkerNavigation.background#3b536433
editorMarkerNavigationError.background#fe0026
editorMarkerNavigationWarning.background#23ff5e
editorOverviewRuler.border#191919
editorOverviewRuler.commonContentForeground#23ff5e30
editorOverviewRuler.currentContentForeground#fe002630
editorOverviewRuler.incomingContentForeground#23ff5e50
editorRuler.foreground#7b7b7b
editorSuggestWidget.background#191919
editorSuggestWidget.border#191919
editorSuggestWidget.foreground#7b7b7b
editorSuggestWidget.highlightForeground#23ff5e
editorSuggestWidget.selectedBackground#292929
editorWarning.border#f8f8f800
editorWarning.foreground#23ff5e
editorWhitespace.foreground#f8f8f81a
editorWidget.background#191919
editorWidget.border#191919
errorForeground#fe0026
extensionButton.prominentBackground#23ff53
extensionButton.prominentForeground#191919
extensionButton.prominentHoverBackground#23ff53
focusBorder#191919
foreground#7b7b7b
gitDecoration.conflictingResourceForeground#fff64f
gitDecoration.deletedResourceForeground#ff2b92
gitDecoration.ignoredResourceForeground#747476
gitDecoration.modifiedResourceForeground#23ff5e
gitDecoration.untrackedResourceForeground#00e5ff
gitlens.gutterBackgroundColor#292929
gitlens.gutterForegroundColor#f8f8f8
gitlens.gutterUncommittedForegroundColor#23ff5e
gitlens.lineHighlightBackgroundColor#19191900
gitlens.trailingLineBackgroundColor#19191900
gitlens.trailingLineForegroundColor#23ff5e
input.background#292929
input.border#191919
input.foreground#23ff5e
input.placeholderForeground#7b7b7b
inputOption.activeBorder#23ff5e
inputValidation.errorBackground#292929
inputValidation.errorBorder#fe0026
inputValidation.infoBackground#292929
inputValidation.infoBorder#00e5ff
inputValidation.warningBackground#292929
inputValidation.warningBorder#23ff5e
list.activeSelectionBackground#292929
list.activeSelectionForeground#f8f8f8
list.dropBackground#191919
list.focusBackground#292929
list.focusForeground#f8f8f8
list.highlightForeground#23ff5e
list.hoverBackground#292929
list.hoverForeground#f8f8f8
list.inactiveSelectionBackground#292929
list.inactiveSelectionForeground#f8f8f8
menu.background#191919
merge.border#19191900
merge.currentContentBackground#191919
merge.currentHeaderBackground#191919
merge.incomingContentBackground#191919
merge.incomingHeaderBackground#191919
notificationCenter.border#23ff5e
notificationCenterHeader.background#191919
notificationCenterHeader.foreground#7b7b7b
notificationLink.foreground#23ff5e
notifications.background#191919
notifications.border#23ff5e
notifications.foreground#7b7b7b
notificationToast.border#23ff5e
panel.background#191919
panel.border#191919
panelTitle.activeBorder#23ff5e00
panelTitle.activeForeground#23ff5e
panelTitle.inactiveForeground#7b7b7b
peekView.border#23ff5e
peekViewEditor.background#292929
peekViewEditor.matchHighlightBackground#29292900
peekViewEditorGutter.background#191919
peekViewResult.background#191919
peekViewResult.fileForeground#7b7b7b
peekViewResult.lineForeground#f8f8f8
peekViewResult.matchHighlightBackground#191919
peekViewResult.selectionBackground#191919
peekViewResult.selectionForeground#f8f8f8
peekViewTitle.background#191919
peekViewTitleDescription.foreground#7b7b7b
peekViewTitleLabel.foreground#23ff5e
pickerGroup.border#191919
pickerGroup.foreground#7b7b7b
progressBar.background#23ff5e
scrollbar.shadow#19191900
scrollbarSlider.activeBackground#7b7b7b
scrollbarSlider.background#7b7b7b
scrollbarSlider.hoverBackground#7b7b7b
selection.background#191919
sideBar.background#191919
sideBar.border#191919
sideBar.foreground#7b7b7b
sideBarSectionHeader.background#292929
sideBarSectionHeader.foreground#7b7b7b
sideBarTitle.foreground#7b7b7b
statusBar.background#191919
statusBar.border#191919
statusBar.debuggingBackground#23ff5e
statusBar.debuggingBorder#23ff5e
statusBar.debuggingForeground#191919
statusBar.foreground#7b7b7b
statusBar.noFolderBackground#191919
statusBar.noFolderBorder#191919
statusBar.noFolderForeground#7b7b7b
statusBarItem.activeBackground#191919
statusBarItem.hoverBackground#191919
statusBarItem.prominentBackground#191919
statusBarItem.prominentHoverBackground#191919
tab.activeBackground#292929
tab.activeBorder#23ff5e00
tab.activeForeground#23ff5e
tab.activeModifiedBorder#23ff5e
tab.border#19191900
tab.inactiveBackground#191919
tab.inactiveForeground#7b7b7b
tab.inactiveModifiedBorder#23ff5e80
tab.unfocusedActiveForeground#7b7b7b
tab.unfocusedActiveModifiedBorder#23ff5e80
tab.unfocusedInactiveForeground#7b7b7b
tab.unfocusedInactiveModifiedBorder#23ff5e40
terminal.ansiBlack#000000
terminal.ansiBlue#7b7b7b
terminal.ansiBrightBlack#191919
terminal.ansiBrightBlue#7b7b7b
terminal.ansiBrightCyan#00e5ff
terminal.ansiBrightGreen#23ff5e
terminal.ansiBrightMagenta#bd58fd
terminal.ansiBrightRed#ff2b92
terminal.ansiBrightWhite#f8f8f8
terminal.ansiBrightYellow#fff64f
terminal.ansiCyan#00e5ff
terminal.ansiGreen#23ff5e
terminal.ansiMagenta#bd58fd
terminal.ansiRed#ff2b92
terminal.ansiWhite#f8f8f8
terminal.ansiYellow#fff64f
terminal.background#191919
terminal.border#19191900
terminal.foreground#f8f8f8
terminal.selectionBackground#ffffff40
terminalCursor.background#19191900
terminalCursor.foreground#f8f8f8
textBlockQuote.background#292929
textBlockQuote.border#23ff53
textCodeBlock.background#292929
textLink.activeForeground#23ff53
textLink.foreground#23ff53
textPreformat.foreground#23ff5e
textSeparator.foreground#191919
titleBar.activeBackground#191919
titleBar.activeForeground#f8f8f8
titleBar.inactiveBackground#292929
titleBar.inactiveForeground#f8f8f833
tree.indentGuidesStroke#23ff5e
walkThrough.embeddedEditorBackground#191919
welcomePage.buttonBackground#292929
welcomePage.buttonHoverBackground#191919
widget.shadow#19191900

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#7b7b7b
string	#fff64f	—
constant.numeric	#bd58fd	—
constant.language	#bd58fd	—
constant.character, constant.other	#bd58fd	—
variable	—
variable.other.readwrite.instance	#ff991b
constant.character.escaped, constant.character.escape, string source, string source.ruby	#23ff5e
keyword	#ff2b92	—
storage	#ff2b92
storage.type	#00e5ff	italic
entity.name.class	#23ff5e	underline
entity.other.inherited-class	#23ff5e	italic underline
entity.name.function	#23ff5e
variable.parameter	#ff991b	italic
entity.name.tag	#ff2b92
entity.other.attribute-name	#23ff5e
support.function	#00e5ff
support.constant	#00e5ff
support.type, support.class	#00e5ff	italic
support.other.variable	—
invalid	#f8f8f8
invalid.deprecated	#f8f8f8	—
meta.structure.dictionary.json string.quoted.double.json	#f8f8f8	—
meta.diff, meta.diff.header	#00e5ff	—
markup.deleted	#ff2b92	—
markup.inserted	#23ff5e	—
markup.changed	#fff64f	—
constant.numeric.line-number.find-in-files - match	#bd93f9	—
entity.name.filename	#E6DB74	—
message.error	#fe0026	—
punctuation.definition.string.begin.json - meta.structure.dictionary.value.json, punctuation.definition.string.end.json - meta.structure.dictionary.value.json	#f8f8f8	—
meta.structure.dictionary.json string.quoted.double.json	#00e5ff	—
meta.structure.dictionary.value.json string.quoted.double.json	#fff64f	—
meta meta meta meta meta meta meta.structure.dictionary.value string	#23ff5e	—
meta meta meta meta meta meta.structure.dictionary.value string	#ff991b	—
meta meta meta meta meta.structure.dictionary.value string	#ff2b92	—
meta meta meta meta.structure.dictionary.value string	#bd58fd	—
meta meta meta.structure.dictionary.value string	#23ff5e	—
meta meta.structure.dictionary.value string	#ff991b	—

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