/hello-kitty-vscode-theme

A delightful Hello Kitty themed VS Code theme! Filled with pink tones and kawaii colors, this theme will make you smile even while coding.

Primary LanguageJavaScript

Hello Kitty VS Code Theme 🎀

A delightful Hello Kitty themed VS Code theme! Filled with pink tones and kawaii colors, this theme will make you smile even while coding.

📸 Screenshot

Hello Kitty VS Code Theme

🌸 Features

  • Pink and cute color palette
  • Hello Kitty style icons
  • Comic Sans MS font support
  • Kawaii color scheme
  • Custom file icons for different file types
  • Optimized for readability
  • Enhanced contrast for better visibility
  • Hello Kitty code snippets
  • Custom commands for developers
  • Framework-specific icons (React, Vue, Angular)
  • Database file support
  • Welcome modal for first-time users
  • Git integration with Hello Kitty commit messages
  • Docker and container support
  • Testing framework icons
  • API development support
  • Debugging with pink console
  • Terminal customization
  • Professional icons from VSCode Icons project

🎨 Color Scheme

Main Colors

  • Primary Pink: #E91E63 (vibrant pink)
  • Dark Pink: #C2185B (for contrast)
  • Light Pink: #F48FB1 (for highlights)
  • Background: #FFF3F7 (soft pink)

Syntax Highlighting

  • Keywords: Dark pink (#C2185B) - bold
  • Strings: Dark green (#388E3C) - highly visible
  • Variables: Orange (#D84315) - easily distinguishable
  • Functions: Blue (#1976D2) - clear distinction
  • Numbers: Pink (#E91E63) - visible
  • Comments: Light red (#E57373) - italic

📁 File Icons

  • 📄 General files
  • 📁 Folders
  • 🌐 HTML files
  • 🎨 CSS files
  • ⚡ JavaScript files
  • 📋 JSON files
  • 🖼️ Image files
  • 🎀 README files (Hello Kitty face!)
  • ⚛️ React files (.jsx, .tsx)
  • 🟢 Vue files (.vue)
  • 🗄️ Database files (.sql, .db)
  • 📝 TypeScript files (.ts, .tsx)
  • 🐳 Docker files (Dockerfile, docker-compose.yml)
  • 🧪 Test files (.test.js, .spec.js, .test.ts, .spec.ts)
  • 🔌 API files (.api.js, swagger.json, openapi.json)
  • 📋 Git files (.gitignore)
  • 🎨 CSS preprocessors (.scss, .sass, .less, .styl)
  • 📄 Markdown files (.md)
  • 📊 Data files (.xml, .yaml, .yml)
  • 🐍 Python files (.py)
  • ☕ Java files (.java)
  • ⚡ C++ files (.cpp, .cc, .cxx)
  • 🔷 C# files (.cs)
  • 🐹 Go files (.go)
  • 💎 Ruby files (.rb)
  • 🦀 Rust files (.rs)
  • 📦 Archive files (.zip, .tar, .gz, .rar, .7z)
  • 📄 Text files (.txt)
  • 📄 PDF files (.pdf)
  • ⚛️ Angular files
  • 🟢 Svelte files
  • ⚡ Next.js files
  • 🎨 Gatsby files
  • 📦 Webpack files
  • 🔧 Babel files
  • 🧹 ESLint files
  • 💅 Prettier files

All icons are professionally designed and sourced from the VSCode Icons project

🚀 Installation

  1. Open Extensions in VS Code (Ctrl+Shift+X)
  2. Search for "Hello Kitty Theme"
  3. Click Install
  4. Restart VS Code
  5. Open theme selector with Ctrl+K Ctrl+T
  6. Select "Hello Kitty" theme

🎯 Icon Theme

To activate the icon theme:

  1. Open command palette with Ctrl+Shift+P
  2. Type "Preferences: File Icon Theme"
  3. Select "Hello Kitty Icons"

💖 Recommended Font

The theme automatically uses Comic Sans MS font. Recommended fonts:

  • Comic Sans MS (default)
  • Comic Sans
  • Segoe UI
  • Arial

Font Settings

If you experience font rendering issues:

  1. Open VS Code settings with Ctrl+, (Windows/Linux) or Cmd+, (Mac)
  2. Search for "editor.fontFamily"
  3. Enter: 'Comic Sans MS', 'Comic Sans', 'Segoe UI', 'Arial', sans-serif

For terminal:

  1. Search for "terminal.fontFamily"
  2. Enter: 'Comic Sans MS', 'Comic Sans', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace

🎨 Customization

You can customize colors and icons by editing theme files:

  • themes/hello-kitty-color-theme.json - Color theme
  • themes/hello-kitty-icon-theme.json - Icon theme
  • icons/ folder - SVG icons

🔧 Configuration

The theme includes several configuration options:

  • Editor font family: Customizable font settings
  • Terminal font family: Separate terminal font configuration
  • Font size: Adjustable font size (default: 14px)
  • Line height: Optimized for readability (1.4)

🎀 Code Snippets

Hello Kitty theme includes adorable code snippets:

JavaScript/TypeScript Snippets

  • hkr - Hello Kitty React Component
  • hkf - Hello Kitty Function
  • hkl - Hello Kitty Console Log
  • hka - Hello Kitty CSS Animation

TypeScript Snippets

  • hki - Hello Kitty Interface
  • hkrt - Hello Kitty React TypeScript Component
  • hkc - Hello Kitty TypeScript Class

Git Snippets

  • hkgit - Hello Kitty Commit Message
  • hkbug - Hello Kitty Bug Fix
  • hkdoc - Hello Kitty Documentation
  • hkstyle - Hello Kitty Style
  • hkrefactor - Hello Kitty Refactor

🎮 Custom Commands

Use these commands in VS Code command palette (Ctrl+Shift+P):

  • 🎀 Toggle Hello Kitty Font - Switch between Comic Sans and Segoe UI
  • 🎀 Show Hello Kitty Snippets - Display available snippets
  • 🎀 Show Hello Kitty Git Snippets - Display git commit snippets
  • 🎀 Show Hello Kitty Debug Features - Display debug features
  • 🎀 Show Hello Kitty File Icons - Display file icon features
  • 🎀 Toggle Theme Intensity - Adjust theme brightness
  • 🎀 Show Welcome Message - Show welcome modal again

🌟 Contributing

For new icons or color suggestions:

  1. Fork this repository
  2. Make your changes
  3. Submit a pull request

📝 Changelog

Version 1.2.0

  • ✅ Improved code readability with darker, more vibrant pink tones
  • ✅ Enhanced contrast for better text visibility
  • ✅ Fixed font rendering issues
  • ✅ Added Comic Sans MS as default font
  • ✅ Updated color scheme for better syntax highlighting

Version 1.2.0

  • ✅ Initial release with pink and kawaii color scheme
  • ✅ Hello Kitty inspired icons
  • ✅ Custom file icons for different file types

🎀 About

This theme is designed for Hello Kitty fans and anyone who loves cute, pink aesthetics while maintaining excellent code readability. The color scheme is carefully crafted to provide good contrast while staying true to the Hello Kitty aesthetic.

Made with 💖 and lots of pink! 🎀✨