Lucario Theme

Name: Lucario Theme
Author: Víctor González Prieto

Publisher: Víctor González PrietoThemes in package: 1

Darkish theme for the 80% use case.

Open in VS Code GitHub

VS Code preview

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

Lucario Theme — Lucario

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.activeBackground#19242f
activityBar.activeBorder#5c98cd
activityBar.background#141c25
activityBar.border#0f161c
activityBar.dropBorder#5c98cd
activityBar.foreground#d5dbe2
activityBar.inactiveForeground#99a8b899
activityBarBadge.background#5c98cd
activityBarBadge.foreground#141c25
breadcrumb.activeSelectionForeground#fff
breadcrumb.focusForeground#d5dbe2
breadcrumb.foreground#99a8b8
breadcrumbPicker.background#243343
disabledForeground#99a8b8b0
dropdown.background#19242f
dropdown.border#0f161c
dropdown.foreground#99a8b8
dropdown.listBackground#19242f
editor.background#2b3e50
editor.findMatchBackground#f8f8f250
editor.findMatchHighlightBackground#19242f80
editor.findMatchHighlightBorder#f8f8f280
editor.findRangeHighlightBackground#f8f8f208
editor.foreground#f8f8f2
editor.lineHighlightBackground#243443
editor.selectionBackground#19242f
editorBracketHighlight.foreground1#f8f8f2
editorBracketHighlight.foreground2#66d9ef
editorBracketHighlight.foreground3#e6db74
editorBracketHighlight.foreground4#ca94ff
editorBracketHighlight.foreground5#72c05d
editorBracketHighlight.foreground6#ffab28
editorBracketHighlight.unexpectedBracket.foreground#f92672
editorCursor.foreground#f8f8f2
editorError.foreground#f92672
editorGroup.border#66d9ef
editorGroupHeader.tabsBackground#141c25
editorGroupHeader.tabsBorder#0f161c
editorGutter.addedBackground#a6e22e
editorGutter.deletedBackground#f92672
editorGutter.foldingControlForeground#f8f8f2
editorGutter.modifiedBackground#f0cc04
editorHoverWidget.background#243343
editorHoverWidget.border#5c98cd
editorHoverWidget.foreground#d5dbe2
editorIndentGuide.activeBackground1#666666
editorIndentGuide.background1#66666664
editorLineNumber.activeForeground#f8f8f2
editorLineNumber.foreground#f8f8f280
editorOverviewRuler.findMatchForeground#19242fc0
editorRuler.foreground#66666664
editorSuggestWidget.border#0f161c
editorSuggestWidget.focusHighlightForeground#d5dbe2
editorSuggestWidget.foreground#99a8b8
editorSuggestWidget.highlightForeground#99a8b8
editorSuggestWidget.selectedForeground#d5dbe2
editorSuggestWidgetStatus.foreground#99a8b899
editorWarning.foreground#f0cc04
editorWhitespace.foreground#666666
editorWidget.background#19242f
editorWidget.foreground#99a8b8
errorForeground#f92672
focusBorder#5c98cdc0
foreground#f8f8f2
gitDecoration.ignoredResourceForeground#99a8b899
input.background#243343
input.foreground#d5dbe2
input.placeholderForeground#99a8b8b0
menu.separatorBackground#99a8b850
panel.background#243343
panel.border#66d9ef
panelSectionHeader.background#243343
panelSectionHeader.border#66d9ef
panelSectionHeader.foreground#99a8b8
panelTitle.activeForeground#d5dbe2
panelTitle.inactiveForeground#99a8b8
profileBadge.background#243343
profileBadge.foreground#99a8b8
scrollbar.shadow#243343
scrollbarSlider.activeBackground#f8f8f248
scrollbarSlider.background#f8f8f216
scrollbarSlider.hoverBackground#f8f8f232
searchEditor.findMatchBackground#19242fa0
selection.background#19242f
sideBar.background#141c25
sideBar.border#0f161c
sideBar.foreground#99a8b8
sideBarSectionHeader.background#19242f
sideBarSectionHeader.border#0f161c
statusBar.background#141c25
statusBar.border#0f161c
statusBar.debuggingBackground#ffab28a8
statusBar.debuggingBorder#f000
statusBar.debuggingForeground#000
statusBar.focusBorder#5c98cd
statusBar.foreground#99a8b8
statusBar.noFolderBackground#ca94ffa0
statusBar.noFolderBorder#f000
statusBar.noFolderForeground#000
statusBarItem.activeBackground#19242f
statusBarItem.hoverBackground#1e2c39
statusBarItem.remoteBackground#141c25
statusBarItem.remoteForeground#99a8b8
tab.activeBackground#19242f
tab.activeBorderTop#65a6df
tab.activeForeground#d5dbe2
tab.border#0f161c
tab.inactiveBackground#141c25
tab.inactiveForeground#99a8b8
tab.unfocusedActiveForeground#99a8b899
tab.unfocusedInactiveForeground#99a8b899
terminal.ansiBlack#243343
terminal.ansiBlue#5796ed
terminal.ansiBrightBlack#2f3943
terminal.ansiBrightBlue#6b9fed
terminal.ansiBrightCyan#b9ecfd
terminal.ansiBrightGreen#72cc5a
terminal.ansiBrightMagenta#d4a9ff
terminal.ansiBrightRed#ff6541
terminal.ansiBrightWhite#f8f8f2
terminal.ansiBrightYellow#ffffa5
terminal.ansiCyan#8be0fd
terminal.ansiGreen#199c4b
terminal.ansiMagenta#ca94ff
terminal.ansiRed#e94b35
terminal.ansiWhite#dfdfd9
terminal.ansiYellow#f0cc04
terminal.background#243343
terminal.foreground#f8f8f2
textBlockQuote.background#344a5ec0
textBlockQuote.border#ca94ff80
textLink.activeForeground#66d9ef
textLink.foreground#66d9ef
textPreformat.foreground#ffab28
titleBar.activeBackground#141c25
titleBar.activeForeground#99a8b8
titleBar.border#0f161c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#5c98cd	—
string	#e6db74	—
constant.numeric	#ca94ff	—
constant.language	#ca94ff	—
constant.character, constant.other	#ca94ff	—
constant	#ca94ff	—
variable.other.readwrite.instance	#ffab28	—
constant.character.escaped, constant.character.escape, string.source, string.source.ruby	#ca94ff	—
keyword	#ff6541	—
storage	#ff6541
storage.type	#66d9ef	—
entity.name.class	#72c05d	underline
entity.other.inherited-class	#72c05d	underline
entity.name.function	#72c05d
variable.parameter	#ffab28	italic
entity.name.tag	#ff6541	—
punctuation.definition.tag.xml	#f8f8f280	—
entity.other.attribute-name, markup.heading	#72c05d
support.function	#66d9ef
support.constant	#66d9ef
support.type, support.class	#66d9ef	—
support.other.variable, variable.unordered, variable.ordered	#ffab28
invalid	#f8f8f0
invalid.deprecated	#f8f8f0	—
meta.diff, meta.diff.header	#75715e	—
markup.deleted	#f92672	—
markup.inserted	#a6e22e	—
markup.changed	#f0cc04	—
markup.bold, markup.italic	#ff6541	—
markup.raw	#66d9ef	—
markup.heading.markdown	—	bold
markup.bold.markdown	—	bold
markup.italic.markdown	—	italic
punctuation.definition.raw.markdown, markup.inline.raw.string.markdown	#ffab28	—
markup.fenced_code.block.markdown punctuation.definition.markdown, punctuation.definition.quote.begin.markdown, meta.separator.markdown	#ca94ff	—
text.html.markdown fenced_code.block.language	#ca94ff	—
markup.quote.markdown meta.paragraph.markdown	#f8f8f2c0	—
punctuation.definition.strikethrough.markdown	#ff6541	—
markup.strikethrough.markdown	#f8f8f280	—
text.html.markdown string.other.link, text.html.markdown punctuation.definition.link	#e6db74	—
text.html.markdown markup.underline.link, punctuation.definition.metadata.markdown	#66d9ef90	—
meta.link.inet.markdown markup.underline.link.markdown, meta.link.inet.markdown punctuation.definition.link.markdown	#66d9ef	—
text.html.markdown punctuation.definition.list.begin	#ca94ff	—
text.html.markdown constant.character.entity.named	#ca94ff	—
punctuation.definition.tag.xml.plist, constant.name.xml	#f8f8f2	—
entity.name.tag.yaml	#66d9ef	—
entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml	#f8f8f2	—
variable.other.alias.yaml, punctuation.definition.alias.yaml	#ffab28	—
source.yaml punctuation.definition.string	#f8f8f2	—
storage.type.tag-handle.yaml	#ff6541	—
punctuation.definition.directive.begin.yaml, meta.directive.yaml keyword.other.directive, meta.directive.yaml constant.numeric, meta.directive.yaml storage.type, meta.directive.yaml support.type	#72c05d	—
source.yaml keyword.control.flow.block-scalar, storage.modifier.chomping-indicator.yaml	#f8f8f2	—
variable.other.block.ruby	#ffab28	—

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