🎉 Available on Multiple Marketplaces!
Pittaya Theme is now published and available for everyone!
✨ Features
- Two Beautiful Variants — Dark and Light themes to match your environment
- Minimalist Design — Clean interface that lets your code shine
- Eye-Comfort Optimized — Carefully crafted palettes to reduce eye strain
- Signature Pittaya Color — Distinctive pink accents inspired by dragon fruit
- Built with TypeScript — Modern, maintainable architecture with automated builds
- Optimized for React/TypeScript — Enhanced syntax highlighting for modern web development
- Complete Go Support — Comprehensive highlighting for Go with structs, interfaces, goroutines, and concurrency primitives
- Enhanced CSS Support — Comprehensive highlighting for CSS, SCSS, Less with selectors, pseudo-classes, at-rules, variables, and functions
- Extended Python Support — Complete highlighting for Python with decorators, type hints, f-strings, and more
- Semantic Highlighting — Advanced token colors for more accurate syntax representation
- Green Accents — Fresh green tones inspired by dragon fruit leaves
- Excellent Readability — High contrast colors for better code comprehension
- Refined Syntax Highlighting — Thoughtfully selected colors for different code elements
- Modern UI — Updated tab styles and interface elements
- Automated Quality Assurance — Build system validates themes for consistency and duplicate detection
🎨 Color Palette
Dark Theme
| Color |
Hex |
Usage |
 Background |
#1a1a1a |
Deep dark background |
 Foreground |
#e8e8e8 |
Clear, readable text |
 Primary |
#ff637e |
Keywords, tags, primary elements |
 Secondary |
#8fd460 |
Functions, methods, brackets |
 Tertiary |
#b8e986 |
Types, attributes, props |
 Strings |
#ffcc66 |
String literals |
 Constants |
#ff9eb3 |
Constants, numbers |
 Comments |
#707070 |
Comments and documentation |
Light Theme
| Color |
Hex |
Usage |
 Background |
#fafafa |
Ultra-light background |
 Foreground |
#2a2a2a |
Dark, readable text |
 Primary |
#d91656 |
Keywords, tags, primary elements |
 Secondary |
#2f9e44 |
Functions, methods, brackets |
 Tertiary |
#2b8a3e |
Types, attributes, props |
 Strings |
#d97900 |
String literals |
 Constants |
#c2255c |
Constants, numbers |
 Comments |
#909090 |
Comments and documentation |
📦 Installation
For VS Code (Official)
Method 1: Via Extensions Panel
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X / Cmd+Shift+X)
- Search for "Pittaya Theme"
- Click Install
- Press
Ctrl+K Ctrl+T and select Pittaya Dark or Pittaya Light
Method 2: Direct Install
Install from VS Code Marketplace →
Method 3: Command Line
code --install-extension pittaya-org.pittaya-theme
For Cursor, Windsurf & Other IDEs
Using Open VSX Registry:
- Open your IDE (Cursor, Windsurf, VSCodium, etc.)
- Go to Extensions panel
- Search for "Pittaya Theme"
- Click Install
- Activate the theme in your IDE settings
Or install directly from:
Open VSX Registry →
Note: Cursor, Windsurf, and many VS Code alternatives use Open VSX Registry instead of the official VS Code Marketplace. Both registries have the same theme version!
Local Development
If you want to contribute or test locally:
Clone this repository:
git clone https://github.com/pittaya-ui/pittaya-theme.git
Copy the theme folder to your VS Code extensions directory:
- Windows:
%USERPROFILE%\.vscode\extensions
- macOS:
~/.vscode/extensions
- Linux:
~/.vscode/extensions
Reload VS Code
🚀 Future Plans
- [x] Enhanced TypeScript/TSX syntax highlighting
- [x] Optimized color scheme for React development
- [x] Green accent colors inspired by dragon fruit leaves
- [x] Semantic token colors for advanced highlighting
- [x] Create extension icon
- [x] Add screenshots and preview images
- [x] Publish to VS Code Marketplace
- [x] Create light theme variant
- [x] Extended Python support with decorators, type hints, and f-strings
- [x] Enhanced CSS/SCSS/Less syntax highlighting
- [x] TypeScript-based build system for maintainability
- [x] Automated theme validation and consistency checks
- [x] Complete Go language support with structs, interfaces, and concurrency primitives
- [ ] Complete syntax highlighting for other major languages (Rust, Java, C++, etc.)
- [ ] Add theme customization options
- [ ] Create comprehensive documentation
- [ ] Community feedback integration
🛠️ Development
For Contributors:
Pittaya Theme uses a modern TypeScript-based build system. Theme files are generated automatically from source code.
Prerequisites
npm install
Building Themes
# Generate theme files
npm run build
# Validate and build
npm run validate
Project Structure
themes/
├── src/
│ ├── types.ts # TypeScript type definitions
│ ├── colors/
│ │ ├── dark.ts # Dark theme color palette
│ │ └── light.ts # Light theme color palette
│ ├── tokens/
│ │ ├── base.ts # Base syntax tokens
│ │ ├── css.ts # CSS-specific tokens
│ │ ├── typescript.ts # TypeScript/JSX tokens
│ │ ├── python.ts # Python tokens
│ │ ├── markdown.ts # Markdown tokens
│ │ └── json.ts # JSON tokens
│ ├── uiColors.ts # VS Code UI colors
│ ├── semanticTokens.ts # Semantic highlighting
│ └── build.ts # Build script
├── pittaya-dark.json # Generated theme (do not edit)
└── pittaya-light.json # Generated theme (do not edit)
Making Changes
- Edit source files in
themes/src/ (not JSON files directly)
- Run build with
npm run build
- Test themes in VS Code
- Submit PR with your changes
See ARCHITECTURE.md for detailed documentation.
🤝 Contributing
Contributions are welcome! We'd love your help to make Pittaya Theme even better.
Ways to contribute:
- 🐛 Report bugs or issues on GitHub Issues
- 💡 Suggest new features or improvements
- 🔨 Submit pull requests (see Development section above)
- ⭐ Leave a review on the Marketplace
- 📝 Improve documentation
Please read our Contributing Guide before submitting a PR.
🎨 Credits
Design
**[Lucas Correia](https://www.linkedin.com/in/lucas-fernandes-correia/)**
_Designer_
Lucas created the beautiful extension icon that represents Pittaya Theme. His excellent design work brings the visual identity of the theme to life.
📄 License
MIT License - feel free to use this theme however you'd like!
| |
