Hello Kitty Theme

Name: Hello Kitty Theme
Author: HelloKitty VS Code Theme

Publisher: HelloKitty VS Code ThemeThemes in package: 1

Cute Hello Kitty themed VSCode theme - Full of pink tones and kawaii colors!

Open in VS Code GitHub

VS Code preview

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

Hello Kitty Theme — Hello Kitty

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.activeBorder#C2185B
activityBar.background#E91E63
activityBar.foreground#FFFFFF
activityBarBadge.background#C2185B
activityBarBadge.foreground#FFFFFF
badge.background#C2185B
badge.foreground#FFFFFF
breadcrumb.activeSelectionBackground#F48FB1
breadcrumb.activeSelectionForeground#C2185B
breadcrumb.background#FFF3F7
breadcrumb.focusForeground#C2185B
breadcrumb.foreground#2D2D2D
button.background#E91E63
button.foreground#FFFFFF
button.hoverBackground#C2185B
debugConsole.errorForeground#D32F2F
debugConsole.infoForeground#1976D2
debugConsole.sourceForeground#E91E63
debugConsole.warningForeground#F57C00
debugIcon.breakpointCurrentStackframeForeground#E91E63
debugIcon.breakpointDisabledForeground#9E9E9E
debugIcon.breakpointForeground#E91E63
debugIcon.breakpointStackframeForeground#F48FB1
debugIcon.breakpointUnverifiedForeground#FFB74D
debugIcon.continueForeground#66BB6A
debugIcon.disconnectForeground#E91E63
debugIcon.pauseForeground#FFB74D
debugIcon.restartForeground#42A5F5
debugIcon.startForeground#66BB6A
debugIcon.stepBackForeground#E91E63
debugIcon.stepIntoForeground#42A5F5
debugIcon.stepOutForeground#FFB74D
debugIcon.stepOverForeground#66BB6A
debugIcon.stopForeground#EF5350
debugTokenExpression.boolean#E91E63
debugTokenExpression.error#D32F2F
debugTokenExpression.name#C2185B
debugTokenExpression.number#F57C00
debugTokenExpression.string#388E3C
debugTokenExpression.value#2D2D2D
debugToolBar.background#FFF3F7
debugToolBar.border#F48FB1
debugView.breakpointBackground#FFEBEE
debugView.breakpointBorder#E91E63
debugView.breakpointCurrentStackframeBackground#FCE4EC
debugView.breakpointCurrentStackframeBorder#E91E63
debugView.breakpointCurrentStackframeForeground#E91E63
debugView.breakpointDisabledBackground#F5F5F5
debugView.breakpointDisabledBorder#9E9E9E
debugView.breakpointDisabledForeground#9E9E9E
debugView.breakpointStackframeBackground#F8BBD9
debugView.breakpointStackframeBorder#F48FB1
debugView.breakpointStackframeForeground#F48FB1
debugView.breakpointUnverifiedBackground#FFF3E0
debugView.breakpointUnverifiedBorder#FFB74D
debugView.exceptionLabelBackground#FFEBEE
debugView.exceptionLabelForeground#D32F2F
debugView.stateLabelBackground#E8F5E8
debugView.stateLabelForeground#388E3C
debugView.valueChangedHighlight#FFF3E0
diffEditor.diagonalFill#F8BBD9
diffEditor.insertedTextBackground#E8F5E8
diffEditor.insertedTextBorder#66BB6A
diffEditor.removedTextBackground#FFEBEE
diffEditor.removedTextBorder#EF5350
dropdown.background#FFFFFF
dropdown.border#F48FB1
dropdown.foreground#2D2D2D
editor.background#FFF3F7
editor.findMatchBackground#F48FB1
editor.findMatchHighlightBackground#F8BBD9
editor.fontFamily'Comic Sans MS', 'Comic Sans', 'Segoe UI', 'Arial', sans-serif
editor.fontLigatures
editor.fontSize14
editor.fontWeightnormal
editor.foreground#2D2D2D
editor.inactiveSelectionBackground#F8BBD9
editor.letterSpacing0
editor.lineHeight1.4
editor.lineHighlightBackground#FCE4EC
editor.selectionBackground#F48FB1
editor.wordHighlightBackground#F06292
editorGroup.border#F48FB1
editorGroupHeader.tabsBackground#FFF3F7
editorGroupHeader.tabsBorder#F48FB1
editorGutter.addedBackground#81C784
editorGutter.background#FFF3F7
editorGutter.commentRangeForeground#E57373
editorGutter.deletedBackground#F48FB1
editorGutter.foldingControlForeground#C2185B
editorGutter.modifiedBackground#F48FB1
editorHoverWidget.background#FFF3F7
editorHoverWidget.border#F48FB1
editorHoverWidget.foreground#2D2D2D
editorLightBulb.foreground#FFB74D
editorLightBulbAutoFix.foreground#66BB6A
editorOverviewRuler.border#F48FB1
editorOverviewRuler.commonContentForeground#42A5F5
editorOverviewRuler.currentContentForeground#E91E63
editorOverviewRuler.incomingContentForeground#66BB6A
editorSuggestWidget.background#FFF3F7
editorSuggestWidget.border#F48FB1
editorSuggestWidget.foreground#2D2D2D
editorSuggestWidget.highlightForeground#C2185B
editorSuggestWidget.selectedBackground#F48FB1
editorWidget.background#FFF3F7
editorWidget.border#F48FB1
editorWidget.foreground#2D2D2D
errorForeground#D32F2F
extensionButton.prominentBackground#E91E63
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#C2185B
infoForeground#1976D2
input.background#FFFFFF
input.border#F48FB1
input.foreground#2D2D2D
input.placeholderForeground#F48FB1
list.activeSelectionBackground#F48FB1
list.activeSelectionForeground#2D2D2D
list.hoverBackground#F8BBD9
list.hoverForeground#2D2D2D
menu.background#FFF3F7
menu.foreground#2D2D2D
menu.selectionBackground#F48FB1
menu.selectionForeground#2D2D2D
menu.separatorBackground#F8BBD9
menubar.selectionBackground#F48FB1
menubar.selectionForeground#2D2D2D
merge.border#F48FB1
merge.commonContentBackground#FFF8E1
merge.commonHeaderBackground#FFF3E0
merge.currentContentBackground#F3E5F5
merge.currentHeaderBackground#E3F2FD
merge.incomingContentBackground#F1F8E9
merge.incomingHeaderBackground#E8F5E8
minimap.background#FFF3F7
minimap.errorHighlight#EF5350
minimap.findMatchHighlight#F48FB1
minimap.selectionHighlight#F8BBD9
minimap.warningHighlight#FFB74D
notification.background#FFF3F7
notification.border#F48FB1
notification.foreground#2D2D2D
notificationLink.foreground#E91E63
notifications.background#FFF3F7
notifications.border#F48FB1
notifications.foreground#2D2D2D
panel.background#FFF3F7
panel.border#F48FB1
panelTitle.activeForeground#C2185B
panelTitle.inactiveForeground#F48FB1
problemsErrorIcon.foreground#D32F2F
problemsInfoIcon.foreground#1976D2
problemsWarningIcon.foreground#F57C00
progressBar.background#E91E63
scrollbarSlider.activeBackground#C2185B
scrollbarSlider.background#F48FB1
scrollbarSlider.hoverBackground#E91E63
sideBar.background#FCE4EC
sideBar.foreground#C2185B
sideBarSectionHeader.background#F8BBD9
sideBarSectionHeader.foreground#C2185B
sideBarTitle.foreground#AD1457
statusBar.background#E91E63
statusBar.debuggingBackground#C2185B
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#E91E63
tab.activeBackground#FCE4EC
tab.activeBorder#E91E63
tab.activeBorderTop#C2185B
tab.activeForeground#C2185B
tab.border#F48FB1
tab.hoverBackground#FCE4EC
tab.hoverForeground#C2185B
tab.inactiveBackground#FFF3F7
tab.inactiveForeground#F48FB1
tab.unfocusedActiveBackground#FCE4EC
tab.unfocusedActiveForeground#C2185B
tab.unfocusedInactiveBackground#FFF3F7
tab.unfocusedInactiveForeground#F48FB1
terminal.ansiBlue#42A5F5
terminal.ansiCyan#26C6DA
terminal.ansiGreen#66BB6A
terminal.ansiMagenta#E91E63
terminal.ansiRed#EF5350
terminal.ansiYellow#FFB74D
terminal.background#FFF3F7
terminal.fontFamily'Comic Sans MS', 'Comic Sans', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace
terminal.fontSize14
terminal.fontWeightnormal
terminal.foreground#2D2D2D
terminal.integrated.cursorBlinking
terminal.integrated.cursorStyleline
terminal.integrated.defaultProfile.linuxbash
terminal.integrated.defaultProfile.osxzsh
terminal.integrated.defaultProfile.windowsPowerShell
terminal.integrated.fontFamily'Comic Sans MS', 'Comic Sans', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace
terminal.integrated.fontSize14
terminal.integrated.letterSpacing0
terminal.integrated.lineHeight1.2
testing.errorBackground#FFEBEE
testing.errorForeground#D32F2F
testing.failedBackground#FFEBEE
testing.failedForeground#D32F2F
testing.iconErrored#D32F2F
testing.iconFailed#D32F2F
testing.iconPassed#388E3C
testing.iconQueued#FFB74D
testing.iconSkipped#9E9E9E
testing.iconUnset#9E9E9E
testing.infoBackground#E3F2FD
testing.infoForeground#1976D2
testing.passedBackground#E8F5E8
testing.passedForeground#388E3C
testing.peekBorder#F48FB1
testing.peekHeaderBackground#FCE4EC
testing.runAction#66BB6A
testing.warningBackground#FFF3E0
testing.warningForeground#F57C00
textLink.activeForeground#C2185B
textLink.foreground#E91E63
textSeparator.foreground#F48FB1
titleBar.activeBackground#E91E63
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#F48FB1
titleBar.inactiveForeground#FFFFFF
toolbar.activeBackground#F48FB1
toolbar.background#FFF3F7
toolbar.hoverBackground#FCE4EC
walkThrough.embeddedEditorBackground#FFF3F7
warningForeground#F57C00
welcomePage.background#FFF3F7
welcomePage.progress.background#F8BBD9
welcomePage.progress.foreground#E91E63
welcomePage.tileBackground#FCE4EC
welcomePage.tileBorder#F48FB1
welcomePage.tileHoverBackground#F48FB1
widget.shadow#F48FB1
window.activeBorder#E91E63
window.inactiveBorder#F48FB1
window.titleBarStylecustom
workbench.colorThemeHello Kitty
workbench.iconThemehello-kitty-icons

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#E57373	italic
string, string.quoted, string.quoted.single, string.quoted.double	#388E3C	—
keyword, storage.type, storage.modifier	#C2185B	bold
entity.name.function, support.function	#1976D2	—
variable, variable.other	#D84315	—
constant.numeric	#E91E63	—
constant, constant.other	#F57C00	—
entity.name.type, support.type	#7B1FA2	—
entity.name.class	#C2185B	bold
keyword.operator	#E91E63	—
punctuation	#E91E63	—
entity.name.tag	#C2185B	—
support.type.property-name.css	#1976D2	—
support.constant.property-value.css	#388E3C	—
variable.other.object	#D84315	—
support.type.property-name.json	#C2185B	—
markup.heading	#C2185B	bold
markup.underline.link	#1976D2	—
markup.inserted	#388E3C	—
markup.deleted	#D32F2F	—

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