lightwizard

Name: lightwizard
Author: Dustin Lahr

Publisher: Dustin LahrThemes in package: 1

GitHub

VS Code preview

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

lightwizard — lightwizard

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.activeBackground#4c00ff12
activityBar.activeBorder#4c00ff
activityBar.background#e9e7e7
activityBar.dropBackground#ffffff1f
activityBar.foreground#4c00ff
activityBar.inactiveForeground#646464
activityBarBadge.background#00ffff
activityBarBadge.foreground#3c3c3c
badge.background#c4c4c4
badge.foreground#333333
bookmarks.lineBackground#00000000
bookmarks.lineBorder#00000000
bookmarks.overviewRuler#157efb88
breadcrumb.activeSelectionForeground#4e4e4e
breadcrumb.background#f8f8ff
breadcrumb.focusForeground#4e4e4e
breadcrumb.foreground#616161cc
breadcrumbPicker.background#f3f3f3
button.background#007acc
button.foreground#ffffff
button.hoverBackground#0062a3
checkbox.background#ffffff
checkbox.border#cecece
debugExceptionWidget.background#f1dfde
debugExceptionWidget.border#a31515
debugIcon.breakpointCurrentStackframeForeground#ffcc00
debugIcon.breakpointDisabledForeground#848484
debugIcon.breakpointForeground#e51400
debugIcon.breakpointStackframeForeground#89d185
debugIcon.breakpointUnverifiedForeground#848484
debugIcon.continueForeground#007acc
debugIcon.disconnectForeground#a1260d
debugIcon.pauseForeground#007acc
debugIcon.restartForeground#388a34
debugIcon.startForeground#388a34
debugIcon.stepBackForeground#007acc
debugIcon.stepIntoForeground#007acc
debugIcon.stepOutForeground#007acc
debugIcon.stepOverForeground#007acc
debugIcon.stopForeground#a1260d
debugToolBar.background#f3f3f3
descriptionForeground#717171
diffEditor.insertedTextBackground#9bb95533
diffEditor.removedTextBackground#ff000033
dropdown.background#ffffff
dropdown.border#cecece
editor.background#f8f8ff
editor.findMatchBackground#c3e8f3
editor.findMatchHighlightBackground#eede008e
editor.findRangeHighlightBackground#29beea
editor.focusedStackFrameHighlightBackground#cee7ce73
editor.foldBackground#c3e8f34d
editor.foreground#3c3c3c
editor.hoverHighlightBackground#eede008e
editor.inactiveSelectionBackground#c3e8f3
editor.lineHighlightBackground#dddfe2
editor.lineHighlightBorder#eeeeee
editor.rangeHighlightBackground#ededed
editor.selectionBackground#c3e8f3
editor.selectionHighlightBackground#d9f0f799
editor.snippetFinalTabstopHighlightBorder#0a326480
editor.snippetTabstopHighlightBackground#0a326433
editor.stackFrameHighlightBackground#ffff6673
editor.symbolHighlightBackground#eede008e
editor.wordHighlightBackground#c3e8f3
editor.wordHighlightStrongBackground#29beea
editorBracketMatch.background#eede008e
editorBracketMatch.border#b9b9b9
editorCodeLens.foreground#999999
editorCursor.background#ffffff
editorCursor.foreground#29beea
editorError.foreground#e51400
editorGroup.border#e7e7e7
editorGroup.dropBackground#2677cb2e
editorGroupHeader.noTabsBackground#f8f8ff
editorGroupHeader.tabsBackground#f5f5f5
editorGutter.addedBackground#81b88b
editorGutter.background#f8f8ff
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#ca4b51
editorGutter.modifiedBackground#66afe0
editorHint.foreground#6c6c6c
editorHoverWidget.background#f3f3f3
editorHoverWidget.border#c8c8c8
editorHoverWidget.foreground#616161
editorHoverWidget.statusBarBackground#e7e7e7
editorIndentGuide.activeBackground#b9b9b9
editorIndentGuide.background#eaecf0
editorInfo.foreground#75beff
editorLightBulb.foreground#ddb100
editorLightBulbAutoFix.foreground#007acc
editorLineNumber.activeForeground#0b216f
editorLineNumber.foreground#b9b9b9
editorLink.activeForeground#0000ff
editorMarkerNavigation.background#ffffff
editorMarkerNavigationError.background#e51400
editorMarkerNavigationInfo.background#75beff
editorMarkerNavigationWarning.background#e9a700
editorOverviewRuler.addedForeground#81b88b99
editorOverviewRuler.border#f5f5f5
editorOverviewRuler.bracketMatchForeground#a0a0a0
editorOverviewRuler.commonContentForeground#60606066
editorOverviewRuler.currentContentForeground#40c8ae80
editorOverviewRuler.deletedForeground#ca4b5199
editorOverviewRuler.errorForeground#ff1212b3
editorOverviewRuler.findMatchForeground#d186167e
editorOverviewRuler.incomingContentForeground#40a6ff80
editorOverviewRuler.infoForeground#75beff
editorOverviewRuler.modifiedForeground#66afe099
editorOverviewRuler.rangeHighlightForeground#007acc99
editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
editorOverviewRuler.warningForeground#e9a700
editorOverviewRuler.wordHighlightForeground#a0a0a0cc
editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
editorPane.background#f8f8ff
editorRuler.foreground#d3d3d3
editorSuggestWidget.background#f3f3f3
editorSuggestWidget.border#c8c8c8
editorSuggestWidget.foreground#3c3c3c
editorSuggestWidget.highlightForeground#0066bf
editorSuggestWidget.selectedBackground#15c8ff36
editorUnnecessaryCode.opacity#00000077
editorWarning.foreground#e9a700
editorWhitespace.foreground#b9b9b9
editorWidget.background#f3f3f3
editorWidget.border#c8c8c8
editorWidget.foreground#616161
errorForeground#a1260d
extensionBadge.remoteBackground#00ffff
extensionBadge.remoteForeground#3c3c3c
extensionButton.prominentBackground#327e36
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#28632b
focusBorder#007acc66
foreground#616161
gitDecoration.addedResourceForeground#587c0c
gitDecoration.conflictingResourceForeground#6c6cc4
gitDecoration.deletedResourceForeground#ad0707
gitDecoration.ignoredResourceForeground#8e8e90
gitDecoration.modifiedResourceForeground#895503
gitDecoration.submoduleResourceForeground#1258a7
gitDecoration.untrackedResourceForeground#007100
icon.foreground#424242
imagePreview.border#80808059
input.background#ffffff
input.foreground#616161
input.placeholderForeground#61616180
inputOption.activeBackground#007acc1f
inputOption.activeBorder#007acc00
inputValidation.errorBackground#f2dede
inputValidation.errorBorder#be1100
inputValidation.infoBackground#d6ecf2
inputValidation.infoBorder#007acc
inputValidation.warningBackground#f6f5d2
inputValidation.warningBorder#b89500
list.activeSelectionBackground#15c8ff36
list.activeSelectionForeground#3c3c3c
list.dropBackground#15c8ff36
list.errorForeground#b01011
list.filterMatchBackground#eede008e
list.focusBackground#15c8ff36
list.highlightForeground#0066bf
list.hoverBackground#15c8ff36
list.inactiveSelectionBackground#15c8ff36
list.invalidItemForeground#b89500
list.warningForeground#855f00
listFilterWidget.background#efc1ad
listFilterWidget.noMatchesOutline#be1100
listFilterWidget.outline#00000000
menu.background#ffffff
menu.foreground#616161
menu.selectionBackground#15c8ff36
menu.selectionForeground#3c3c3c
menu.separatorBackground#888888
menubar.selectionBackground#0000001a
menubar.selectionForeground#3c3c3c
merge.commonContentBackground#60606029
merge.commonHeaderBackground#60606066
merge.currentContentBackground#40c8ae33
merge.currentHeaderBackground#40c8ae80
merge.incomingContentBackground#40a6ff33
merge.incomingHeaderBackground#40a6ff80
minimap.errorHighlight#ff1212b3
minimap.findMatchHighlight#d18616
minimap.selectionHighlight#add6ff
minimap.warningHighlight#e9a700
minimapGutter.addedBackground#81b88b
minimapGutter.deletedBackground#ca4b51
minimapGutter.modifiedBackground#66afe0
notificationCenterHeader.background#e7e7e7
notificationLink.foreground#006ab1
notifications.background#f3f3f3
notifications.border#e7e7e7
notifications.foreground#616161
notificationsErrorIcon.foreground#e51400
notificationsInfoIcon.foreground#75beff
notificationsWarningIcon.foreground#e9a700
panel.background#f8f8ff
panel.border#80808059
panel.dropBackground#2677cb2e
panelInput.border#dddddd
panelTitle.activeBorder#424242
panelTitle.activeForeground#424242
panelTitle.inactiveForeground#424242bf
peekView.border#007acc
peekViewEditor.background#f2f8fc
peekViewEditor.matchHighlightBackground#ededed
peekViewEditorGutter.background#f2f8fc
peekViewResult.background#f3f3f3
peekViewResult.fileForeground#1e1e1e
peekViewResult.lineForeground#646465
peekViewResult.matchHighlightBackground#c3e8f3
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#6c6c6c
peekViewTitle.background#ffffff
peekViewTitleDescription.foreground#616161e6
peekViewTitleLabel.foreground#333333
pickerGroup.border#cccedb
pickerGroup.foreground#0066bf
problemsErrorIcon.foreground#e51400
problemsInfoIcon.foreground#75beff
problemsWarningIcon.foreground#e9a700
progressBar.background#0e70c0
quickInput.background#f5f5f5
quickInput.foreground#3c3c3c
scrollbar.shadow#ededed
scrollbarSlider.activeBackground#00000099
scrollbarSlider.background#64646466
scrollbarSlider.hoverBackground#646464b3
searchEditor.findMatchBackground#eede005e
settings.checkboxBackground#ffffff
settings.checkboxBorder#cecece
settings.dropdownBackground#ffffff
settings.dropdownBorder#cecece
settings.dropdownListBorder#c8c8c8
settings.headerForeground#444444
settings.modifiedItemIndicator#66afe0
settings.numberInputBackground#ffffff
settings.numberInputForeground#616161
settings.textInputBackground#ffffff
settings.textInputForeground#616161
sideBar.background#f5f5f5
sideBar.dropBackground#0000001a
sideBar.foreground#3c3c3c
sideBarSectionHeader.background#f5f5f5
sideBarSectionHeader.foreground#3c3c3c
sideBarTitle.foreground#3c3c3c
statusBar.background#160396
statusBar.debuggingBackground#f5f5f5
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#f5f5f5
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#ffffff2e
statusBarItem.hoverBackground#ffffff1f
statusBarItem.prominentBackground#00000080
statusBarItem.prominentForeground#ffffff
statusBarItem.prominentHoverBackground#0000004d
statusBarItem.remoteBackground#00ffff
statusBarItem.remoteForeground#3c3c3c
symbolIcon.arrayForeground#616161
symbolIcon.booleanForeground#616161
symbolIcon.classForeground#d67e00
symbolIcon.colorForeground#616161
symbolIcon.constantForeground#616161
symbolIcon.constructorForeground#652d90
symbolIcon.enumeratorForeground#d67e00
symbolIcon.enumeratorMemberForeground#007acc
symbolIcon.eventForeground#d67e00
symbolIcon.fieldForeground#007acc
symbolIcon.fileForeground#616161
symbolIcon.folderForeground#616161
symbolIcon.functionForeground#652d90
symbolIcon.interfaceForeground#007acc
symbolIcon.keyForeground#616161
symbolIcon.keywordForeground#616161
symbolIcon.methodForeground#652d90
symbolIcon.moduleForeground#616161
symbolIcon.namespaceForeground#616161
symbolIcon.nullForeground#616161
symbolIcon.numberForeground#616161
symbolIcon.objectForeground#616161
symbolIcon.operatorForeground#616161
symbolIcon.packageForeground#616161
symbolIcon.propertyForeground#616161
symbolIcon.referenceForeground#616161
symbolIcon.snippetForeground#616161
symbolIcon.stringForeground#616161
symbolIcon.structForeground#616161
symbolIcon.textForeground#616161
symbolIcon.typeParameterForeground#616161
symbolIcon.unitForeground#616161
symbolIcon.variableForeground#007acc
tab.activeBackground#dbdbdbcb
tab.activeBorder#2600ff
tab.activeForeground#3c3c3c
tab.activeModifiedBorder#33aaee
tab.border#f5f5f5
tab.inactiveBackground#f5f5f5
tab.inactiveForeground#b9b9b9
tab.inactiveModifiedBorder#33aaee80
tab.unfocusedActiveBackground#dbdbdbcb
tab.unfocusedActiveBorder#2600ffb3
tab.unfocusedActiveForeground#3c3c3cb3
tab.unfocusedActiveModifiedBorder#33aaeeb3
tab.unfocusedHoverBackground#dbdbdbcb
tab.unfocusedHoverBorder#ff0000
tab.unfocusedInactiveForeground#b9b9b980
tab.unfocusedInactiveModifiedBorder#33aaee40
terminal.ansiBlack#000000
terminal.ansiBlue#0451a5
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#0451a5
terminal.ansiBrightCyan#0598bc
terminal.ansiBrightGreen#14ce14
terminal.ansiBrightMagenta#bc05bc
terminal.ansiBrightRed#cd3131
terminal.ansiBrightWhite#a5a5a5
terminal.ansiBrightYellow#b5ba00
terminal.ansiCyan#0598bc
terminal.ansiGreen#00bc00
terminal.ansiMagenta#bc05bc
terminal.ansiRed#cd3131
terminal.ansiWhite#555555
terminal.ansiYellow#949800
terminal.background#f8f8ff
terminal.border#80808059
terminal.foreground#333333
terminal.selectionBackground#00000040
terminalCursor.background#ffffff
terminalCursor.foreground#29beea
textBlockQuote.background#7f7f7f1a
textBlockQuote.border#007acc80
textCodeBlock.background#dcdcdc66
textLink.activeForeground#006ab1
textLink.foreground#006ab1
textPreformat.foreground#a31515
textSeparator.foreground#0000002e
titleBar.activeBackground#e9e7e7
titleBar.activeForeground#3c3c3c
titleBar.inactiveBackground#f5f5f5
titleBar.inactiveForeground#b9b9b9
tree.indentGuidesStroke#a9a9a9
widget.shadow#ededed

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment punctuation	#B9B9B9
punctuation.definition.constant.markdown,punctuation.definition.bold.markdown, punctuation.definition.italic.markdown,punctuation.definition.heading.markdown,punctuation.definition.heading.begin.markdown,punctuation.definition.heading.end.markdown,punctuation.definition.heading.setext.markdown,punctuation.definition.list_item.markdown,markup.list.numbered.bullet.markdown,punctuation.definition.bold.begin.markdown,punctuation.definition.bold.end.markdown,punctuation.definition.italic.begin.markdown,punctuation.definition.italic.end.markdown	#B9B9B9	—
markup.heading.1.markdown,markup.heading.2.markdown,markup.heading.markdown	#3C3C3C	bold
markup.bold.markdown	—	bold
markup.italic.markdown	—	italic
markup.quote.markdown	—	italic
meta.separator.markdown,meta.separator.thematic-break.markdown, punctuation.definition.thematic-break.markdown	#B9B9B9	—
punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.link.markdown, punctuation.definition.link.begin.markdown, punctuation.definition.link.end.markdown, punctuation.definition.metadata.markdown,punctuation.definition.blockquote.markdown	#B9B9B9	—
punctuation.definition.metadata.markdown,string.other.link.title.markdown,meta.link.inline.markdown,meta.link.reference.markdown,string.other.link.description.title.markdown,meta.link.reference.literal.markdown,punctuation.separator.key-value.markdown	#B9B9B9	—
meta.image.inline.markdown,punctuation.definition.image.begin.markdown,punctuation.definition.image.end.markdown	#B9B9B9	—
meta.image.reference.markdown	#B9B9B9	—
string.other.link.title.markdown	#3C3C3C	—
markup.underline	#B9B9B9	—
constant.character.escape.markdown	#B9B9B9	—
punctuation.definition.raw.code-fence.begin.markdown,punctuation.definition.raw.code-fence.end.markdown	#B9B9B9	—
meta.tag.inline.any.html,meta.tag.block.any.html	#B9B9B9	—
meta.header.multimarkdown,keyword.other.multimarkdown,string.unquoted.multimarkdown,punctuation.separator.key-value.multimarkdown	#B9B9B9	—
constant.other.reference.link.markdown	#B9B9B9	—
punctuation.definition.table-cell-alignment.markdown,punctuation.section.table-header.markdown,punctuation.separator.table-cell.markdown	#B9B9B9	—
meta.table.header.markdown,meta.table.header.markdown-gfm, meta.table.header-separator.markdown-gfm	—	bold
meta.link.reference.literal.footnote-id.markdown	#B9B9B9	—
meta.link.reference.def.markdown markup.underline.link.markdown	#3C3C3C	—
markup.raw.yaml.front-matter	#B9B9B9	—
footnote.delim.pandoc	#B9B9B9	—
citation.bracket.pandoc	#B9B9B9	—
footnote.num.pandoc	#B9B9B9	—
quote.pandoc	—	italic
markup.deleted.git_gutter,markup.inserted.git_gutter,markup.changed.git_guttermmarkup.ignored.git_gutter,markup.untracked.git_gutter	#B9B9B9	—
string.other.link.description.markdown	#3C3C3C	—
string.quoted	#D01040	—
storage.type, variable.other.block, keyword.control, support.other.namespace, support.class, keyword.operator.key, keyword.operator, support.function.array, entity.name.tag, keyword.other.special-method	—	bold
variable.other	#008080	—
entity.name.type.class	—	bold underline
support.type.property-name.json.comments, constant.language.symbol, entity.name.function, keyword.operator.key, keyword.operator, string.quoted.double.html	#160396	—
token.info-token	#316BCD	—
token.warn-token	#CD9731	—
token.error-token	#CD3131	—
token.debug-token	#800080	—

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