Uno Due Tre

Name: Uno Due Tre
Author: Sage Fennel

Publisher: Sage FennelThemes in package: 9

A collection of themes with three colors each

Open in VS Code GitHub

Color themes

Uno Due Tre (Sprinkles)

VS Code preview

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

Uno Due Tre — Uno Due Tre (Sprinkles)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

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#ecd1fa1a
activityBar.activeBorder#ecd1fa
activityBar.background#2e1839
activityBar.border#643a78
activityBar.foreground#ecd1fa
activityBar.inactiveForeground#ecd1fa80
activityBarBadge.background#ecd1fa
activityBarBadge.foreground#3a1f47
badge.background#ecd1fa
badge.foreground#3a1f47
breadcrumb.background#3a1f47
button.background#ecd1fa
button.foreground#3a1f47
button.hoverBackground#ecd1faf2
button.secondaryBackground#5cd6c2
button.secondaryForeground#3a1f47
button.secondaryHoverBackground#5cd6c2f2
button.separator#3a1f474d
commandCenter.activeBackground#3a1f47
commandCenter.activeBorder#643a78
commandCenter.background#2e1839
commandCenter.border#643a78
commandCenter.foreground#ecd1fa
commandCenter.inactiveBorder#643a78
commandCenter.inactiveForeground#ecd1fa80
debugToolBar.background#2b1934
dropdown.background#2b1934
dropdown.border#a06eb9
dropdown.foreground#ecd1fa
dropdown.listBackground#2b1934
editor.background#3a1f47
editor.findMatchBackground#e77e2380
editor.findMatchHighlightBackground#f1c40e80
editor.findRangeHighlightBackground#e77e2380
editor.foldBackground#00000000
editor.foreground#ecd1fa
editor.inactiveSelectionBackground#5cd6c24d
editor.lineHighlightBackground#2e1839
editor.rangeHighlightBackground#e77e231a
editor.selectionBackground#5cd6c24d
editor.wordHighlightBackground#3398db40
editor.wordHighlightStrongBackground#9b58b64d
editorBracketHighlight.foreground1#af8e60
editorBracketHighlight.foreground2#c07caf
editorBracketHighlight.foreground3#5c9d9c
editorBracketHighlight.foreground4#af8e60
editorBracketHighlight.foreground5#c07caf
editorBracketHighlight.foreground6#5c9d9c
editorBracketHighlight.unexpectedBracket.foreground#cc0000
editorBracketMatch.background#5cd6c226
editorBracketMatch.border#5cd6c280
editorCursor.foreground#5cd6c2
editorGroup.border#643a78
editorGroup.dropBackground#5cd6c24d
editorGroupHeader.border#643a78
editorGroupHeader.noTabsBackground#2e1839
editorGroupHeader.tabsBackground#2e1839
editorGroupHeader.tabsBorder#643a78
editorIndentGuide.activeBackground#643a78
editorIndentGuide.background#653a7880
editorLineNumber.activeForeground#ecd1fa
editorLineNumber.foreground#ecd1fa4d
editorLink.activeForeground#af8bc1
editorOverviewRuler.border#653a7840
editorRuler.foreground#653a7840
editorWidget.background#2e1839
editorWidget.border#643a78
editorWidget.foreground#ecd1fa
editorWidget.resizeBorder#a06eb9
focusBorder#5cd6c2
foreground#ecd1fa
gitDecoration.conflictingResourceForeground#5fc1db
gitDecoration.deletedResourceForeground#da4735
gitDecoration.ignoredResourceForeground#ecd1fa66
gitDecoration.modifiedResourceForeground#ec8e52
gitDecoration.untrackedResourceForeground#68a3e1
icon.foreground#ecd1fa
input.background#2b1934
input.border#a06eb9
input.placeholderForeground#ecd1fa66
inputOption.activeBorder#ecd1fa
keybindingLabel.background#00000000
keybindingLabel.border#643a78
keybindingLabel.bottomBorder#643a78
keybindingLabel.foreground#ecd1fa
list.activeSelectionBackground#ecd1fa
list.activeSelectionForeground#3a1f47
list.activeSelectionIconForeground#3a1f47
list.dropBackground#5cd6c24d
list.errorForeground#e97e7b
list.focusForeground#ecd1fa
list.focusHighlightForeground#3a1f47
list.highlightForeground#5cd6c2
list.hoverBackground#ecd1fa0d
list.inactiveSelectionBackground#4b285d
list.inactiveSelectionForeground#ecd1fa
list.inactiveSelectionIconForeground#ecd1fa
list.warningForeground#f5ca96
menu.background#3a1f47
menu.foreground#ecd1fa
menu.separatorBackground#653a7880
notificationCenterHeader.background#2e1839
notificationCenterHeader.foreground#ecd1fa
notificationLink.foreground#af8bc1
notifications.background#2e1839
notifications.foreground#ecd1fa
notificationToast.border#643a78
panel.background#3a1f47
panel.border#643a78
panelSection.border#643a78
panelSectionHeader.border#643a78
panelTitle.activeBorder#ecd1fa80
panelTitle.activeForeground#ecd1fa
panelTitle.inactiveForeground#ecd1fa99
peekViewEditor.matchHighlightBackground#f1c40e80
peekViewResult.matchHighlightBackground#f1c40e80
pickerGroup.border#653a7880
progressBar.background#ecd1fa
quickInput.background#3a1f47
quickInputList.focusBackground#ecd1fa
quickInputList.focusForeground#3a1f47
quickInputList.focusIconForeground#3a1f47
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#ecd1fab3
scrollbarSlider.background#ecd1fa4d
scrollbarSlider.hoverBackground#ecd1fa99
sideBar.background#2e1839
sideBar.border#643a78
sideBar.dropBackground#5cd6c24d
sideBarSectionHeader.background#2e1839
sideBarSectionHeader.border#643a78
statusBar.background#2e1839
statusBar.border#643a78
statusBar.debuggingBackground#2e1839
statusBar.foreground#ecd1fa
statusBar.noFolderBackground#2e1839
statusBarItem.activeBackground#ecd1fa33
statusBarItem.hoverBackground#ecd1fa1a
statusBarItem.prominentBackground#ecd1fa4d
tab.activeBackground#4b285d
tab.activeBorder#a06eb9
tab.activeForeground#ecd1fa
tab.border#2e1839
tab.inactiveBackground#2e1839
tab.inactiveForeground#ecd1facc
tab.unfocusedActiveBorder#a06eb9
terminal.ansiBlack#333333
terminal.ansiBlue#af9df1
terminal.ansiBrightBlack#333333
terminal.ansiBrightBlue#af9df1
terminal.ansiBrightCyan#89e5ec
terminal.ansiBrightGreen#8cde9f
terminal.ansiBrightMagenta#ef9fe5
terminal.ansiBrightRed#ed7d81
terminal.ansiBrightWhite#f1ebf4
terminal.ansiBrightYellow#f0c2a3
terminal.ansiCyan#89e5ec
terminal.ansiGreen#8cde9f
terminal.ansiMagenta#ef9fe5
terminal.ansiRed#ed7d81
terminal.ansiWhite#f1ebf4
terminal.ansiYellow#f0c2a3
terminal.background#3a1f47
terminal.foreground#ecd1fa
titleBar.activeBackground#2e1839
titleBar.activeForeground#ecd1fa
titleBar.border#643a78
titleBar.inactiveBackground#2e1839
titleBar.inactiveForeground#ecd1fab3
toolbar.activeBackground#ecd1fa26
toolbar.hoverBackground#ecd1fa0d
tree.indentGuidesStroke#653a7880
widget.shadow#1f112780

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.diff.header.git, meta.diff.index, meta.diff.range, punctuation.definition.range.diff	#ecd1fa	bold
punctuation.definition.deleted.diff, markup.deleted.diff, meta.diff.header.from-file, punctuation.definition.from-file.diff	#ff5757	bold
punctuation.definition.inserted.diff, markup.inserted.diff, meta.diff.header.to-file, punctuation.definition.to-file.diff	#00bdd6	bold
source.diff	#af8bc1
meta.function-call entity.name.function, source.go entity.name.function, meta.property-name.css	#ecd1fa
keyword.operator, storage.type.function.arrow	#e4c567
string, punctuation.definition.string, support.constant.property-value	#5cd6c2
markup.raw.inline, markup.inline, punctuation.definition.markdown, support.type.property-name.json, meta.object-literal.key, meta.property-name, variable.interpolation, support.class.component, entity.name.tag, meta.decorator, entity.name.function.decorator, punctuation.definition.character-class, keyword.control.anchor.regexp	#e4c567
comment, punctuation.definition.comment	#af8bc1
constant.character.escape, punctuation.definition.template-expression, punctuation.definition, punctuation.parenthesis, keyword.operator.type.annotation, punctuation.terminator, punctuation.accessor, keyword.generator.asterisk, punctuation.other.comma, punctuation.separator, punctuation.section, meta.brace, meta.delimiter, meta.separator	#af8bc1
keyword.control, keyword.import, keyword.function, keyword.package, keyword.interface, keyword.map, keyword.var, keyword.other, keyword.type, storage	#e4c567	bold
markup.bold, punctuation.definition.bold, meta.selector entity.other.attribute-name.id, meta.selector entity.other.attribute-name.class	#e4c567	bold
markup.italic	#e4c567	italic
constant.other.symbol, constant.numeric, constant.language.boolean, constant, support.constant, variable.language, variable.argument.css, entity.other.attribute-name, entity.other.attribute-name.id, meta.link, markup.underline.link, string.other.link, markup.quote	#f28cd0
meta.definition.variable variable, variable.parameter.function, variable.declaration, variable.parameter, variable.other.assignment, support.function.builtin.shell, beginning.punctuation.definition.list, constant.other.color	#f28cd0
markup.heading punctuation.definition.heading, entity.name.section, source.go entity.name.function, meta.definition entity.name.function, meta.function entity.name.function, meta.require, entity.name.class, entity.name.type.class, entity.name.type.module, entity.other.inherited-class	#f28cd0	bold
meta.embedded	#ecd1fa
invalid.broken, invalid.deprecated, invalid.unimplemented	#cc0000	bold

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