Macchiato

Name: Macchiato
Author: geek-tics

Publisher: geek-ticsThemes in package: 2

Un tema cálido inspirado en el café para desarrolladores.

GitHub

Color themes

VS Code preview

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

Macchiato — Light Macchiato

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#A88060
activityBar.background#C8B89A
activityBar.border#B8A88A
activityBar.foreground#3D2008
activityBar.inactiveForeground#7A5C3A
activityBarBadge.background#C68A48
activityBarBadge.foreground#FFFFFF
badge.background#C68A48
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#552E10
breadcrumb.background#F5F0E8
breadcrumb.focusForeground#3D2008
breadcrumb.foreground#B8A88A
breadcrumbPicker.background#EDE8DC
button.background#552E10
button.border#3D2008
button.foreground#FFFFFF
button.hoverBackground#C68A48
button.secondaryBackground#D9CABC
button.secondaryForeground#3D2008
button.secondaryHoverBackground#C8B89A
debugToolBar.background#EDE8DC
debugToolBar.border#C8B89A
dropdown.background#FFFFFF
dropdown.border#C8B89A
dropdown.foreground#2C1A0A
editor.background#F5F0E8
editor.findMatchBackground#C68A4860
editor.findMatchHighlightBackground#C68A4830
editor.focusedStackFrameHighlightBackground#2E7D4F20
editor.foreground#2C1A0A
editor.inactiveSelectionBackground#C68A4830
editor.lineHighlightBackground#EDE8DC
editor.lineHighlightBorder#D9CABC
editor.rangeHighlightBackground#C68A4820
editor.selectionBackground#C68A4840
editor.selectionHighlightBackground#C68A4825
editor.stackFrameHighlightBackground#C68A4820
editor.wordHighlightBackground#8B5E0A20
editor.wordHighlightStrongBackground#8B5E0A35
editorBracketHighlight.foreground1#5C3A1A
editorBracketHighlight.foreground2#8B5E0A
editorBracketHighlight.foreground3#C0395A
editorBracketHighlight.foreground4#2E7D4F
editorBracketHighlight.foreground5#1A5C8A
editorBracketHighlight.foreground6#6B3FA0
editorBracketHighlight.unexpectedBracket.foreground#C0392B
editorBracketMatch.background#C68A4830
editorBracketMatch.border#C68A48
editorCursor.foreground#552E10
editorError.foreground#C0392B
editorGroup.border#C8B89A
editorGroupHeader.noTabsBackground#D9CABC
editorGroupHeader.tabsBackground#D9CABC
editorGutter.addedBackground#2E7D4F
editorGutter.background#F5F0E8
editorGutter.deletedBackground#C0392B
editorGutter.modifiedBackground#8B5E0A
editorHint.foreground#2E7D4F
editorHoverWidget.background#EDE8DC
editorHoverWidget.border#C8B89A
editorIndentGuide.activeBackground1#B8A88A
editorIndentGuide.background1#D9CABC
editorInfo.foreground#1A5C8A
editorLineNumber.activeForeground#552E10
editorLineNumber.foreground#B8A88A
editorRuler.foreground#D9CABC
editorSuggestWidget.background#EDE8DC
editorSuggestWidget.border#C8B89A
editorSuggestWidget.foreground#2C1A0A
editorSuggestWidget.highlightForeground#552E10
editorSuggestWidget.selectedBackground#C68A48
editorWarning.foreground#8B5E0A
editorWhitespace.foreground#D9CABC
editorWidget.background#EDE8DC
editorWidget.border#C8B89A
extensionBadge.remoteBackground#A88060
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#C68A48
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#8B5E0A
gitDecoration.addedResourceForeground#2E7D4F
gitDecoration.conflictingResourceForeground#6B3FA0
gitDecoration.deletedResourceForeground#C0392B
gitDecoration.ignoredResourceForeground#B8A88A
gitDecoration.modifiedResourceForeground#8B5E0A
gitDecoration.untrackedResourceForeground#1A5C8A
input.background#FFFFFF
input.border#C8B89A
input.foreground#2C1A0A
input.placeholderForeground#B8A88A
inputOption.activeBackground#C68A48
inputOption.activeForeground#FFFFFF
inputValidation.errorBackground#C0392B15
inputValidation.errorBorder#C0392B
inputValidation.infoBackground#1A5C8A15
inputValidation.infoBorder#1A5C8A
inputValidation.warningBackground#8B5E0A15
inputValidation.warningBorder#8B5E0A
list.activeSelectionBackground#C68A48
list.activeSelectionForeground#FFFFFF
list.errorForeground#C0392B
list.focusForeground#3D2008
list.focusOutline#C68A48
list.highlightForeground#552E10
list.hoverBackground#D9CABC
list.hoverForeground#3D2008
list.inactiveSelectionBackground#D9CABC
list.inactiveSelectionForeground#3D2008
list.warningForeground#8B5E0A
menu.background#EDE8DC
menu.foreground#3D2008
menu.selectionBackground#C68A48
menu.selectionForeground#FFFFFF
menu.separatorBackground#C8B89A
menubar.selectionBackground#D9CABC
menubar.selectionForeground#3D2008
minimap.background#EDE8DC
minimap.errorHighlight#C0392B
minimap.selectionHighlight#C68A4850
minimap.warningHighlight#8B5E0A
minimapGutter.addedBackground#2E7D4F
minimapGutter.deletedBackground#C0392B
minimapGutter.modifiedBackground#8B5E0A
notificationCenterHeader.background#D9CABC
notificationCenterHeader.foreground#552E10
notificationLink.foreground#1A5C8A
notifications.background#EDE8DC
notifications.border#C8B89A
notifications.foreground#2C1A0A
notificationsErrorIcon.foreground#C0392B
notificationsInfoIcon.foreground#1A5C8A
notificationsWarningIcon.foreground#8B5E0A
panel.background#EDE8DC
panel.border#C8B89A
panelTitle.activeBorder#C68A48
panelTitle.activeForeground#2C1A0A
panelTitle.inactiveForeground#B8A88A
peekView.border#C68A48
peekViewEditor.background#F5F0E8
peekViewEditor.matchHighlightBackground#C68A4840
peekViewResult.background#EDE8DC
peekViewResult.fileForeground#2C1A0A
peekViewResult.lineForeground#7A5C3A
peekViewResult.matchHighlightBackground#C68A4840
peekViewResult.selectionBackground#C68A48
peekViewResult.selectionForeground#FFFFFF
peekViewTitle.background#D9CABC
peekViewTitleDescription.foreground#7A5C3A
peekViewTitleLabel.foreground#2C1A0A
pickerGroup.border#C8B89A
pickerGroup.foreground#552E10
quickInput.background#EDE8DC
quickInput.foreground#2C1A0A
quickInputHighlight.background#C68A4840
quickInputTitle.background#D9CABC
scrollbar.shadow#00000020
scrollbarSlider.activeBackground#C68A4860
scrollbarSlider.background#C8B89A60
scrollbarSlider.hoverBackground#C8B89A90
settings.checkboxBackground#FFFFFF
settings.checkboxForeground#2C1A0A
settings.dropdownBackground#FFFFFF
settings.dropdownForeground#2C1A0A
settings.headerForeground#552E10
settings.modifiedItemIndicator#C68A48
settings.numberInputBackground#FFFFFF
settings.numberInputForeground#2C1A0A
settings.textInputBackground#FFFFFF
settings.textInputForeground#2C1A0A
sideBar.background#EDE8DC
sideBar.border#C8B89A
sideBar.foreground#3D2008
sideBarSectionHeader.background#D9CABC
sideBarSectionHeader.foreground#552E10
sideBarTitle.foreground#552E10
statusBar.background#8B5E0A
statusBar.border#6B4508
statusBar.debuggingBackground#C68A48
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFF0D8
statusBar.noFolderBackground#6B4508
statusBarItem.activeBackground#C68A48
statusBarItem.errorBackground#C0392B
statusBarItem.errorForeground#FFFFFF
statusBarItem.hoverBackground#C68A48
statusBarItem.hoverForeground#FFFFFF
statusBarItem.remoteBackground#A88060
statusBarItem.remoteForeground#FFFFFF
statusBarItem.warningBackground#8B5E0A
statusBarItem.warningForeground#FFFFFF
tab.activeBackground#F5F0E8
tab.activeBorder#C68A48
tab.activeForeground#2C1A0A
tab.border#D9CABC
tab.hoverBackground#D9CABC
tab.hoverForeground#3D2008
tab.inactiveBackground#EDE8DC
tab.inactiveForeground#7A5C3A
tab.unfocusedActiveBackground#EDE8DC
tab.unfocusedActiveForeground#552E10
tab.unfocusedInactiveForeground#B8A88A
terminal.ansiBlack#2C1A0A
terminal.ansiBlue#1A5C8A
terminal.ansiBrightBlack#B8A88A
terminal.ansiBrightBlue#2980B9
terminal.ansiBrightCyan#16A085
terminal.ansiBrightGreen#27AE60
terminal.ansiBrightMagenta#8E44AD
terminal.ansiBrightRed#E74C3C
terminal.ansiBrightWhite#3D2008
terminal.ansiBrightYellow#C68A48
terminal.ansiCyan#1A7A7A
terminal.ansiGreen#2E7D4F
terminal.ansiMagenta#6B3FA0
terminal.ansiRed#C0392B
terminal.ansiWhite#7A5C3A
terminal.ansiYellow#8B5E0A
terminal.background#F5F0E8
terminal.border#D9CABC
terminal.foreground#2C1A0A
terminalCursor.background#F5F0E8
terminalCursor.foreground#552E10
textBlockQuote.background#EDE8DC
textBlockQuote.border#C68A48
textCodeBlock.background#EDE8DC
textLink.activeForeground#C68A48
textLink.foreground#1A5C8A
textPreformat.foreground#2E7D4F
titleBar.activeBackground#C8B89A
titleBar.activeForeground#3D2008
titleBar.border#B8A88A
titleBar.inactiveBackground#D9CABC
titleBar.inactiveForeground#7A5C3A
walkThrough.embeddedEditorBackground#EDE8DC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text	#2C1A0A	—
comment, punctuation.definition.comment	#A0845C	bold
punctuation, punctuation.definition, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.parameters, punctuation.definition.comment, punctuation.separator, punctuation.separator.continuation, punctuation.separator.inheritance, punctuation.separator.namespace, punctuation.separator.class, punctuation.separator.method, punctuation.separator.parameter, punctuation.separator.array, punctuation.separator.key-value, punctuation.section, punctuation.section.embedded, punctuation.accessor, punctuation.terminator, keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.relational, keyword.operator.type, keyword.operator.new, keyword.operator.expression, keyword.operator.spread, keyword.operator.optional, keyword.operator.ternary, keyword.operator.nullish, keyword.operator.pipe, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.void, keyword.operator.delete, keyword.operator.in, keyword.operator.of, keyword.operator.class, keyword.operator.rust, keyword.operator.arrow, keyword.operator.range, keyword.operator.channel, storage.type.function.arrow, meta.tag punctuation.definition.tag	#C0607A	—
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	#2E7D4F	—
meta.tag.sgml, markup.deleted.git_gutter	#8B3A8B	—
entity.name.tag	#1A5C8A	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#6B3FA0	italic
source.sass keyword.control	#1A5C8A	—
entity.other.attribute-name.class	#6B3FA0	—
entity.other.attribute-name	#6B3FA0	—
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	#8B3A8B	—
support.type	#8B5E0A	—
variable, string constant.other.placeholder	#1A5C8A	—
meta.block variable.other	#1A5C8A	—
support.other.variable, string.other.link	#1A5C8A	—
constant.other.color	#6B3FA0	—
keyword, storage.type, storage.modifier	#1A5C8A	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#6B3FA0	—
variable.language	#8B5E0A	italic
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#6B3FA0	—
entity.name.method.js	#2E7D4F	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#2C1A0A	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#2E7D4F	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#8B5E0A	italic
string.regexp	#8B3A8B	—
constant.character.escape	#C0607A	—
url, link, uri	—	underline
markup.inserted	#1A5C8A	—
markup.changed	#6B3FA0	—
markup.deleted	#C0392B	—
invalid, invalid.illegal	#C0392B	—
source.js constant.other.object.key.js string.unquoted.label.js	#C0607A	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#1A5C8A	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#6B3FA0	—
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	#2E7D4F	—
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	#8B3A8B	—
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	#8B5E0A	—
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	#552E10	—
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	#C68A48	—
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	#1A7A7A	—
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	#C0392B	—
markup.heading.markdown punctuation.definition.heading.markdown	#C0607A	—
markdown.heading, markup.heading \| markup.heading entity.name	#1A5C8A	bold
markup.bold, markup.bold string	#1A5C8A	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	#8B5E0A	bold
markup.italic	#2E7D4F	italic
text.html.markdown, punctuation.definition.list_item.markdown	#2C1A0A	—
text.html.markdown markup.inline.raw.markdown	#2E7D4F	—
markup.underline	#C0607A	underline
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#C0607A	—
markup.quote punctuation.definition.blockquote.markdown	#C0607A	—
markup.quote	—	italic
string.other.link.description.title.markdown	#C68A48	—
string.other.link.title.markdown	#1A5C8A	—
constant.other.reference.link.markdown	#8B5E0A	—
markup.raw.block	#C0607A	—
meta.separator	#C0607A	bold
markup.table	#2C1A0A	—

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