📋 Table of Contents
✨ Features
- 🎨 Beautiful dark theme inspired by TanStack's brand colors
- 👀 Optimized for long coding sessions
- 🖥️ Supports all major programming languages
- 🎯 Perfect for TanStack developers
- 🌙 Two variants: Standard and Soft
Description
This is the non-official TanStack Theme for Visual Studio Code, inspired by the TanStack brand colors.
🎨 Preview
Base Theme
Soft Variant
🎨 Color Palette
This theme uses a tropical-inspired color palette derived from the TanStack brand with ocean/beach aesthetics:
| Role |
Color |
Hex |
Preview |
| Background |
Deep Ocean |
#0F2A35 |
 |
| Foreground |
White |
#F3F3F3 |
 |
| Selection |
Ocean Highlight |
#1E4555 |
 |
| Comments |
Deep Teal |
#3B7E9F |
 |
| Cyan |
Teal |
#50B195 |
 |
| Green |
Grassy Green |
#6AAB2E |
 |
| Orange |
Coral |
#F68453 |
 |
| Red |
Coral Red |
#D05952 |
 |
| Purple |
TanStack Purple |
#9B8AE0 |
 |
| Yellow |
Lime |
#E7E659 |
 |
UI Variants
| Variable |
Hex |
Purpose |
| BGDarker |
#061419 |
Deepest ocean |
| BGDark |
#0A1D25 |
Dark panels/sidebars |
| BG |
#0F2A35 |
Main editor background |
| BGLight |
#163845 |
Lighter panels |
| BGLighter |
#1E4555 |
Hover states/highlights |
ANSI Terminal Colors
| ANSI |
Name |
Hex |
Bright Hex |
| 0/8 |
Black |
#0A1D25 |
#3B7E9F |
| 1/9 |
Red |
#D05952 |
#F68453 |
| 2/10 |
Green |
#6AAB2E |
#50B195 |
| 3/11 |
Yellow |
#E7E659 |
#F0F5A0 |
| 4/12 |
Blue |
#3B7E9F |
#50B195 |
| 5/13 |
Magenta |
#9B8AE0 |
#B8A8FF |
| 6/14 |
Cyan |
#50B195 |
#7AD9D0 |
| 7/15 |
White |
#F3F3F3 |
#FFFFFF |
🚀 Installation
VS Code Marketplace
Open VSX Registry
🎨 Using the Theme
- Open the Command Palette (
Ctrl+Shift+P or Cmd+Shift+P)
- Type "Preferences: Color Theme" and press Enter
- Search for "TanStack Theme"
- Select either "TanStack Theme" or "TanStack Theme (Soft)" from the list
Recommended Settings
For the best experience, add these to your settings.json:
{
"workbench.colorTheme": "TanStack Theme",
"editor.fontFamily": "'Victor Mono', Monaco, Menlo, 'Courier New', monospace",
"editor.fontSize": 16,
"editor.lineHeight": 1.5,
"editor.fontWeight": "600",
"editor.wordWrap": "on",
}
🎨 Theme Variants
- TanStack Theme - Standard version with vibrant colors
- TanStack Theme Soft - Softer, desaturated version for reduced eye strain
🛠 Development
Prerequisites
Setup
# Install dependencies
pnpm install
# Build the theme
pnpm run build
# Package the extension
pnpm run package
Project Structure
├── src/
│ └── tanstack.yml # Theme source file (YAML)
├── theme/
│ ├── tanstack.json # Generated theme
│ └── tanstack-soft.json
├── scripts/
│ ├── build.js # Build script
│ └── generate.js # Theme generator
└── images/
└── icon.png # Extension icon
🤝 Contributing
Contributions are welcome! If you find any issues or have suggestions for improvements, please feel free to:
- Open an issue
- Submit a pull request
- Share your feedback
📬 Stay Updated
For updates, star this repository and follow me on GitHub.
💖 Credits
- Inspired by the beautiful TanStack brand colors and design
- Special thanks to the VS Code community for their amazing theming support
- This theme is based on the Dracula Theme schema, with colors adapted from the TanStack brand palette featuring tropical/beach aesthetics.
- Thanks to all contributors who help improve this theme
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
