Huacat Pink Theme

Name: Huacat Pink Theme
Author: huacat

Publisher: huacatThemes in package: 2

A cool pink theme for VScode.

GitHub

Color themes

VS Code preview

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

Huacat Pink Theme — Huacat Pink Theme

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#f5eaf5
activityBar.foreground#dd71b9
activityBar.inactiveForeground#dd71b977
activityBarBadge.background#dd71b9
badge.background#dd71b9aa
breadcrumb.activeSelectionForeground#dd71b9
breadcrumb.focusForeground#dd71b9d5
breadcrumbPicker.background#f5eaf5
button.background#dd71b9aa
commandCenter.activeBackground#d6c6d357
commandCenter.activeBorder#bfbfbf
commandCenter.activeForeground#dd71b9
commandCenter.background#d6c6d344
commandCenter.border#d4d4d4
commandCenter.foreground#72696f
commandCenter.inactiveBorder#e0e0e0
commandCenter.inactiveForeground#978c94
debugIcon.breakpointForeground#d14040
debugToolBar.background#f5eaf5
descriptionForeground#5f585d
dropdown.background#ffffff
editor.background#f5eaf5
editor.findMatchBackground#ecc3e198
editor.findMatchBorder#dd71b9bb
editor.findMatchHighlightBackground#ecc3e15d
editor.foreground#72696f
editor.hoverHighlightBackground#ecc3e162
editor.lineHighlightBackground#ecc3e158
editor.selectionBackground#ecc3e198
editor.selectionHighlightBackground#d6c6d398
editor.wordHighlightBackground#d6c6d398
editor.wordHighlightStrongBackground#ecc3e162
editorBracketHighlight.foreground1#dd71b9
editorBracketHighlight.foreground2#9e5fd9
editorBracketHighlight.foreground3#e2b213
editorBracketHighlight.foreground4#62ad44
editorBracketHighlight.foreground5#db6363
editorBracketHighlight.foreground6#88a4e2
editorBracketHighlight.unexpectedBracket.foreground#d14040
editorBracketMatch.background#f5eaf5
editorBracketMatch.border#ecc3e1
editorCursor.foreground#54494b
editorError.foreground#d14040
editorGroup.dropBackground#ecc3e15d
editorGroupHeader.tabsBackground#f5eaf5
editorGutter.addedBackground#72c45b
editorGutter.background#f5eaf5
editorGutter.deletedBackground#d14040
editorGutter.foldingControlForeground#dd71b9
editorGutter.modifiedBackground#5782df
editorHoverWidget.background#f5eaf5
editorHoverWidget.border#dd71b977
editorHoverWidget.foreground#72696f
editorHoverWidget.statusBarBackground#f5eaf5
editorLineNumber.activeForeground#dd71b9
editorLineNumber.foreground#72696f
editorLink.activeForeground#dd71b9d5
editorMarkerNavigation.background#f5eaf5
editorMarkerNavigationError.background#d14040
editorStickyScroll.background#f5eaf5
editorStickyScrollHover.background#f3e1f1
editorSuggestWidget.background#f7f7f7
editorSuggestWidget.border#d4d4d4
editorSuggestWidget.focusHighlightForeground#dd71b9
editorSuggestWidget.foreground#72696f
editorSuggestWidget.highlightForeground#dd71b9d5
editorSuggestWidget.selectedBackground#ecc3e162
editorSuggestWidget.selectedForeground#dd71b9
editorSuggestWidget.selectedIconForeground#dd71b9
editorSuggestWidgetStatus.foreground#dd71b9
editorWarning.foreground#e2b213
editorWhitespace.foreground#aaaaaa
editorWidget.background#f3e1f1
editorWidget.border#dd71b9
editorWidget.foreground#72696f
errorForeground#f1897f
extensionButton.prominentBackground#dd71b9
extensionButton.prominentHoverBackground#dd71b9aa
focusBorder#d4d4d4
foreground#72696f
gitDecoration.addedResourceForeground#62ad44
gitDecoration.conflictingResourceForeground#e2b213
gitDecoration.deletedResourceForeground#d14040
gitDecoration.ignoredResourceForeground#c4b5c0
gitDecoration.modifiedResourceForeground#5782df
gitDecoration.renamedResourceForeground#1c8b3a
gitDecoration.stageDeletedResourceForeground#d14040
gitDecoration.stageModifiedResourceForeground#5782df
gitDecoration.submoduleResourceForeground#9045d6
gitDecoration.untrackedResourceForeground#6ac0b9
icon.foreground#dd71b9
inputOption.activeBorder#adafb7
inputValidation.errorBackground#ffeaea
inputValidation.errorBorder#f1897f
inputValidation.infoBackground#f2fcff
inputValidation.infoBorder#4ec1e5
inputValidation.warningBackground#fffee2
inputValidation.warningBorder#ffe055
list.activeSelectionBackground#f5eaf500
list.activeSelectionForeground#dd71b9
list.dropBackground#f5eaf5
list.focusBackground#f5eaf5
list.focusForeground#dd71b9
list.highlightForeground#dd71b9bb
list.hoverBackground#ffffff00
list.hoverForeground#dd71b9d5
list.inactiveSelectionBackground#f5eaf560
list.inactiveSelectionForeground#dd71b9
listFilterWidget.background#f3e1f1
listFilterWidget.noMatchesOutline#db6363
listFilterWidget.outline#dd71b950
menu.background#f5eaf5
menubar.selectionBackground#f5eaf5
menubar.selectionForeground#dd71b9
minimap.findMatchHighlight#ecc3e15d
minimap.selectionHighlight#ecc3e15d
notificationCenterHeader.background#f5eaf5
notifications.background#f5eaf5
notifications.foreground#dd71b9
panel.background#f5eaf5
peekView.border#dd71b9
peekViewEditor.background#f3e0f3
peekViewEditor.matchHighlightBackground#ecc3e15d
peekViewEditor.matchHighlightBorder#dd71b9bb
peekViewEditorGutter.background#f3e0f3
peekViewResult.background#f3e0f3
peekViewResult.fileForeground#6b5d72
peekViewResult.lineForeground#72696f
peekViewResult.matchHighlightBackground#ecc3e198
peekViewResult.selectionBackground#ecc3e162
peekViewResult.selectionForeground#2e2d2d
peekViewTitle.background#f3e0f3
peekViewTitleDescription.foreground#6b5d72
peekViewTitleLabel.foreground#dd71b9
pickerGroup.border#dd71b980
pickerGroup.foreground#dd71b9
progressBar.background#dd71b9
quickInput.background#f5eaf5
scrollbarSlider.activeBackground#f0b7f0cc
scrollbarSlider.background#bbbbbb80
scrollbarSlider.hoverBackground#f0cef1aa
selection.background#ecc3e198
sideBar.background#f5eaf5
sideBarSectionHeader.background#f5eaf5
statusBar.background#f5eaf5
statusBar.debuggingBackground#9045d6
statusBar.debuggingForeground#f5eaf5
statusBar.foreground#dd71b9
statusBar.noFolderBackground#f5eaf5
statusBarItem.activeBackground#e4c4e6aa
statusBarItem.compactHoverBackground#ecb8efaa
statusBarItem.hoverBackground#f0cef1aa
statusBarItem.prominentBackground#ecc3e150
statusBarItem.prominentForeground#dd71b9
statusBarItem.prominentHoverBackground#f0b7f0cc
statusBarItem.remoteBackground#dd71b9
statusBarItem.remoteForeground#ffffff
statusBarItem.remoteHoverBackground#ebcbe0
statusBarItem.remoteHoverForeground#dd71b9
tab.activeBackground#f5eaf5
tab.activeBorder#dd71b9
tab.border#f5eaf5
tab.inactiveBackground#f5eaf5
terminal.ansiBlack#38313b
terminal.ansiBlue#5782df
terminal.ansiBrightBlack#6b5d72
terminal.ansiBrightBlue#88a4e2
terminal.ansiBrightCyan#6ac0b9
terminal.ansiBrightGreen#62ad44
terminal.ansiBrightMagenta#a770db
terminal.ansiBrightRed#db6363
terminal.ansiBrightWhite#978c94
terminal.ansiBrightYellow#e2b213
terminal.ansiCyan#3ca89a
terminal.ansiGreen#3d8b1c
terminal.ansiMagenta#9045d6
terminal.ansiRed#d14040
terminal.ansiWhite#72696f
terminal.ansiYellow#c4990d
terminal.background#f5eaf5
terminal.foreground#72696f
terminalCursor.foreground#dd71b9aa
textBlockQuote.background#f5eaf5
textBlockQuote.border#dd71b977
textLink.activeForeground#dd71b999
textLink.foreground#dd71b9
textPreformat.foreground#9045d6
titleBar.activeBackground#f5eaf5
titleBar.activeForeground#72696f
titleBar.inactiveBackground#f5eaf5
titleBar.inactiveForeground#978c94
walkThrough.embeddedEditorBackground#f5eaf5
welcomePage.background#f5eaf5
welcomePage.buttonBackground#ecc3e158
welcomePage.buttonHoverBackground#ecc3e198
welcomePage.progress.background#ffffff
welcomePage.progress.foreground#dd71b9
welcomePage.tileBackground#ecc3e135
welcomePage.tileHoverBackground#ecc3e160

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
Global settings	#72696f	—
punctuation.separator, punctuation.terminator, punctuation.definition.variable	#dd71b9	—
comment.line, comment.block, punctuation.definition.comment	#978c94	italic
entity.name.type, entity.other.inherited-class, support.class	#e2b213	—
entity.name.namespace	#e2b213	—
source.java storage.modifier.import, source.java storage.modifier.package, meta.embedded.block.java storage.modifier.import, meta.embedded.block.java storage.modifier.package	#e2b213	—
entity.name.function, support.function, meta.function-call.generic	#a770db	—
variable.parameter	#e45d1e	—
keyword, storage	#5782df	italic
keyword.other, source.python keyword.control.import.python	#db6363
storage.type, support.type	#62ad44
constant.numeric, constant.language, constant.character, constant, source.css keyword.other.unit	#db6363
variable.language	#dd71b9	italic
variable.language.makefile	#ddac71	italic
keyword.operator	#dba15e
string	#64afa9	—
constant.character.escape	#559fe4	—
constant.other.placeholder	#559fe4	—
support.variable, variable	#72696f	—
source.json meta.structure.dictionary.json support.type.property-name.json	#9045d6	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#a770db	—
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	#5782df	—
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	#559fe4	—
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	#3d8b1c	—
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	#62ad44	—
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	#c4990d	—
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	#e2b213	—
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	#e45d1e	—
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#e48559	—
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#9045d6	—
entity.other.attribute-name	#db6363	—
meta.tag	#559fe4	—
entity.name.tag	#5782df	—
meta.property-name, support.type.property-name	#72696f	—
entity.other.attribute-name.class	#dba15e	—
entity.other.attribute-name.id	#9045d6	—
entity.other.attribute-name.pseudo-class	#64afa9	—
constant.other.color	#dd71b9	—
support.constant.property-value	#62ad44	—
markup.heading, markup.heading entity.name	#5782df	—
markup.list punctuation.definition.list.begin	#dd71b9	—
markup.underline.link	#a770db	—
markup.bold	#db6363	bold
markup.italic	#db6363	italic
markup.italic markup.bold, markup.bold markup.italic	—	italic bold
text.html.markdown markup.inline.raw	#62ad44	—
text.html.markdown punctuation.definition.markdown	#978c94	—
text.html.markdown fenced_code.block.language	#e2b213	—
markup.quote	#3d8b1c	italic

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