Midnight Emerald
A beautiful dark theme for Visual Studio Code with emerald green accents, enhanced syntax highlighting, and optimized readability for modern web development.
Features
- Dark Background: Deep dark background (#15141b) for reduced eye strain
- Vibrant Syntax Colors: Enhanced token colors for better code readability
- Custom Function Highlighting: Bold green functions (#10b981) for easy identification
- React/JSX Support: Specially styled React components and JSX syntax
- HTML/CSS Enhancements: Distinct colors for HTML tags, attributes, and CSS properties
- Template Literals: Beautiful styling for JavaScript/TypeScript template strings
- Active Indent Guides: Cyan gradient indent guides for better code structure visualization
Color Palette
Primary Colors
- Background:
#15141b
- Foreground:
#f8fafc
- Functions:
#10b981 (Green)
- Variables:
#06b6d4 (Cyan)
- Keywords:
#a855f7 (Purple)
- Strings:
#ffd166 (Yellow)
- React Components:
#61AFEF (Blue)
UI Colors
- Activity Bar:
#0f0e15
- Side Bar:
#0f0e15
- Status Bar:
#0f0e15
- Editor:
#15141b
Installation
From VSIX File
- Download the
.vsix file
- Open VS Code
- Press
Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS)
- Type "Extensions: Install from VSIX..."
- Select the downloaded
.vsix file
From Source
- Clone this repository
- Copy the folder to your VS Code extensions directory:
- Windows:
%USERPROFILE%\.vscode\extensions
- macOS/Linux:
~/.vscode/extensions
- Reload VS Code
- Select the theme:
Ctrl+K Ctrl+T and choose "Midnight Emerald"
Building from Source
# Install vsce (Visual Studio Code Extension Manager)
npm install -g @vscode/vsce
# Package the extension
vsce package
This will create a .vsix file that can be installed in VS Code.
Screenshots
Add screenshots of your theme here
Customization
You can further customize this theme by:
- Opening the theme file:
themes/midnight-emerald-color-theme.json
- Modifying colors in the
colors or tokenColors sections
- Reloading VS Code to see changes
Recommended Settings
For the best experience with this theme, add these settings to your settings.json:
{
"editor.fontLigatures": true,
"editor.semanticHighlighting.enabled": true,
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.guides.indentation": true,
"workbench.tree.indent": 12,
"workbench.tree.renderIndentGuides": "always"
}
License
MIT
Feedback
If you have suggestions or find issues, please create an issue on the GitHub repository.
