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
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X
/ Cmd+Shift+X
)
- Search for "Omi Theme"
- Click Install
From VSIX File
- Download the
.vsix
file from releases
- In VS Code, go to Extensions
- Click the "..." menu and select "Install from VSIX..."
- Choose the downloaded file
🎨 Theme Selection
Quick Switch
- Press
Ctrl+K Ctrl+T
(Windows/Linux) or Cmd+K Cmd+T
(Mac)
- Select "Omi Dark" or "Omi Light"
Command Palette
- Press
Ctrl+Shift+P
(Windows/Linux) or Cmd+Shift+P
(Mac)
- Type "Preferences: Color Theme"
- 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
- Run
npm run package
to create .vsix
file
- In VS Code, go to Extensions
- Install from VSIX and test the theme
📸 Screenshots
Omi Dark

Omi Light

🤝 Contributing
We welcome contributions! Here's how you can help:
Reporting Issues
- Check existing issues first
- Create a new issue with:
- VS Code version
- OS and version
- Steps to reproduce
- Screenshots if applicable
Suggesting Features
- Open a feature request issue
- Describe the use case
- Provide examples if possible
Code Contributions
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- 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
🔄 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