Xerobi Themes

A sophisticated theme collection for VS Code featuring ocean-inspired colors with vibrant cyan accents. Includes both Dark and Light variants for all-day coding comfort.

Themes Included

🌊 Xerobi Dark Ocean

Deep ocean blues with vibrant cyan accents for comfortable night coding.

☀️ Xerobi Light Ocean

Crisp whites with ocean blue highlights for bright, clear daytime coding.

Preview

Both themes share the same elegant color philosophy:

• Ocean Blues: Multiple shades of cyan and blue for depth
• Vibrant Accents: Cyan for functions, green for strings, purple for keywords
• Enhanced Readability: Carefully selected contrast ratios for optimal code reading
• Semantic Consistency: Same color meanings across both themes

Color Palette

Dark Theme

• Backgrounds: #010412, #0b1223, #0f172a (Deep ocean)
• Accents: #22d3ee, #06b6d4, #7dd3fc (Bright cyan)
• Text: #cbd5e1, #94a3b8 (Soft gray-blue)

Light Theme

• Backgrounds: #ffffff, #f8fafc, #f1f5f9 (Clean white/slate)
• Accents: #0891b2, #0369a1, #0e7490 (Deep cyan)
• Text: #334155, #1e293b (Dark gray-blue)

Shared Syntax Colors

• Functions: Cyan (#22d3ee dark / #0369a1 light)
• Strings: Green (#34d399 dark / #15803d light)
• Keywords: Purple (#c084fc dark / #7e22ce light)
• Classes: Yellow/Orange (#fbbf24 dark / #d97706 light)
• Operators: Orange (#f59e0b dark / #b45309 light)
• Errors: Red (#f87171 dark / #dc2626 light)

Installation

From VSIX (Recommended)

1. Download the .vsix file from releases
2. Open VS Code
3. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
4. Click the ... menu → Install from VSIX...
5. Select the downloaded file

Manual Installation

1. Clone this repository
2. Copy the folder to your VS Code extensions directory:
   • Windows: %USERPROFILE%\.vscode\extensions
   • macOS: ~/.vscode/extensions
   • Linux: ~/.vscode/extensions
3. Restart VS Code
4. Go to Preferences > Color Theme and select either:
   • Aaira Dark Ocean for dark mode
   • Aaira Light Ocean for light mode

From Marketplace (Coming Soon)

Search for "Aaira Ocean" in the VS Code Extensions marketplace

Features

✨ Semantic Highlighting - Enhanced syntax coloring for TypeScript, JavaScript, Python, and more
🎨 Comprehensive Coverage - Every UI element carefully themed
👁️ Eye Comfort - Optimized for long coding sessions
🔧 Bracket Colorization - Multi-level bracket highlighting
📊 Git Integration - Clear diff and decoration colors
🐛 Debug Support - Distinct debugging UI colors
⚡ Terminal Theming - Cohesive ANSI color palette

Language Support

Optimized syntax highlighting for:

• JavaScript / TypeScript / React / Vue
• Python
• Go
• HTML / CSS / SCSS
• JSON / YAML
• Markdown
• And many more...

Customization

You can customize any color in your settings.json:

{
  "workbench.colorCustomizations": {
    "[Xerobi Dark Theme]": {
      "editor.background": "#0a0f1a",
      "activityBar.background": "#000000"
    },
    "[Xerobi Light Theme]": {
      "editor.background": "#fafbfc",
      "activityBar.background": "#f0f4f8"
    }
  },
  "editor.tokenColorCustomizations": {
    "[Xerobi Dark Theme]": {
      "comments": "#708090"
    },
    "[Xerobi Light Theme]": {
      "comments": "#6b7280"
    }
  }
}

Pairing Recommendations

These themes pair beautifully with:

• Font: JetBrains Mono, Fira Code, Cascadia Code
• Icon Theme: Material Icon Theme (Ocean variant for dark, Light variant for light)
• Chrome Themes:
  • Aaira Dark Cyan Theme (for dark mode)
  • Create a matching light Chrome theme (coming soon)

Screenshots

Contributing

Found a bug or have a suggestion? Please open an issue on GitHub!

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Credits

Created by Xerobi Lab

Inspired by the Xerobi Lab design aesthetic

Built with attention to detail and developer experience in mind

Enjoy coding in the deep ocean! 🌊