📋 Table of Contents
✨ Features
- 🎨 High-contrast dark and light theme inspired by Svelte
- 👀 Optimized for readability and clarity
- 🖥️ Supports all major programming languages
- 🌙 Two variants: Standard and Light
🔥 The Inspiration
The Svelte Theme is a professional and high-contrast VS Code theme inspired by the iconic aesthetic of Svelte. It features the characteristic "Svelte Orange" (#ff3c00) as its primary accent color, set against a deep black background for maximum punch and focus.
The theme aim to provide a clean, modern, and energy-efficient experience during long development sessions, mirroring the efficiency and speed that Svelte brings to web development.
🎨 Preview
Dark Theme
Light Theme
🎨 Color Palette
This theme uses a Svelte-inspired color palette:
| Role |
Color Name |
Hex |
| Background |
Pure Black |
#000000 |
| Foreground |
White |
#ffffff |
| Selection |
Dark Gray |
#262626 |
| Comments |
Gray |
#808080 |
| Cyan |
Light Gray |
#d4d4d4 |
| Green |
Svelte Orange |
#ff3c00 |
| Orange |
Svelte Orange |
#ff3c00 |
| Pink |
Svelte Lighter |
#ff7a4d |
| Red |
Svelte Orange |
#ff3c00 |
| Purple |
Svelte Orange |
#ff3c00 |
| Yellow |
Contrast Gold |
#ffcc00 |
UI Variants
| Variable | Hex | Purpose |
|----------|-----|---------|
| BGDarker | #000000 | Deepest background |
| BGDark | #050505 | Dark panels/sidebars |
| BG | #000000 | Main editor background |
| BGLight | #1a1a1a' | Mid-tone background | | BGLighter | #2a2a2a' | Hover states/highlights |
ANSI Terminal Colors
The terminal colors are balanced for both vibrant accents and readability:
| ANSI |
Name |
Hex |
Bright Hex |
| 0/8 |
Black |
#000000 |
#808080 |
| 1/9 |
Red |
#ff3c00 |
#ff5e26 |
| 2/10 |
Green |
#32cd32 |
#4ee44e |
| 3/11 |
Yellow |
#ffd700 |
#ffeb3b |
| 4/12 |
Blue |
#1e90ff |
#42a5f5 |
| 5/13 |
Magenta |
#ff69b4 |
#ff80ab |
| 6/14 |
Cyan |
#00ced1 |
#4dd0e1 |
| 7/15 |
White |
#ffffff |
#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" and press Enter
- Search for "Svelte"
- Select either "Svelte" or "Svelte Light" from the list
Recommended Settings
For the best experience, add these to your settings.json:
{
"workbench.colorTheme": "Svelte",
"editor.fontFamily": "'Victor Mono', Monaco, Menlo, 'Courier New', monospace",
"editor.fontSize": 16,
"editor.lineHeight": 1.5,
"editor.fontWeight": "600",
"editor.wordWrap": "on",
}
🎨 Theme Variants
- Svelte - Standard dark version with vibrant Svelte orange accents
- Svelte Light - Clean light version for day-time coding
🛠 Development
Prerequisites
Setup
# Install dependencies
pnpm install
# Build the theme
pnpm run build
# Watch for changes and build automatically
pnpm run watch
# Package the extension
pnpm run package
Project Structure
├── src/
│ └── svelte.yml # Theme source file (YAML)
├── theme/
│ ├── svelte.json # Generated theme
│ └── svelte-light.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 iconic aesthetic of Svelte
- Special thanks to the VS Code community for their amazing theming support
- This theme is based on the Dracula Theme schema, with colors adapted for the Svelte aesthetic.
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
