Piattro

Name: Piattro
Author: Flo Edelmann

Publisher: Flo EdelmannThemes in package: 1

A colorful, nice to read, light color theme for VS Code!

VS Code preview

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

Piattro — Piattro

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.background#2f3138
activityBar.foreground#e2e4e7
activityBarBadge.background#41a6d9
activityBarBadge.foreground#fafafa
badge.background#aaa
badge.foreground#fff
button.background#ff6a00AA
button.foreground#fff
button.hoverBackground#ff6a00BB
debugExceptionWidget.background#ffffff
debugExceptionWidget.border#e2e4e7
debugToolBar.background#ffffff
diffEditor.insertedTextBackground#4dbf9944
diffEditor.removedTextBackground#f0717844
dropdown.background#ffffff
editor.background#fafafa
editor.findMatchBackground#FFE610
editor.findMatchHighlightBackground#dd08
editor.findRangeHighlightBackground#dd03
editor.foreground#505050
editor.lineHighlightBackground#00A6FF17
editor.rangeHighlightBackground#f2f2f2
editor.selectionBackground#00A6FF50
editor.wordHighlightBackground#ff6a002a
editor.wordHighlightStrongBackground#ff6a0033
editorBracketMatch.border#d9d8d7
editorCursor.foreground#ff6a00
editorError.foreground#ff3333
editorGroup.border#e2e4e7
editorGroup.emptyBackground#ffffff
editorGroupHeader.noTabsBackground#fafafa
editorGroupHeader.tabsBackground#fafafa
editorGroupHeader.tabsBorder#e2e4e7
editorGutter.addedBackground#86b300
editorGutter.deletedBackground#ff3333
editorGutter.modifiedBackground#41a6d9
editorHoverWidget.background#ffffff
editorHoverWidget.border#e2e4e7
editorIndentGuide.background#d9d8d7
editorLineNumber.foreground#d9d8d7
editorLink.activeForeground#ff6a00
editorMarkerNavigation.background#ffffff
editorOverviewRuler.border#e2e4e7
editorOverviewRuler.errorForeground#ff3333
editorOverviewRuler.infoForeground#00aa00
editorRuler.foreground#e2e4e7
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#e2e4e7
editorSuggestWidget.highlightForeground#ff6a00
editorSuggestWidget.selectedBackground#f5f5f5
editorWarning.foreground#f29718
editorWhitespace.foreground#d9d8d7
editorWidget.background#ffffff
extensionButton.prominentBackground#ff6a00AA
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#ff6a00BB
focusBorder#e2e4e7
foreground#828c99
input.background#ffffff
input.border#ffffff
input.foreground#5c6773
input.placeholderForeground#828c99
inputOption.activeBorder#41a6d9
inputValidation.errorBackground#fafafa
inputValidation.errorBorder#ff3333
inputValidation.infoBackground#fafafa
inputValidation.infoBorder#41a6d9
inputValidation.warningBackground#fafafa
inputValidation.warningBorder#f29718
list.activeSelectionBackground#e2e4e7
list.activeSelectionForeground#5c6773
list.focusBackground#f5f5f5
list.focusForeground#5c6773
list.highlightForeground#ff6a00
list.hoverBackground#f5f5f5
list.hoverForeground#5c6773
list.inactiveSelectionBackground#e2e4e7
list.inactiveSelectionForeground#5c6773
panel.background#fafafa
panel.border#e2e4e7
panelTitle.inactiveForeground#828c99
peekView.border#e2e4e7
peekViewEditor.background#ffffff
peekViewEditor.matchHighlightBackground#ff6a0033
peekViewResult.background#ffffff
peekViewResult.fileForeground#828c99
peekViewResult.matchHighlightBackground#ff6a0033
peekViewTitle.background#ffffff
peekViewTitleDescription.foreground#828c99
peekViewTitleLabel.foreground#828c99
pickerGroup.border#e2e4e7
pickerGroup.foreground#ff6a00
progressBar.background#ff6a00
sash.hoverBorder#ff741050
scrollbar.shadow#a0a0a011
scrollbarSlider.activeBackground#00000066
scrollbarSlider.background#0000001f
scrollbarSlider.hoverBackground#00000044
selection.background#00A6FF50
sideBar.background#fafafa
sideBar.border#e2e4e7
sideBarSectionHeader.background#f2f2f2
sideBarSectionHeader.foreground#828c99
sideBarTitle.foreground#828c99
statusBar.background#2f3138
statusBar.debuggingBackground#41a6d9
statusBar.debuggingForeground#fafafa
statusBar.foreground#fafafa
statusBar.noFolderBackground#aaa
statusBarItem.activeBackground#888
statusBarItem.hoverBackground#555
statusBarItem.prominentBackground#77cc00
statusBarItem.prominentHoverBackground#ad0
tab.activeBackground#ffffff
tab.activeForeground#5c6773
tab.border#e2e4e7
tab.inactiveBackground#eeeeee
tab.inactiveForeground#828c99
tab.unfocusedActiveForeground#5c6773AA
tab.unfocusedInactiveForeground#828c99
terminal.ansiBlack#000000
terminal.ansiBlue#41a6d9
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#6871ff
terminal.ansiBrightCyan#57d9ad
terminal.ansiBrightGreen#a3d900
terminal.ansiBrightMagenta#a37acc
terminal.ansiBrightRed#d6656a
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#e7c547
terminal.ansiCyan#4dbf99
terminal.ansiGreen#77cc00
terminal.ansiMagenta#9966cc
terminal.ansiRed#f2590c
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#f29718
terminal.background#1f2226
terminal.foreground#eff0f1
textBlockQuote.background#ffffff
textLink.activeForeground#ff6a00
textLink.foreground#ff6a00
textPreformat.foreground#5c6773
titleBar.activeBackground#ffffff
titleBar.activeForeground#828c99
titleBar.inactiveBackground#ffffff
titleBar.inactiveForeground#828c99
walkThrough.embeddedEditorBackground#ffffff
widget.shadow#a0a0a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#5c6773ff	—
comment, punctuation.definition.comment	#ABB0B6	—
variable	#5C6773	—
keyword, storage.type, storage.modifier	#F2590C	—
constant.other.color, meta.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.substitution	#E7C547	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#41A6D9	—
entity.name.function, keyword.other.special-method, variable.function, meta.block-level	#F29718	—
support.other.variable, string.other.link	#F07178	—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit	#A37ACC	—
string, keyword.other.template, 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	#86B300	normal
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter	#41A6D9	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#41A6D9	—
variable.language	#41A6D9	italic
invalid	#FF3333	—
invalid.deprecated	#FFFFFF	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#41A6D990	—
entity.other.attribute-name	#F2590C	—
markup.inserted	#86B300	—
markup.deleted	#41A6D9	—
markup.changed	#F2590C	—
string.regexp, constant.character.escape	#4DBF99	—
url, link, uri	—	underline
constant.numeric.line-number.find-in-files - match	#ABB0B6	—
entity.name.filename.find-in-files	#86B300	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#CCA37A	italic
source.js constant.other.object.key.js string.unquoted.label.js	#41A6D9	italic
entity.name.method.js	#CCA37A	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#CCA37A	—
markup.italic	#F07178	italic
markup.bold	#F07178	bold
markup.underline	#A37ACC	underline
markup.strike	#CCA37A	strike
markup.quote	#E7C547	italic
markup.raw.block	#F2590C	—
markup.table	#41A6D9	—
text.html.markdown, punctuation.definition.list_item.markdown	#5C6773	—
text.html.markdown markup.raw.inline	#41A6D9	—
text.html.markdown meta.dummy.line-break	#ABB0B6	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#86B300	—
markup.quote, punctuation.definition.blockquote.markdown	#E7C547	italic
string.other.link.title.markdown	#CCA37A	underline
markup.raw.block.fenced.markdown	#5C6773	—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown	#ABB0B6	—
variable.language.fenced.markdown	#ABB0B6
meta.separator	#ABB0B6	bold
markup.inline.raw.string.markdown	#f29750	—
punctuation.definition.list.begin.markdown	#41A6D9	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
acejump.label.blue	#FFFFFF	—
acejump.label.green	#FFFFFF	—
acejump.label.orange	#FFFFFF	—
acejump.label.purple	#FFFFFF	—
sublimelinter.mark.warning	#41A6D9	—
sublimelinter.gutter-mark	#FFFFFF	—
sublimelinter.mark.error	#FF3333	—
markup.ignored.git_gutter	#ABB0B6	—
markup.untracked.git_gutter	#ABB0B6	—
gutter_color	#FFFFFF	—
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}!`;
}