Omi Theme

A modern, eye-friendly Visual Studio Code theme optimized for web and mobile development workflows. Features both light and dark variants with thoughtful color palettes designed for long coding sessions.

✨ Features

🎨 Two Beautiful Variants

• Omi Dark: Low-contrast, eye-friendly dark mode perfect for night coding
• Omi Light: Bright, clean light mode ideal for daytime development

🚀 Optimized for Modern Development

• Web Development: JavaScript, TypeScript, React, Vue, Angular
• Mobile Development: Flutter, Dart, React Native (Enhanced Flutter/Dart syntax highlighting)
• Backend Development: Node.js, Python, Java, C#
• Full-Stack: Comprehensive syntax highlighting for all major languages

🎯 Enhanced Developer Experience

• Git Integration: Clear visual indicators for added, modified, and deleted files
• Error Highlighting: Prominent error and warning indicators
• Accessibility: High contrast ratios and colorblind-friendly palettes
• Customizable: Easy to customize with VS Code's built-in theming system
• Material Design: Light theme follows Google's Material Design principles

🎨 Color Palette

Omi Light (Material Theme Lighter)

• Primary Background: #F3F3F3 (Light gray)
• Sidebar Background: #FAFAFA (Off-white)
• Primary Text: #80CBC4 (Teal)
• Keywords: #7C4DFF (Purple)
• Strings: #91B859 (Green)
• Functions: #6182B8 (Blue)
• Numbers/Constants: #F76D47 (Orange)
• Classes: #FFB62C (Yellow)
• Operators: #39ADB5 (Teal)
• Tags: #FF5370 (Pink)
• Git Added: #91B859 (Green)
• Git Modified: #FFB62C (Yellow)
• Git Deleted: #E53935 (Red)

Omi Dark

• Primary Background: #252526 (Slate blue-gray)
• Primary Text: #eeffff (Off-white)
• Keywords: #C792EA (Purple)
• Strings: #C3E88D (Green)
• Functions: #82AAFF (Blue)
• Numbers/Constants: #F78C6C (Orange)
• Classes: #FFCB6B (Yellow)
• Operators: #89DDFF (Cyan)
• Tags: #FF5370 (Pink)
• Git Added: #C3E88D (Green)
• Git Modified: #FFCB6B (Yellow)
• Git Deleted: #FF5370 (Pink)

🚀 Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Omi Theme"
4. Click Install

From VSIX File

1. Download the .vsix file from releases
2. In VS Code, go to Extensions
3. Click the "..." menu and select "Install from VSIX..."
4. Choose the downloaded file

🎨 Theme Selection

Quick Switch

1. Press Ctrl+K Ctrl+T (Windows/Linux) or Cmd+K Cmd+T (Mac)
2. Select "Omi Dark" or "Omi Light"

Command Palette

1. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
2. Type "Preferences: Color Theme"
3. Choose your preferred Omi variant

Settings

Add to your settings.json:

{
  "workbench.colorTheme": "Omi Dark"
}

🛠️ Customization

Color Customizations

You can customize specific colors without losing the theme's design:

{
  "workbench.colorCustomizations": {
    "[Omi Dark]": {
      "editor.background": "#252526",
      "sideBar.background": "#252526"
    },
    "[Omi Light]": {
      "editor.background": "#F3F3F3",
      "sideBar.background": "#FAFAFA"
    }
  }
}

Token Color Customizations

Customize syntax highlighting:

{
  "editor.tokenColorCustomizations": {
    "[Omi Dark]": {
      "textMateRules": [
        {
          "scope": ["keyword"],
          "settings": {
            "foreground": "#C792EA"
          }
        }
      ]
    },
    "[Omi Light]": {
      "textMateRules": [
        {
          "scope": ["keyword"],
          "settings": {
            "foreground": "#7C4DFF"
          }
        }
      ]
    }
  }
}

Font Customizations

Recommended font settings for the best experience:

{
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace",
  "editor.fontSize": 14,
  "editor.fontLigatures": true,
  "editor.lineHeight": 1.5
}

Color Palette Structure

• Base Colors: Shared primary colors and semantic tokens
• Dark Theme: Complete dark mode color definitions
• Light Theme: Complete light mode color definitions

🎯 Supported Languages

Primary Focus

• JavaScript/TypeScript: Full ES6+ syntax support
• React/JSX: Component syntax highlighting
• Python: Modern Python 3.x features
• Java: Enterprise Java development
• Dart/Flutter: Enhanced mobile app development with optimized syntax highlighting
• HTML/CSS: Web markup and styling

Additional Support

• C#/.NET: ASP.NET and Unity development
• Go: Backend and cloud development
• Rust: Systems programming
• PHP: Web development
• Ruby: Web and automation
• Swift: iOS development
• Kotlin: Android development

🔧 Development

Prerequisites

• Node.js 16+
• npm or yarn
• VS Code Extension Development Host

Test Locally

1. Run npm run package to create .vsix file
2. In VS Code, go to Extensions
3. Install from VSIX and test the theme

📸 Screenshots

Omi Dark

Omi Light

🤝 Contributing

We welcome contributions! Here's how you can help:

Reporting Issues

1. Check existing issues first
2. Create a new issue with:
   • VS Code version
   • OS and version
   • Steps to reproduce
   • Screenshots if applicable

Suggesting Features

1. Open a feature request issue
2. Describe the use case
3. Provide examples if possible

Code Contributions

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

Development Guidelines

• Follow the existing MVC architecture
• Add tests for new features
• Update documentation
• Maintain color accessibility standards

📄 License

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

🙏 Acknowledgments

• Inspired by modern design systems and developer tools
• Built with accessibility and developer productivity in mind
• Thanks to the VS Code team for the excellent theming system
• Community feedback and contributions

📞 Support

• Issues: GitHub Issues
• Email: adbytee@gmail.com

🔄 Changelog

v1.0.7 (Latest)

• Change find match colors across dark and light themes for improved visibility. Remove outdated binary files for previous theme versions.

v1.0.5

• Material Theme Lighter: Complete redesign of light theme with Material Design color scheme
• New Color Palette: Teal primary color (#80CBC4) with purple (#7C4DFF), green (#91B859), blue (#6182B8), and orange (#F76D47) accents
• Enhanced UI: Updated sidebar (#FAFAFA), activity bar, status bar, and all UI components
• Better Contrast: Improved readability with carefully selected color combinations
• Modern Aesthetics: Clean, professional appearance following Material Design principles
• Git Integration: Updated git decoration colors to match the new Material Design palette

v1.0.2

• Enhanced Flutter/Dart syntax highlighting
• 37+ Flutter/Dart-specific token rules
• Optimized colors for better code visibility
• Reduced eye strain for long coding sessions
• Comprehensive Flutter/Dart documentation

v1.0.0

• Initial release
• Omi Dark theme
• Omi Light theme
• Comprehensive syntax highlighting
• Git integration
• Accessibility features

Made with ❤️ for developers who care about their coding environment