hololight-theme

Name: hololight-theme
Author: Milan Iliev

Publisher: Milan IlievThemes in package: 1

GitHub

VS Code preview

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

hololight-theme — Hololight

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#e5e5e5
activityBar.background#f7f7f7
activityBar.dropBackground#090a0b
activityBar.foreground#2c2c2c
activityBar.inactiveForeground#6f6f6f
activityBarBadge.background#0278aa
activityBarBadge.foreground#090a0b
badge.background#fafafa
badge.foreground#383a42
breadcrumb.activeSelectionForeground#090a0b
breadcrumb.background#ececef
breadcrumb.focusForeground#202227
breadcrumb.foreground#383a42
breadcrumbPicker.background#ececef
button.background#ececef
button.foreground#090a0b
button.hoverBackground#696c77
button.secondaryBackground#b100ae
button.secondaryForeground#090a0b
button.secondaryHoverBackground#696c77
charts.blue#0278aa
charts.foreground#383a42
charts.green#4ea100
charts.lines#383a42
charts.orange#d75f00
charts.purple#b100ae
charts.red#c90d45
charts.yellow#e69d00
checkbox.background#fafafa
checkbox.foreground#383a42
debugConsole.errorForeground#c90d45
debugConsole.infoForeground#383a42
debugConsole.sourceForeground#383a42
debugConsole.warningForeground#e69d00
debugConsoleInputIcon.foreground#383a42
debugExceptionWidget.background#ececef
debugIcon.breakpointCurrentStackframeForeground#e69d00
debugIcon.breakpointDisabledForeground#696c77
debugIcon.breakpointForeground#c90d45
debugIcon.breakpointStackframeForeground#986801
debugIcon.breakpointUnverifiedForeground#e5e5e5
debugIcon.continueForeground#4ea100
debugIcon.disconnectForeground#c90d45
debugIcon.pauseForeground#0278aa
debugIcon.restartForeground#4ea100
debugIcon.startForeground#4ea100
debugIcon.stepBackForeground#986801
debugIcon.stepIntoForeground#01a6bc
debugIcon.stepOutForeground#b100ae
debugIcon.stepOverForeground#0278aa
debugIcon.stopForeground#c90d45
debugTokenExpression.boolean#d75f00
debugTokenExpression.error#c90d45
debugTokenExpression.name#b100ae
debugTokenExpression.number#d75f00
debugTokenExpression.string#4ea100
debugTokenExpression.value#383a42
debugToolBar.background#ececef
debugView.stateLabelBackground#0278aa
debugView.stateLabelForeground#090a0b
debugView.valueChangedHighlight#0278aa
descriptionForeground#a0a1a7
diffEditor.diagonalFill#e5e5e5
diffEditor.insertedTextBackground#4ea10020
diffEditor.removedTextBackground#c90d4520
dropdown.background#fafafa
dropdown.foreground#383a42
dropdown.listBackground#fafafa
editor.background#fafafa
editor.findMatchBackground#e69d006f
editor.findMatchHighlightBackground#d75f006f
editor.findRangeHighlightBackground#ececef6f
editor.foreground#383a42
editor.hoverHighlightBackground#e5e5e56f
editor.inactiveSelectionBackground#e5ebf1
editor.lineHighlightBackground#ececef
editor.rangeHighlightBackground#ececef6f
editor.selectionBackground#e5e5e5
editor.selectionHighlightBackground#add6ff4d
editor.snippetFinalTabstopHighlightBackground#a0a1a7
editor.snippetTabstopHighlightBackground#e5e5e5
editor.wordHighlightBackground#e5e5e56f
editor.wordHighlightStrongBackground#a0a1a76f
editorBracketMatch.background#e5e5e5
editorCodeLens.foreground#e5e5e5
editorCursor.foreground#383a42
editorError.foreground#c90d45
editorGroup.background#fafafa
editorGroup.dropBackground#e5e5e56f
editorGroup.emptyBackground#fafafa
editorGroupHeader.noTabsBackground#ececef
editorGroupHeader.tabsBackground#ececef
editorGutter.addedBackground#4ea100
editorGutter.background#fafafa
editorGutter.commentRangeForeground#696c77
editorGutter.deletedBackground#c90d45
editorGutter.foldingControlForeground#383a42
editorGutter.modifiedBackground#b100ae
editorHint.foreground#0278aa
editorHoverWidget.background#fafafa
editorHoverWidget.foreground#383a42
editorIndentGuide.activeBackground#939393
editorIndentGuide.background#d3d3d3
editorInfo.foreground#01a6bc
editorLightBulb.foreground#e69d00
editorLightBulbAutoFix.foreground#0278aa
editorLineNumber.activeForeground#1f7a96
editorLineNumber.foreground#36a1c1
editorLink.activeForeground#0278aa
editorMarkerNavigation.background#ececef
editorMarkerNavigationError.background#c90d45
editorMarkerNavigationInfo.background#0278aa
editorMarkerNavigationWarning.background#e69d00
editorOverviewRuler.addedForeground#4ea100
editorOverviewRuler.bracketMatchForeground#202227
editorOverviewRuler.commonContentForeground#986801
editorOverviewRuler.currentContentForeground#0278aa
editorOverviewRuler.deletedForeground#c90d45
editorOverviewRuler.errorForeground#c90d45
editorOverviewRuler.findMatchForeground#e69d006f
editorOverviewRuler.incomingContentForeground#4ea100
editorOverviewRuler.infoForeground#01a6bc
editorOverviewRuler.modifiedForeground#b100ae
editorOverviewRuler.rangeHighlightForeground#a0a1a76f
editorOverviewRuler.selectionHighlightForeground#e5e5e56f
editorOverviewRuler.warningForeground#e69d00
editorOverviewRuler.wordHighlightForeground#090a0b6f
editorOverviewRuler.wordHighlightStrongForeground#0278aa6f
editorPane.background#fafafa
editorRuler.foreground#a0a1a7
editorSuggestWidget.background#fcfcfc
editorSuggestWidget.foreground#383a42
editorSuggestWidget.highlightForeground#0278aa
editorSuggestWidget.selectedBackground#e5e5e5
editorWarning.foreground#e69d00
editorWhitespace.foreground#a0a1a7
editorWidget.background#fafafa
editorWidget.foreground#383a42
errorForeground#c90d45
extensionBadge.remoteBackground#d75f00
extensionBadge.remoteForeground#090a0b
extensionButton.prominentBackground#4ea100
extensionButton.prominentForeground#090a0b
extensionButton.prominentHoverBackground#e5e5e5
foreground#383a42
gitDecoration.addedResourceForeground#4ea100
gitDecoration.conflictingResourceForeground#e69d00
gitDecoration.deletedResourceForeground#c90d45
gitDecoration.ignoredResourceForeground#a0a1a7
gitDecoration.modifiedResourceForeground#b100ae
gitDecoration.stageDeletedResourceForeground#c90d45
gitDecoration.stageModifiedResourceForeground#b100ae
gitDecoration.submoduleResourceForeground#986801
gitDecoration.untrackedResourceForeground#d75f00
icon.foreground#696c77
input.background#fafafa
input.foreground#383a42
input.placeholderForeground#767676
inputOption.activeBackground#e5e5e5
inputOption.activeBorder#d75f00
inputOption.activeForeground#383a42
inputValidation.errorBackground#c90d45
inputValidation.errorBorder#c90d45
inputValidation.errorForeground#383a42
inputValidation.infoBackground#0278aa
inputValidation.infoBorder#0278aa
inputValidation.infoForeground#383a42
inputValidation.warningBackground#e69d00
inputValidation.warningBorder#e69d00
inputValidation.warningForeground#383a42
list.activeSelectionBackground#e5e5e5
list.activeSelectionForeground#383a42
list.dropBackground#090a0b
list.errorForeground#c90d45
list.filterMatchBackground#e5e5e5
list.focusBackground#e5e5e5
list.focusForeground#383a42
list.highlightForeground#090a0b
list.hoverBackground#e8e8e8
list.hoverForeground#383a42
list.inactiveFocusBackground#e5e5e5
list.inactiveSelectionBackground#e5e5e5
list.inactiveSelectionForeground#383a42
list.invalidItemForeground#c90d45
list.warningForeground#e69d00
listFilterWidget.background#fafafa
listFilterWidget.noMatchesOutline#c90d45
menu.background#ececef
menu.foreground#383a42
menu.selectionBackground#e5e5e5
menu.selectionForeground#383a42
menu.separatorBackground#090a0b
menubar.selectionBackground#ececef
menubar.selectionForeground#383a42
merge.currentContentBackground#0278aa40
merge.currentHeaderBackground#0278aa40
merge.incomingContentBackground#4ea10060
merge.incomingHeaderBackground#4ea10060
minimap.background#fafafa
minimap.errorHighlight#c90d45
minimap.findMatchHighlight#e69d006f
minimap.selectionHighlight#e5e5e56f
minimap.warningHighlight#e69d00
minimapGutter.addedBackground#4ea100
minimapGutter.deletedBackground#c90d45
minimapGutter.modifiedBackground#b100ae
notebook.rowHoverBackground#ececef
notification.background#e5e5e5
notification.buttonBackground#0278aa
notification.buttonForeground#090a0b
notification.buttonHoverBackground#e5e5e5
notification.errorBackground#c90d45
notification.errorForeground#090a0b
notification.foreground#383a42
notification.infoBackground#01a6bc
notification.infoForeground#090a0b
notification.warningBackground#e69d00
notification.warningForeground#090a0b
notificationCenterHeader.background#ececef
notificationCenterHeader.foreground#383a42
notificationLink.foreground#0278aa
notifications.background#e5e5e5
notifications.foreground#383a42
notificationsErrorIcon.foreground#c90d45
notificationsInfoIcon.foreground#0278aa
notificationsWarningIcon.foreground#e69d00
panel.background#fafafa
panel.dropBackground#ececef6f
panelTitle.activeForeground#383a42
panelTitle.inactiveForeground#a0a1a7
peekViewEditor.background#ececef
peekViewEditor.matchHighlightBackground#d75f006f
peekViewEditorGutter.background#ececef
peekViewResult.background#fafafa
peekViewResult.fileForeground#383a42
peekViewResult.lineForeground#a0a1a7
peekViewResult.matchHighlightBackground#d75f006f
peekViewResult.selectionBackground#e5e5e5
peekViewResult.selectionForeground#383a42
peekViewTitle.background#e5e5e5
peekViewTitleDescription.foreground#a0a1a7
peekViewTitleLabel.foreground#383a42
pickerGroup.foreground#a0a1a7
problemsErrorIcon.foreground#c90d45
problemsInfoIcon.foreground#01a6bc
problemsWarningIcon.foreground#e69d00
progressBar.background#a0a1a7
quickInput.background#ececef
quickInput.foreground#383a42
scrollbar.shadow#ececef
scrollbarSlider.activeBackground#696c776f
scrollbarSlider.background#e5e5e56f
scrollbarSlider.hoverBackground#a0a1a76f
selection.background#0278aa
settings.checkboxBackground#ececef
settings.checkboxForeground#383a42
settings.dropdownBackground#ececef
settings.dropdownForeground#383a42
settings.focusedRowBackground#e5e5e5
settings.headerForeground#383a42
settings.modifiedItemForeground#0278aa
settings.modifiedItemIndicator#0278aa
settings.numberInputBackground#ececef
settings.numberInputBorder#cecece
settings.numberInputForeground#383a42
settings.textInputBackground#ececef
settings.textInputBorder#cecece
settings.textInputForeground#383a42
sideBar.background#f7f7f7
sideBar.dropBackground#ffffff1f
sideBar.foreground#383a42
sideBarSectionHeader.background#80808033
sideBarSectionHeader.foreground#383a42
sideBarTitle.foreground#6f6f6f
statusBar.background#f7f7f7
statusBar.debuggingBackground#cc6633
statusBar.debuggingForeground#ffffff
statusBar.foreground#6f6f6f
statusBar.noFolderBackground#f7f7f7
statusBar.noFolderForeground#6f6f6f
statusBarItem.activeBackground#a0a1a7
statusBarItem.errorBackground#c90d45
statusBarItem.errorForeground#090a0b
statusBarItem.hoverBackground#e5e5e5
statusBarItem.prominentBackground#b100ae
statusBarItem.prominentForeground#090a0b
statusBarItem.prominentHoverBackground#c90d45
statusBarItem.remoteBackground#4ea100
statusBarItem.remoteForeground#090a0b
symbolIcon.arrayForeground#383a42
symbolIcon.booleanForeground#d75f00
symbolIcon.classForeground#e69d00
symbolIcon.colorForeground#f0f
symbolIcon.constantForeground#d75f00
symbolIcon.constructorForeground#0278aa
symbolIcon.enumeratorForeground#d75f00
symbolIcon.enumeratorMemberForeground#0278aa
symbolIcon.eventForeground#e69d00
symbolIcon.fieldForeground#c90d45
symbolIcon.fileForeground#383a42
symbolIcon.folderForeground#383a42
symbolIcon.functionForeground#0278aa
symbolIcon.interfaceForeground#0278aa
symbolIcon.keyForeground#f0f
symbolIcon.keywordForeground#b100ae
symbolIcon.methodForeground#0278aa
symbolIcon.moduleForeground#383a42
symbolIcon.namespaceForeground#383a42
symbolIcon.nullForeground#986801
symbolIcon.numberForeground#d75f00
symbolIcon.objectForeground#f0f
symbolIcon.operatorForeground#f0f
symbolIcon.packageForeground#f0f
symbolIcon.propertyForeground#383a42
symbolIcon.referenceForeground#f0f
symbolIcon.snippetForeground#383a42
symbolIcon.stringForeground#4ea100
symbolIcon.structForeground#e69d00
symbolIcon.textForeground#383a42
symbolIcon.typeParameterForeground#f0f
symbolIcon.unitForeground#f0f
symbolIcon.variableForeground#c90d45
tab.activeBackground#fafafa
tab.activeForeground#383a42
tab.activeModifiedBorder#0278aa
tab.hoverBackground#e5e5e5
tab.inactiveBackground#ececef
tab.inactiveForeground#a0a1a7
tab.inactiveModifiedBorder#0278aa
tab.unfocusedActiveBackground#fafafa
tab.unfocusedActiveForeground#696c77
tab.unfocusedActiveModifiedBorder#0278aa
tab.unfocusedHoverBackground#e5e5e5
tab.unfocusedInactiveForeground#a0a1a7
tab.unfocusedInactiveModifiedBorder#0278aa
terminal.ansiBlack#fafafa
terminal.ansiBlue#0278aa
terminal.ansiBrightBlack#a0a1a7
terminal.ansiBrightBlue#0278aa
terminal.ansiBrightCyan#01a6bc
terminal.ansiBrightGreen#4ea100
terminal.ansiBrightMagenta#b100ae
terminal.ansiBrightRed#c90d45
terminal.ansiBrightWhite#090a0b
terminal.ansiBrightYellow#e69d00
terminal.ansiCyan#01a6bc
terminal.ansiGreen#4ea100
terminal.ansiMagenta#b100ae
terminal.ansiRed#c90d45
terminal.ansiWhite#383a42
terminal.ansiYellow#e69d00
terminal.background#fafafa
terminal.foreground#383a42
terminalCursor.foreground#383a42
textBlockQuote.background#ececef
textBlockQuote.border#0278aa
textCodeBlock.background#fafafa
textLink.activeForeground#01a6bc
textLink.foreground#0278aa
textPreformat.foreground#0278aa
textSeparator.foreground#f0f
titleBar.activeBackground#fafafa
titleBar.activeForeground#383a42
titleBar.inactiveBackground#ececef
titleBar.inactiveForeground#a0a1a7
tree.indentGuidesStroke#383a42
walkThrough.embeddedEditorBackground#fafafa
welcomePage.background#fafafa
welcomePage.buttonBackground#ececef
welcomePage.buttonHoverBackground#e5e5e5
widget.shadow#fafafa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#a0a1a7	italic
variable, string constant.other.placeholder, entity.name.variable.parameter, entity.name.variable.local, variable.parameter	#c90d45	bold
variable.other.object.property	#0278aa	bold
constant.other.color	#4ea100	—
invalid, invalid.illegal	#c90d45	—
invalid.deprecated	#986801	—
keyword, storage.modifier	#b100ae	—
keyword.control, keyword.control.flow, keyword.control.from, keyword.control.import, keyword.control.as	#b100ae	—
keyword.other.using, keyword.other.namespace, keyword.other.class, keyword.other.new, keyword.other.event, keyword.other.this, keyword.other.await, keyword.other.var, keyword.other.package, keyword.other.import, variable.language.this, storage.type.ts	#b100ae	—
keyword.type, storage.type.primitive	#01a6bc	—
storage.type.function	#0278aa	—
constant.other.color, punctuation, punctuation.section.class.end, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, keyword.other.template, keyword.other.substitution	#383a42	—
punctuation.section.embedded, variable.interpolation	#986801	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#c90d45	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#0278aa	—
meta.block variable.other	#c90d45	—
support.other.variable, string.other.link	#c90d45	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#d75f00	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#4ea100
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#e69d00	—
storage.type, storage.modifier.package, storage.modifier.import	#e69d00	—
entity.name.variable.field	#0278aa	—
support.type	#01a6bc	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#01a6bc	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#c90d45	—
variable.language	#c90d45	italic
entity.name.method.js	#0278aa	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#0278aa	—
entity.other.attribute-name	#0278aa	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#e69d00	italic
entity.other.attribute-name.class	#e69d00	—
source.sass keyword.control	#0278aa	—
markup.inserted	#4ea100	—
markup.deleted	#c90d45	—
markup.changed	#b100ae	—
string.regexp	#01a6bc	—
constant.character.escape	#01a6bc	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#0278aa	italic
source.js constant.other.object.key.js string.unquoted.label.js	#b100ae	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#0278aa	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#0278aa	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#0278aa	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#0278aa	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#0278aa	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#0278aa	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#0278aa	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#0278aa	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#0278aa	—
text.html.markdown, punctuation.definition.list_item.markdown	#383a42	—
text.html.markdown markup.inline.raw.markdown	#b100ae	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#01a6bc	—
text.html.markdown meta.dummy.line-break	#a0a1a7	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#0278aa	—
markup.italic	#c90d45	italic
markup.bold, markup.bold string	#c90d45	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#c90d45	bold
markup.underline	#d75f00	underline
markup.quote punctuation.definition.blockquote.markdown	#01a6bc	—
markup.quote	—	italic
string.other.link.title.markdown	#0278aa	—
string.other.link.description.title.markdown	#b100ae	—
constant.other.reference.link.markdown	#e69d00	—
markup.raw.block	#b100ae	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown	#b100ae	—
variable.language.fenced.markdown	#c90d45	—
meta.separator	#01a6bc	bold
markup.table	#b100ae	—
token.info-token	#0278aa	—
token.warn-token	#e69d00	—
token.error-token	#c90d45	—
token.debug-token	#b100ae	—

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