Skip to content
| Marketplace
Sign in
Visual Studio Code>Themes>Eclipse Theme MidnightNew to Visual Studio Code? Get it now.
Eclipse Theme Midnight

Eclipse Theme Midnight

Eclipse-Theme

|
9 installs
| (0) | Free
A beautiful dark theme with a midnight variant, inspired by lunar eclipses
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Eclipse Theme Logo Eclipse Theme

A beautiful dark theme inspired by lunar eclipses, designed for people who appreciate a sleek, modern interface with excellent contrast and readability.

🌟 Theme Previews

💻 Editor Preview
Eclipse Theme Editor View

Eclipse Theme in Action

📦 Extension Page
Eclipse Theme Extension Page

Eclipse Theme Extension Page

🎨 Brand Guidelines

Color Palette

Eclipse Theme offers carefully selected color palettes designed to reduce eye strain during long coding sessions while maintaining visual appeal.

🌑 Eclipse Dark Theme

Core Colors

Color Name Hex Usage
#1e1e2e Dark Background #1e1e2e Primary background
#181825 Dark Surface #181825 Secondary background
#cdd6f4 Text #cdd6f4 Primary text
#a6adc8 Subtext #a6adc8 Secondary text

Accent Colors

Color Name Hex Usage
#cba6f7 Lavender #cba6f7 Primary accent
#89b4fa Blue #89b4fa Secondary accent
🌙 Eclipse Midnight Theme

Core Colors

Color Name Hex Usage
#0f0e15 Midnight Background #0f0e15 Primary background
#0a0910 Deep Space #0a0910 Secondary background
#e2e2e2 Moonlight #e2e2e2 Primary text
#a8a8c3 Starlight #a8a8c3 Secondary text

Accent Colors

Color Name Hex Usage
#bb9af7 Cosmic Purple #bb9af7 Primary accent
#7aa2f7 Nebula Blue #7aa2f7 Secondary accent

Usage Guidelines

  • Backgrounds: Use Eclipse Dark (#0f0e15) as the primary background and Eclipse Midnight (#0a0910) for contrast elements
  • Text: Use Moonlight (#e2e2e2) for primary text and Starlight (#a8a8c3) for secondary/disabled text
  • Accents: Use Cosmic Purple (#bb9af7) for primary actions and Nebula Blue (#7aa2f7) for secondary actions
  • Contrast: Ensure text has a minimum contrast ratio of 4.5:1 against background colors

CSS Variables

For web projects, you can use these CSS variables:

:root {
  --eclipse-dark: #0f0e15;
  --eclipse-midnight: #0a0910;
  --moonlight: #e2e2e2;
  --starlight: #a8a8c3;
  --cosmic-purple: #bb9af7;
  --nebula-blue: #7aa2f7;
}

📦 Applications

VS Code Theme

  • Install from Marketplace
  • GitHub Repository

📝 License

Eclipse Theme is licensed under the MIT License. See LICENSE for more information.

📄 License

This project is licensed under the MIT License.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft