📋 Table of Contents
✨ Features
- 🎨 Beautiful dark theme inspired by Supabase's brand colors
- 👀 Optimized for long coding sessions
- 🖥️ Supports all major programming languages
- 🎯 Perfect for Supabase developers
- 🌙 Two variants: Standard and Soft
Description
This is the non-official Supabase Theme for Visual Studio Code, inspired by the Supabase brand colors.
🎨 Preview
Base Theme
Soft Variant
🎨 Color Palette
This theme uses a tropical-inspired color palette derived from the Supabase brand with deep forest/emerald aesthetics:
| Role |
Color |
Hex |
Preview |
| Background |
Deep Forest |
#0D1F17 |
 |
| Foreground |
Soft Greenish-White |
#F0F5F1 |
 |
| Selection |
Forest Highlight |
#1C3A2D |
 |
| Comments |
Muted Sage |
#5A8F70 |
 |
| Cyan |
Primary Brand Mint |
#3ECF8E |
 |
| Green |
Mid-tone Green |
#33B074 |
 |
| Orange |
Warm Gold |
#E8A84C |
 |
| Pink |
Soft Rose |
#CF6B8E |
 |
| Purple |
Soft Lavender |
#9B8AE0 |
 |
| Red |
Coral Red |
#E05D57 |
 |
| Yellow |
Bright Lime-Yellow |
#E0D94C |
 |
UI Variants
| Variable |
Hex |
Purpose |
| BGDarker |
#06110C |
Darkest forest |
| BGDark |
#0A1812 |
Dark panels/sidebars |
| BG |
#0D1F17 |
Main editor background |
| BGLight |
#142C22 |
Mid-tone forest |
| BGLighter |
#1C3A2D |
Hover states/highlights |
ANSI Terminal Colors
| ANSI |
Name |
Hex |
Bright Hex |
| 0/8 |
Black |
#0A1812 |
#5A8F70 |
| 1/9 |
Red |
#E05D57 |
#E87872 |
| 2/10 |
Green |
#33B074 |
#3ECF8E |
| 3/11 |
Yellow |
#E0D94C |
#E8E066 |
| 4/12 |
Blue |
#9B8AE0 |
#B0A0F0 |
| 5/13 |
Magenta |
#CF6B8E |
#D880A0 |
| 6/14 |
Cyan |
#3ECF8E |
#5EDAD0 |
| 7/15 |
White |
#F0F5F1 |
#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 "Supabase Theme"
- Select either "Supabase Theme" or "Supabase 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
- Supabase Theme - Vibrant, high-contrast version with the full Supabase color experience
- Supabase Theme (Soft) - Muted, desaturated version for reduced eye strain during long coding sessions
🛠 Development
Prerequisites
Setup
# Install dependencies
pnpm install
# Build the theme
pnpm run build
# Package the extension
pnpm run package
Project Structure
├── src/
│ └── supabase.yml # Theme source file (YAML)
├── theme/
│ ├── supabase.json # Generated theme
│ └── supabase-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 Supabase 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 Supabase 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.
