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

VS Code preview

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

Uno Due Tre — Uno Due Tre (Ocean)

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#d1dffa1a
activityBar.activeBorder#d1dffa
activityBar.background#16233b
activityBar.border#314c81
activityBar.foreground#d1dffa
activityBar.inactiveForeground#d1dffa80
activityBarBadge.background#d1dffa
activityBarBadge.foreground#1c2b4a
badge.background#d1dffa
badge.foreground#1c2b4a
breadcrumb.background#1c2b4a
button.background#d1dffa
button.foreground#1c2b4a
button.hoverBackground#d1dffaf2
button.secondaryBackground#eda65e
button.secondaryForeground#1c2b4a
button.secondaryHoverBackground#eda65ef2
button.separator#1c2b4a4d
commandCenter.activeBackground#1c2b4a
commandCenter.activeBorder#314c81
commandCenter.background#16233b
commandCenter.border#314c81
commandCenter.foreground#d1dffa
commandCenter.inactiveBorder#314c81
commandCenter.inactiveForeground#d1dffa80
debugToolBar.background#152137
dropdown.background#152137
dropdown.border#6484c4
dropdown.foreground#d1dffa
dropdown.listBackground#152137
editor.background#1c2b4a
editor.findMatchBackground#e77e2380
editor.findMatchHighlightBackground#f1c40e80
editor.findRangeHighlightBackground#e77e2380
editor.foldBackground#00000000
editor.foreground#d1dffa
editor.inactiveSelectionBackground#eda65e4d
editor.lineHighlightBackground#16233b
editor.rangeHighlightBackground#e77e231a
editor.selectionBackground#eda65e4d
editor.wordHighlightBackground#3398db40
editor.wordHighlightStrongBackground#9b58b64d
editorBracketHighlight.foreground1#38a38a
editorBracketHighlight.foreground2#5d9ac0
editorBracketHighlight.foreground3#b78b6c
editorBracketHighlight.foreground4#38a38a
editorBracketHighlight.foreground5#5d9ac0
editorBracketHighlight.foreground6#b78b6c
editorBracketHighlight.unexpectedBracket.foreground#cc0000
editorBracketMatch.background#eda65e26
editorBracketMatch.border#eda65e80
editorCursor.foreground#eda65e
editorGroup.border#314c81
editorGroup.dropBackground#eda65e4d
editorGroupHeader.border#314c81
editorGroupHeader.noTabsBackground#16233b
editorGroupHeader.tabsBackground#16233b
editorGroupHeader.tabsBorder#314c81
editorIndentGuide.activeBackground#314c81
editorIndentGuide.background#314c8180
editorLineNumber.activeForeground#d1dffa
editorLineNumber.foreground#d1dffa4d
editorLink.activeForeground#869dcb
editorOverviewRuler.border#314c8140
editorRuler.foreground#314c8140
editorWidget.background#16233b
editorWidget.border#314c81
editorWidget.foreground#d1dffa
editorWidget.resizeBorder#6484c4
focusBorder#eda65e
foreground#d1dffa
gitDecoration.conflictingResourceForeground#54c3db
gitDecoration.deletedResourceForeground#d74c34
gitDecoration.ignoredResourceForeground#d1dffa66
gitDecoration.modifiedResourceForeground#e89252
gitDecoration.untrackedResourceForeground#5fa6e1
icon.foreground#d1dffa
input.background#152137
input.border#6484c4
input.placeholderForeground#d1dffa66
inputOption.activeBorder#d1dffa
keybindingLabel.background#00000000
keybindingLabel.border#314c81
keybindingLabel.bottomBorder#314c81
keybindingLabel.foreground#d1dffa
list.activeSelectionBackground#d1dffa
list.activeSelectionForeground#1c2b4a
list.activeSelectionIconForeground#1c2b4a
list.dropBackground#eda65e4d
list.errorForeground#e0877b
list.focusForeground#d1dffa
list.focusHighlightForeground#1c2b4a
list.highlightForeground#eda65e
list.hoverBackground#d1dffa0d
list.inactiveSelectionBackground#243860
list.inactiveSelectionForeground#d1dffa
list.inactiveSelectionIconForeground#d1dffa
list.warningForeground#ead196
menu.background#1c2b4a
menu.foreground#d1dffa
menu.separatorBackground#314c8180
notificationCenterHeader.background#16233b
notificationCenterHeader.foreground#d1dffa
notificationLink.foreground#869dcb
notifications.background#16233b
notifications.foreground#d1dffa
notificationToast.border#314c81
panel.background#1c2b4a
panel.border#314c81
panelSection.border#314c81
panelSectionHeader.border#314c81
panelTitle.activeBorder#d1dffa80
panelTitle.activeForeground#d1dffa
panelTitle.inactiveForeground#d1dffa99
peekViewEditor.matchHighlightBackground#f1c40e80
peekViewResult.matchHighlightBackground#f1c40e80
pickerGroup.border#314c8180
progressBar.background#d1dffa
quickInput.background#1c2b4a
quickInputList.focusBackground#d1dffa
quickInputList.focusForeground#1c2b4a
quickInputList.focusIconForeground#1c2b4a
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#d1dffab3
scrollbarSlider.background#d1dffa4d
scrollbarSlider.hoverBackground#d1dffa99
sideBar.background#16233b
sideBar.border#314c81
sideBar.dropBackground#eda65e4d
sideBarSectionHeader.background#16233b
sideBarSectionHeader.border#314c81
statusBar.background#16233b
statusBar.border#314c81
statusBar.debuggingBackground#16233b
statusBar.foreground#d1dffa
statusBar.noFolderBackground#16233b
statusBarItem.activeBackground#d1dffa33
statusBarItem.hoverBackground#d1dffa1a
statusBarItem.prominentBackground#d1dffa4d
tab.activeBackground#243860
tab.activeBorder#6484c4
tab.activeForeground#d1dffa
tab.border#16233b
tab.inactiveBackground#16233b
tab.inactiveForeground#d1dffacc
tab.unfocusedActiveBorder#6484c4
terminal.ansiBlack#333333
terminal.ansiBlue#a89df1
terminal.ansiBrightBlack#333333
terminal.ansiBrightBlue#a89df1
terminal.ansiBrightCyan#7ee6ec
terminal.ansiBrightGreen#85e0a0
terminal.ansiBrightMagenta#ea9ee3
terminal.ansiBrightRed#ea8080
terminal.ansiBrightWhite#eceef4
terminal.ansiBrightYellow#ebc5a3
terminal.ansiCyan#7ee6ec
terminal.ansiGreen#85e0a0
terminal.ansiMagenta#ea9ee3
terminal.ansiRed#ea8080
terminal.ansiWhite#eceef4
terminal.ansiYellow#ebc5a3
terminal.background#1c2b4a
terminal.foreground#d1dffa
titleBar.activeBackground#16233b
titleBar.activeForeground#d1dffa
titleBar.border#314c81
titleBar.inactiveBackground#16233b
titleBar.inactiveForeground#d1dffab3
toolbar.activeBackground#d1dffa26
toolbar.hoverBackground#d1dffa0d
tree.indentGuidesStroke#314c8180
widget.shadow#0f182980

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	#d1dffa	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	#869dcb
meta.function-call entity.name.function, source.go entity.name.function, meta.property-name.css	#d1dffa
keyword.operator, storage.type.function.arrow	#33cc99
string, punctuation.definition.string, support.constant.property-value	#eda65e
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	#33cc99
comment, punctuation.definition.comment	#869dcb
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	#869dcb
keyword.control, keyword.import, keyword.function, keyword.package, keyword.interface, keyword.map, keyword.var, keyword.other, keyword.type, storage	#33cc99	bold
markup.bold, punctuation.definition.bold, meta.selector entity.other.attribute-name.id, meta.selector entity.other.attribute-name.class	#33cc99	bold
markup.italic	#33cc99	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	#5ebeed
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	#5ebeed
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	#5ebeed	bold
meta.embedded	#d1dffa
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}!`;
}