Cutiepie

Name: Cutiepie
Author: Aditya Sasidhar

Publisher: Aditya SasidharThemes in package: 2

A soft VS Code theme in powder pink and pale sky blue on true black. Dark and light.

Open in VS Code GitHub

Color themes

VS Code preview

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

Cutiepie — Cutiepie Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#0A0908
activityBar.border#1A1A1A
activityBar.foreground#afaca7
activityBarBadge.background#F7B2C9
activityBarBadge.foreground#0A0908
badge.background#F7B2C9
badge.foreground#0A0908
breadcrumb.activeSelectionForeground#F7B2C9
breadcrumb.background#0A0908
breadcrumb.foreground#8C6E7B
button.background#F7B2C9
button.foreground#0A0908
button.hoverBackground#FFD3E2
debugToolBar.background#0a0a0a
diffEditor.insertedLineBackground#6BBFE615
diffEditor.insertedTextBackground#6BBFE61C
diffEditor.insertedTextBorder#3D6B82
diffEditor.removedLineBackground#FF6F8515
diffEditor.removedTextBackground#e11d4840
editor.background#0a0908fb
editor.findMatchBackground#F7B2C940
editor.findMatchBorder#F7B2C9
editor.findMatchHighlightBackground#F7B2C920
editor.foreground#ffffff
editor.selectionBackground#F7B2C923
editor.selectionForeground#ffffff
editor.selectionHighlightBackground#F7B2C920
editor.wordHighlightBackground#F7B2C923
editorBracketHighlight.foreground1#FFD0E0
editorBracketHighlight.foreground2#FAF4F8
editorBracketHighlight.foreground3#D6CFD4
editorBracketHighlight.foreground4#FFF9FC
editorBracketHighlight.foreground5#FFE0EB
editorBracketHighlight.foreground6#FFD9E6
editorBracketHighlight.unexpectedBracket.foreground#FF6F85
editorCursor.foreground#F7B2C9
editorError.foreground#FF6F85
editorGroupHeader.tabsBackground#0A0908
editorGutter.addedBackground#6BBFE6
editorGutter.deletedBackground#E85B75
editorGutter.modifiedBackground#F7B2C9
editorHoverWidget.background#161616
editorHoverWidget.border#282828
editorIndentGuide.activeBackground1#222
editorIndentGuide.background1#0A0908
editorInlayHint.background#1C1C1C
editorInlayHint.foreground#afaca7
editorLineNumber.foreground#505050
editorOverviewRuler.border#0A0908
editorWarning.foreground#F7B2C9
editorWidget.background#0A0908
focusBorder#111
gitDecoration.addedResourceForeground#7FC8EC
gitDecoration.conflictingResourceForeground#C9A0DC
gitDecoration.deletedResourceForeground#FF6F85
gitDecoration.modifiedResourceForeground#F7B2C9
gitDecoration.untrackedResourceForeground#8C6E7B
icon.foreground#afaca7
input.background#1C1C1C
list.activeSelectionBackground#232323
list.activeSelectionForeground#F7B2C9
list.errorForeground#FF4D66
list.highlightForeground#F7B2C9
list.hoverBackground#282828
list.inactiveSelectionBackground#232323
scrollbarSlider.background#34343434
scrollbarSlider.hoverBackground#343434
selection.background#666
settings.modifiedItemIndicator#F7B2C9
sideBar.background#0A0908
sideBar.border#1A1A1A
sideBar.foreground#ffffff
sideBarSectionHeader.background#0A0908
sideBarSectionHeader.foreground#afaca7
sideBarTitle.foreground#afaca7
statusBar.background#0A0908
statusBar.debuggingBackground#F7B2C9
statusBar.debuggingForeground#ffffff
statusBar.foreground#afaca7
statusBar.noFolderBackground#0A0908
statusBarItem.remoteBackground#0A0908
statusBarItem.remoteForeground#ffffff
tab.activeBackground#0D0C0C
tab.activeBorderTop#F7B2C9
tab.activeForeground#AFACA7
tab.border#0A0908
tab.hoverBackground#111
tab.inactiveBackground#0A0908
terminal.ansiBlack#0A0908
terminal.ansiBlue#7B93F0
terminal.ansiBrightBlack#505050
terminal.ansiBrightBlue#9FA9FF
terminal.ansiBrightCyan#D7F1FC
terminal.ansiBrightGreen#9BD9F3
terminal.ansiBrightMagenta#F9CFDE
terminal.ansiBrightRed#FF93A4
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFD3E2
terminal.ansiCyan#AFDCF2
terminal.ansiGreen#7FC8EC
terminal.ansiMagenta#EFBBD0
terminal.ansiRed#FF6F85
terminal.ansiWhite#FFFFFF
terminal.ansiYellow#F7B2C9
terminal.border#1A1A1A
terminal.dropBackground#F7B2C940
terminal.findMatchBackground#F7B2C940
terminal.findMatchBorder#F7B2C9
terminal.findMatchHighlightBackground#F7B2C920
terminal.tab.activeBorder#F7B2C9
terminalCommandDecoration.defaultBackground#AFACA7
terminalCommandDecoration.errorBackground#FF6F85
terminalCommandDecoration.successBackground#7FC8EC
terminalCursor.background#0A0908
terminalCursor.foreground#F7B2C9
textLink.activeForeground#FFD3E2
textLink.foreground#F7B2C9
titleBar.activeBackground#0A0908
titleBar.activeForeground#afaca7
titleBar.inactiveBackground#0A0908
titleBar.inactiveForeground#707070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9B808C	italic
variable, string constant.other.placeholder, entity.name.tag	#FFF6FA	—
constant.other.color	#FFF6FA	—
invalid, invalid.illegal	#FF6F85	—
keyword, storage.type, storage.modifier	#afaca7	—
keyword.control, constant.other.color, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#afaca7	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#F7B2C9	—
entity.name.function, variable.function, support.function, keyword.other.special-method	#F7B2C9	—
meta.block variable.other	#ffffff	—
support.other.variable, string.other.link	#ffffff	—
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean	#F7B2C9	—
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#AFDCF2	—
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	#F7B2C9	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, source.postcss support.type.property-name, support.type.vendored.property-name.css, source.css.scss entity.name.tag, variable.parameter.keyframe-list.css, meta.property-name.css, variable.parameter.url.scss, meta.property-value.scss, meta.property-value.css	#ffffff	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#F7B2C9	—
variable.language	#afaca7	—
entity.name.method.js	#FFFFFF	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#FFFFFF	—
entity.other.attribute-name, meta.property-list.scss, meta.attribute-selector.scss, meta.property-value.css, entity.other.keyframe-offset.css, meta.selector.css, entity.name.tag.reference.scss, entity.name.tag.nesting.css, punctuation.separator.key-value.css	#afaca7	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#F7B2C9	—
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css	#ffffff	—
source.sass keyword.control, meta.attribute-selector.scss	#ffffff	—
markup.inserted	#C8ECFA	—
markup.deleted	#FF6F85	—
markup.changed	#afaca7	—
string.regexp	#afaca7	—
constant.character.escape	#afaca7	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#FFFFFF	—
source.js constant.other.object.key.js string.unquoted.label.js	#F7B2C9	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#F7B2C9	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F7B2C9	—
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	#F7B2C9	—
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	#F7B2C9	—
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	#F7B2C9	—
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	#F7B2C9	—
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	#F7B2C9	—
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	#F7B2C9	—
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	#F7B2C9	—
text.html.markdown, punctuation.definition.list_item.markdown	#ffffff	—
text.html.markdown markup.inline.raw.markdown	#afaca7	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#ffffff	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter	#F7B2C9	—
markup.italic	#ffffff	italic
markup.bold, markup.bold string	#ffffff	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	#ffffff	bold
markup.underline	#F7B2C9	underline
markup.quote punctuation.definition.blockquote.markdown	#ffffff	—
markup.quote	#ffffff	—
string.other.link.title.markdown	#FFFFFF	—
string.other.link.description.title.markdown	#afaca7	—
constant.other.reference.link.markdown	#F7B2C9	—
markup.raw.block	#afaca7	—
markup.raw.block.fenced.markdown	#afaca7	—
punctuation.definition.fenced.markdown	#707070	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#ffffff	—
variable.language.fenced.markdown	#ffffff	—
meta.separator	#65737E	bold
markup.table	#ffffff	—