Midnight Dark Theme

A mystical Dark theme for VS Code with purple, cyan, and neon green accents that creates an enchanting coding environment. Perfect for developers who love beautiful, eye-friendly themes with excellent syntax highlighting.

Pre-view

Color Themes

• Midnight Dark
• Midnight High Contrast Dark
• Midnight High Contrast Light
• Midnight Soft
• Midnight Light
• Midnight Ocean
• Midnight Forest
• Midnight Monochrome

Features

• Deep Midnight Background - Easy on the eyes for long coding sessions
• Purple Accents - Beautiful highlighting for functions and variables
• Cyan Keywords - Clear distinction for language keywords and operators
• Neon Green Constants - Vibrant colors for constants and data types
• Soft Pink Strings - Gentle coloring for string literals
• Subtle Gray Comments - Non-intrusive comment styling
• Complete UI Theming - Consistent design across all VS Code elements
• Multi-Language Support - Optimized for 15+ programming languages
• Accessibility Focused - WCAG compliant color contrast ratios
• Terminal Integration - Matching ANSI color scheme
• Git Integration - Color-coded file status indicators
• Bracket Pair Colorization - 6 unique bracket colors with proper hierarchy
• Semantic Token Support - Enhanced TypeScript/JavaScript and Python highlighting
• Professional Language Support - Comprehensive syntax highlighting for PHP, Java, C#, Go, Rust, Docker, YAML, Shell, SQL, XML

Color Palette 🎨

Element	Color	Hex Code	Usage
Background	Deep Blue	#1a1b26	Editor background, main interface
Functions/Variables	Light Purple	#c792ea	Function names, variable declarations
Keywords/Operators	Cyan	#89ddff	Language keywords, operators
Strings	Soft Pink	#f07178	String literals, text content
Constants/Types	Neon Green	#c3e88d	Constants, numbers, data types
Comments	Gray	#5c6370	Comments, documentation
Foreground	Light Blue	#c0caf5	Default text color

Installation

From VS Code Marketplace (Recommended)

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Midnight Dark"
4. Click Install
5. Go to Settings → Color Theme → Select "Midnight Dark"

Manual Installation

1. Download the latest .vsix file from Releases or Marketplace
2. In VS Code, press Ctrl+Shift+P / Cmd+Shift+P
3. Type "Extensions: Install from VSIX"
4. Select the downloaded file
5. Reload VS Code

From Source

git clone https://github.com/extrise/midnight-dark-theme.git
cd midnight-dark-theme
npm install
npm run build

Tip

Use Ctrl+K Ctrl+T (Windows/Linux) or Cmd+K Cmd+T (macOS) to quickly switch between themes!

Supported Languages

The theme includes optimized syntax highlighting for:

• JavaScript/TypeScript - Complete ES6+ support
• Python - Classes, decorators, f-strings
• HTML/CSS - Tags, properties, selectors
• JSON - Data structures, keys, values
• Markdown - Headings, links, code blocks
• JSX/TSX - React components, props
• PHP - Variables, functions, classes
• Java - Classes, annotations, types
• C# - Classes, attributes, types
• Go - Functions, types, packages
• Rust - Functions, macros, types
• Docker - Instructions, keywords
• YAML - Keys, values, anchors
• Shell/Bash - Variables, functions, commands
• SQL - Keywords, functions
• XML - Tags, attributes
• More languages planned!

Note

If you'd like support for a specific language, please open an issue with examples!

Customization

You can customize the theme by modifying your VS Code settings:

{
  "workbench.colorCustomizations": {
    "[Midnight dark]": {
      "editor.background": "#1a1b26",
      "editor.foreground": "#c0caf5"
    }
  },
  "editor.tokenColorCustomizations": {
    "[Midnight dark]": {
      "comments": "#5c6370",
      "keywords": "#89ddff"
    }
  }
}

Important

Custom color modifications will override the theme's default colors. Make sure to maintain good contrast ratios for accessibility!

Contributing

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

Ways to Contribute

• Report Bugs - Found an issue? Open a bug report
• Suggest Features - Have an idea? Request a feature
• Improve Colors - Submit color improvements or new variants
• Documentation - Help improve docs, examples, or translations
• Code - Fix bugs, add features, or optimize performance

Development Setup

1. Fork the repository

   git clone https://github.com/extrise/midnight-dark-theme.git
   cd midnight-dark-theme

2. Install dependencies

   npm install

3. Start development

   npm run dev

4. Test your changes

   • Press F5 to open Extension Development Host
   • Select "Midnight dark" theme
   • Test with different file types

5. Submit a pull request

Tip

Check out our DEVELOP.md for detailed development guidelines and roadmap!

Roadmap

Upcoming Features

• Light Theme Variant - Bright version of Midnight dark ✅ COMPLETED
• High Contrast Variant - Enhanced accessibility ✅ COMPLETED
• Color Customization Panel - Easy theme personalization
• Additional Language Support - More programming languages ✅ COMPLETED
• Theme Variants - Different color combinations
• Semantic Token Support - Enhanced TypeScript/JavaScript highlighting ✅ COMPLETED
• Bracket Pair Colorization - Custom bracket colors ✅ COMPLETED
• Advanced Semantic Highlighting - More language-specific semantic tokens
• Custom Color Schemes - User-configurable color palettes
• Theme Animation Effects - Smooth transitions and micro-interactions

Note

Want to influence our roadmap? Join the discussion and share your ideas!

Statistics

• Total Colors Defined: 250+ UI colors
• Syntax Rules: 80+ token color rules
• Language Support: 15+ programming languages
• File Size: ~150KB (optimized for performance)
• Accessibility: WCAG AA compliant

Troubleshooting

Theme Not Applying

1. Restart VS Code completely
2. Check if theme is selected: Ctrl+K Ctrl+T
3. Verify installation in Extensions panel

Colors Look Different

• Check your monitor's color profile
• Ensure VS Code is updated to latest version
• Disable other color-modifying extensions

Performance Issues

• The theme is optimized and shouldn't affect performance
• If you experience issues, please report them

Caution

If you're using custom CSS extensions or theme modifications, they might conflict with Midnight dark. Try disabling them to isolate issues.

License

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

Author

• GitHub: @nayandas69
• Email: nayanchandradas@hotmail.com
• Portfolio: [Coming Soon]

Acknowledgments

• Thanks to the VS Code team for the excellent theming API
• Inspired by various dark themes in the community
• Special thanks to all contributors and users who provide feedback
• Color palette inspired by modern design trends and accessibility guidelines

Show Your Support

If you like this theme, please:

• ⭐ Star the repository
• 📝 Leave a review on the VS Code Marketplace
• 🐦 Share it with your developer friends

Happy coding with Midnight dark! 🌙✨

Made with 🐸 by nayandas69