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 Dark

fetchUser.ts

index.ts

README.md

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#3d173d
activityBar.foreground#d49cc1
activityBar.inactiveForeground#d49cc177
activityBarBadge.background#d49cc1
activityBarBadge.foreground#080108
badge.background#77496f
badge.foreground#e6d5df
breadcrumb.activeSelectionForeground#d77db9
breadcrumb.focusForeground#d77db9d5
breadcrumb.foreground#9a7c92be
breadcrumbPicker.background#3d173d
button.background#d77db9e8
button.foreground#000000
button.hoverBackground#d38cbb
commandCenter.activeBackground#3d173d
commandCenter.activeBorder#bc85bc
commandCenter.activeForeground#d77db9
commandCenter.background#50215089
commandCenter.border#7a457a
commandCenter.foreground#d1b9c8
commandCenter.inactiveBorder#633863
commandCenter.inactiveForeground#978c94
debugIcon.breakpointForeground#d14040
debugToolBar.background#3d173d
descriptionForeground#dec7d5
dropdown.background#4b1e4b
dropdown.border#8b4f8b
dropdown.foreground#d1b9c8
editor.background#3d173d
editor.findMatchBackground#b25c9c98
editor.findMatchBorder#d49cc1bb
editor.findMatchHighlightBackground#b25c9c5d
editor.foreground#d1b9c8
editor.hoverHighlightBackground#b25c9c62
editor.lineHighlightBackground#1b021b58
editor.selectionBackground#b25c9c68
editor.selectionHighlightBackground#c4b1c120
editor.wordHighlightBackground#c4b1c120
editor.wordHighlightStrongBackground#b25c9c62
editorBracketHighlight.foreground1#d49cc1
editorBracketHighlight.foreground2#b18bd4
editorBracketHighlight.foreground3#c9ac4d
editorBracketHighlight.foreground4#88bc73
editorBracketHighlight.foreground5#c57f7f
editorBracketHighlight.foreground6#9eb1db
editorBracketHighlight.unexpectedBracket.foreground#d14040
editorBracketMatch.background#3d173d
editorBracketMatch.border#b25c9c
editorCursor.foreground#bfa6b9
editorError.foreground#d14040
editorGroup.dropBackground#b25c9c5d
editorGroupHeader.tabsBackground#3d173d
editorGutter.addedBackground#72c45b
editorGutter.background#3d173d
editorGutter.deletedBackground#ca4e4e
editorGutter.foldingControlForeground#d49cc1
editorGutter.modifiedBackground#7e97f9
editorHoverWidget.background#3d173d
editorHoverWidget.border#d77db977
editorHoverWidget.foreground#d1b9c8
editorHoverWidget.statusBarBackground#3d173d
editorLineNumber.activeForeground#d77db9
editorLineNumber.foreground#d1b9c8
editorLink.activeForeground#d49cc1d5
editorMarkerNavigation.background#3d173d
editorMarkerNavigationError.background#d14040
editorStickyScroll.background#3d173d
editorStickyScrollHover.background#542154
editorSuggestWidget.background#451b45
editorSuggestWidget.border#d49cc1
editorSuggestWidget.focusHighlightForeground#d49cc1
editorSuggestWidget.foreground#d1b9c8
editorSuggestWidget.highlightForeground#d77db9
editorSuggestWidget.selectedBackground#b25c9c62
editorSuggestWidget.selectedForeground#d49cc1
editorSuggestWidget.selectedIconForeground#d77db9
editorSuggestWidgetStatus.foreground#d49cc1
editorWarning.foreground#e2b213
editorWhitespace.foreground#757575
editorWidget.background#542154
editorWidget.border#d49cc1
editorWidget.foreground#d1b9c8
errorForeground#db6363
extensionButton.prominentBackground#d77db9e8
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#d38cbb
focusBorder#bc85bc
foreground#c0a8b6
gitDecoration.addedResourceForeground#72c45b
gitDecoration.conflictingResourceForeground#c7ce42
gitDecoration.deletedResourceForeground#ca4e4e
gitDecoration.ignoredResourceForeground#766c73
gitDecoration.modifiedResourceForeground#7e97f9
gitDecoration.renamedResourceForeground#f1a05e
gitDecoration.stageDeletedResourceForeground#ca4e4e
gitDecoration.stageModifiedResourceForeground#7e97f9
gitDecoration.submoduleResourceForeground#bb80f1
gitDecoration.untrackedResourceForeground#6ac0b9
icon.foreground#d49cc1
input.background#4b1e4b
input.border#8b4f8b
inputOption.activeBackground#7373735d
inputOption.activeBorder#adafb7
inputOption.activeForeground#ffffff
inputValidation.errorBackground#f1897f
inputValidation.errorBorder#f1897f
inputValidation.errorForeground#000000
inputValidation.infoBackground#89d0e6
inputValidation.infoBorder#89d0e6
inputValidation.infoForeground#000000
inputValidation.warningBackground#ffe055
inputValidation.warningBorder#ffe055
inputValidation.warningForeground#000000
list.activeSelectionBackground#b197b121
list.activeSelectionForeground#e8a6d2
list.dropBackground#3d173d
list.errorForeground#db6363
list.focusBackground#3d173d
list.focusForeground#e8a6d2
list.highlightForeground#d77db9
list.hoverBackground#b197b110
list.hoverForeground#ffecf8
list.inactiveSelectionBackground#3d173d60
list.inactiveSelectionForeground#d49cc1
list.warningForeground#e2b213
listFilterWidget.background#542154
listFilterWidget.noMatchesOutline#ee7a7a
listFilterWidget.outline#d49cc150
menu.background#3d173d
menu.selectionBackground#ffffff00
menu.selectionForeground#d77db9
menu.separatorBackground#7f5471
menubar.selectionBackground#3d173d
menubar.selectionForeground#d77db9
minimap.findMatchHighlight#b25c9c5d
minimap.selectionHighlight#b25c9c5d
notificationCenterHeader.background#3d173d
notifications.background#3d173d
notifications.foreground#d1b9c8
panel.background#3d173d
panelTitle.activeBorder#ffffffde
panelTitle.activeForeground#ffffffde
panelTitle.inactiveForeground#ffffff7b
peekView.border#542154
peekViewEditor.background#542154
peekViewEditor.matchHighlightBackground#b25c9c5d
peekViewEditor.matchHighlightBorder#d49cc1bb
peekViewEditorGutter.background#542154
peekViewResult.background#542154
peekViewResult.fileForeground#d1b9c8
peekViewResult.lineForeground#d1b9c8
peekViewResult.matchHighlightBackground#b25c9c4f
peekViewResult.selectionBackground#b25c9c62
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#542154
peekViewTitleDescription.foreground#b7a3af
peekViewTitleLabel.foreground#d49cc1
pickerGroup.border#d49cc180
pickerGroup.foreground#d49cc1
progressBar.background#d49cc1
quickInput.background#3d173d
scrollbar.shadow#1608166d
scrollbarSlider.activeBackground#ae7baecc
scrollbarSlider.background#89898980
scrollbarSlider.hoverBackground#b197b1aa
selection.background#b25c9c98
settings.headerForeground#d49cc1
settings.settingsHeaderHoverForeground#ffffff
sideBar.background#3d173d
sideBarSectionHeader.background#3d173d
statusBar.background#3d173d
statusBar.debuggingBackground#dba547
statusBar.debuggingForeground#3d173d
statusBar.foreground#d49cc1
statusBar.noFolderBackground#3d173d
statusBarItem.activeBackground#ae7baeaa
statusBarItem.compactHoverBackground#a17aa1aa
statusBarItem.hoverBackground#b197b166
statusBarItem.prominentBackground#b25c9c50
statusBarItem.prominentForeground#d77db9
statusBarItem.prominentHoverBackground#7f5e7faa
statusBarItem.remoteBackground#d49cc1
statusBarItem.remoteForeground#080108
statusBarItem.remoteHoverBackground#b25c9c5d
statusBarItem.remoteHoverForeground#080108
tab.activeBackground#3d173d
tab.activeBorder#d77db9
tab.activeForeground#ffffff
tab.border#3d173d
tab.hoverForeground#d1b9c8
tab.inactiveBackground#3d173d
tab.inactiveForeground#9a7c92be
terminal.ansiBlack#3d173d
terminal.ansiBlue#5782df
terminal.ansiBrightBlack#978c94
terminal.ansiBrightBlue#7e97f9
terminal.ansiBrightCyan#7abecc
terminal.ansiBrightGreen#72c45b
terminal.ansiBrightMagenta#bb80f1
terminal.ansiBrightRed#ee7a7a
terminal.ansiBrightWhite#dec7d5
terminal.ansiBrightYellow#d7b853
terminal.ansiCyan#3ca89a
terminal.ansiGreen#489427
terminal.ansiMagenta#9045d6
terminal.ansiRed#d14040
terminal.ansiWhite#d1b9c8
terminal.ansiYellow#c4990d
terminal.background#3d173d
terminal.foreground#d1b9c8
terminalCursor.foreground#d49cc1aa
textBlockQuote.background#3d173d
textBlockQuote.border#d77db9
textLink.activeForeground#f7c8e8
textLink.foreground#d49cc1
textPreformat.foreground#bb80f1
titleBar.activeBackground#3d173d
titleBar.activeForeground#d1b9c8
titleBar.inactiveBackground#3d173d
titleBar.inactiveForeground#978c94
walkThrough.embeddedEditorBackground#3d173d
welcomePage.background#3d173d
welcomePage.buttonBackground#b25c9c58
welcomePage.buttonHoverBackground#b25c9c98
welcomePage.progress.background#6d366d
welcomePage.progress.foreground#d49cc1
welcomePage.tileBackground#b25c9c35
welcomePage.tileHoverBackground#b25c9c60

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
Global settings	#d1b9c8	—
punctuation.separator, punctuation.terminator, punctuation.definition.variable	#d49cc1	—
comment.line, comment.block, punctuation.definition.comment	#875e7c	italic
entity.name.type, entity.other.inherited-class, support.class	#d7b853	—
entity.name.namespace	#d7b853	—
source.java storage.modifier.import, source.java storage.modifier.package, meta.embedded.block.java storage.modifier.import, meta.embedded.block.java storage.modifier.package	#d7b853	—
entity.name.function, support.function, meta.function-call.generic	#bf86f5	—
variable.parameter	#d883b3	—
keyword, storage	#7b95f9	italic
keyword.other, source.python keyword.control.import.python	#f66d6d
storage.type, support.type	#80bf6e
constant.numeric, constant.language, constant.character, constant, source.css keyword.other.unit	#ee7a7a
variable.language	#f1a05e	italic
keyword.operator	#d49cc1
string	#6cbecf	—
constant.character.escape	#6c9fe7	—
constant.other.placeholder	#6c9fe7	—
support.variable, variable	#d1b9c8	—
source.json meta.structure.dictionary.json support.type.property-name.json	#bb80f1	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#d4b5f1	—
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	#7b95f9	—
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	#a3b2eb	—
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	#80bf6e	—
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	#add8a2	—
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	#d7b853	—
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	#e1c979	—
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	#e48457	—
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	#e1ad95	—
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	#bb80f1	—
entity.other.attribute-name	#ee7a7a	—
meta.tag	#8faede	—
entity.name.tag	#89a1ff	—
meta.property-name, support.type.property-name	#d1b9c8	—
entity.other.attribute-name.class	#d7b853	—
entity.other.attribute-name.id	#bb78fa	—
entity.other.attribute-name.pseudo-class	#6cbecf	—
constant.other.color	#d883b3	—
support.constant.property-value	#80bf6e	—
markup.heading, markup.heading entity.name	#7e97f9	—
markup.list punctuation.definition.list.begin	#d49cc1	—
markup.underline.link	#bb80f1	—
markup.bold	#ee7a7a	bold
markup.italic	#ee7a7a	italic
markup.italic markup.bold, markup.bold markup.italic	—	italic bold
text.html.markdown markup.inline.raw	#72c45b	—
text.html.markdown punctuation.definition.markdown	#875e7c	—
text.html.markdown fenced_code.block.language	#d7b853	—
markup.quote	#98cd8a	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}!`;
}