Apollo Theme for VS Code

A retro pixel art color theme that brings the nostalgic Apollo color palette to your VS Code editor. Experience a visually appealing coding environment with carefully selected colors that reduce eye strain while maintaining excellent readability and code distinction.

Apollo Theme Preview

Features

Dual Theme Support: Both dark and light variants using the same Apollo color palette
Comprehensive Syntax Highlighting: Optimized for JavaScript, TypeScript, HTML, CSS, JSON, Markdown, and more
Semantic Token Support: Enhanced highlighting with language server integration
Accessibility Focused: Carefully tested contrast ratios for comfortable extended coding sessions
Retro Aesthetic: 48-color Apollo palette inspired by classic pixel art games
Complete UI Coverage: All VS Code interface elements styled with cohesive Apollo colors

Installation

From VS Code Marketplace (Recommended)

Open VS Code
Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
Search for "Apollo Theme"
Click "Install"
Go to Settings → Color Theme and select "Apollo Dark" or "Apollo Light"

Manual Installation

Download the latest .vsix file from Releases
Open VS Code
Press Ctrl+Shift+P / Cmd+Shift+P to open Command Palette
Type "Extensions: Install from VSIX"
Select the downloaded .vsix file
Restart VS Code
Go to Settings → Color Theme and select "Apollo Dark" or "Apollo Light"

From Source

git clone https://github.com/lufutu/apollo-vscode-theme.git
cd apollo-vscode-theme/apollo-theme
npm install -g @vscode/vsce
vsce package
code --install-extension apollo-theme-1.0.0.vsix

Theme Variants

Apollo Dark

Perfect for low-light environments and extended coding sessions. Features dark backgrounds with bright, vibrant syntax highlighting.

Apollo Dark Theme

Apollo Light

Ideal for well-lit environments and daytime coding. Uses light backgrounds with carefully adjusted contrast for optimal readability.

Apollo Light Theme

Color Palette

The Apollo theme uses a carefully curated 48-color palette organized into thematic groups:

Primary Colors

Blues/Teals: #172038 → #a4dddb (6 shades)
Greens: #19332d → #d0da91 (6 shades)
Browns/Oranges: #4d2b32 → #e7d5b3 (6 shades)
Warm Tones: #341c27 → #e8c170 (6 shades)
Purples/Magentas: #241527 → #da863e (6 shades)
Deep Purples: #1e1d39 → #df84a5 (6 shades)
Grayscale: #090a14 → #ebede9 (10 shades)

Syntax Highlighting Colors

Element	Dark Theme	Light Theme
Keywords	`#4f8fba`	`#3c5e8b`
Strings	`#a8ca58`	`#468232`
Comments	`#577277`	`#394a50`
Variables	`#a4dddb`	`#253a5e`
Functions	`#e8c170`	`#884b2b`
Classes	`#da863e`	`#752438`
Numbers	`#c65197`	`#7a367b`
Operators	`#a8b5b2`	`#202e37`

Language Support

The Apollo theme provides optimized syntax highlighting for:

JavaScript/TypeScript: Enhanced semantic highlighting, clear distinction between types and values
HTML: Distinct colors for tags, attributes, and content
CSS/SCSS/Less: Comprehensive support for selectors, properties, and values
JSON: Clear key-value distinction with proper nesting visualization
Markdown: Beautiful formatting for headers, links, code blocks, and emphasis
Python: Full syntax support with semantic highlighting
React/JSX: Optimized for component-based development
Vue: Template and script section highlighting
PHP: Complete syntax coverage
And many more...

Accessibility

The Apollo theme prioritizes accessibility with:

WCAG AA Compliant: All text meets minimum contrast ratio requirements (4.5:1)
Color Blind Friendly: Tested with various color vision deficiencies
High Contrast Support: Compatible with VS Code's high contrast mode
Reduced Eye Strain: Carefully balanced colors for extended coding sessions

Customization

You can customize the theme by adding overrides to your VS Code settings:

{
  "workbench.colorCustomizations": {
    "[Apollo Dark]": {
      "editor.background": "#0a0b15"
    }
  },
  "editor.tokenColorCustomizations": {
    "[Apollo Dark]": {
      "comments": "#6a7d82"
    }
  }
}

Screenshots

JavaScript/TypeScript

JavaScript Example

HTML/CSS

HTML/CSS Example

JSON

JSON Example

Markdown

Markdown Example

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

Clone the repository
Open in VS Code
Install dependencies: npm install
Run tests: npm test
Make your changes
Test thoroughly with npm run test:all
Submit a pull request

Testing

The theme includes comprehensive automated tests:

npm run test:all          # Run all tests
npm run test:contrast     # Test contrast ratios
npm run test:validation   # Validate theme structure
npm run test:installation # Test installation process

Changelog

See CHANGELOG.md for a detailed history of changes.

License

MIT License - see LICENSE for details.

Credits

Apollo Color Palette: Inspired by classic pixel art aesthetics
Theme Development: lufutu
Community: Thanks to all contributors and users providing feedback

Support

Issues: GitHub Issues
Discussions: GitHub Discussions

Apollo Color Palette Documentation

Enjoy coding with the Apollo theme! ✨

If you like this theme, please consider:

⭐ Starring the repository
📝 Leaving a review on the VS Code Marketplace
🐛 Reporting issues or suggesting improvements
💝 Sharing with fellow developers

Apollo Theme

lufutu