Skip to content

sammykumar/synthwave-dark-vscode

Β 
Β 

Repository files navigation

SynthWave Dark

Visual Studio Marketplace Version Installs

A Dark Synthwave/Monokai/Apple Intelligence inspired colour theme to satisfy your neon dreams.

SynthWave Dark Theme Banner SynthWave Dark Theme Preview

Features

  • ⭐️ Dark Synthwave/Apple Intelligence - Inspired by retro aesthetics with modern Apple Intelligence gradients
  • ✨ Neon Glow Effects - Optional configurable glow effects for enhanced visual experience
  • πŸš€ Optimized for JavaScript/TypeScript - Carefully crafted syntax highlighting for modern development
  • 🎨 Monokai-Inspired Palette - Classic color scheme with vibrant neon accents
  • πŸŒ™ Dark Background - Easy on the eyes with high contrast for readability

Neon Glow Effects

✨ Transform your coding experience with optional neon glow effects!

The theme includes configurable neon glow effects for a more vibrant retro experience. These effects are disabled by default and can be enabled through VS Code settings or commands.

πŸ› οΈ How to Enable Glow Effects

Method 1: Using VS Code Settings

  1. Open VS Code settings (Ctrl+, or Cmd+,)
  2. Search for "SynthWave Dark"
  3. Check the "Enable neon glow effects" option

Method 2: Using Command Palette

  1. Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
  2. Type "Synthwave Dark: Enable Glow"
  3. Select the command to enable glow effects
  4. Reload VS Code when prompted

πŸ”§ Available Commands

  • Synthwave Dark: Enable Glow - Enables neon glow effects
  • Synthwave Dark: Clean Up Workbench HTML - Removes glow effect modifications

⚠️ Compatibility Note: Glow effects require VS Code version 1.12 or newer. If you enable glow effects on an older version, they will be automatically disabled and you'll see a warning message.

πŸ“¦ Installation

  1. Open Extensions in Visual Studio Code (Ctrl+Shift+X or Cmd+Shift+X)
  2. Search for SynthWave Dark
  3. Click Install
  4. Go to Code > Preferences > Color Theme and select SynthWave Dark
  5. (Optional) Enable glow effects using the methods described above

🎨 Recommended Settings

For the best experience with SynthWave Dark, consider these VS Code settings:

{
  "workbench.colorTheme": "SynthWave Dark",
  "synthwaveDark.enableGlow": true,
  "editor.fontSize": 14,
  "editor.fontFamily": "Fira Code, JetBrains Mono, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on"
}

πŸ”— Repository

This extension is open source and welcomes contributions!

GitHub Issues License

🀝 Contributing

Contributions are welcome! Please follow these steps:

  1. 🍴 Fork the repository
  2. 🌿 Create a new branch (git checkout -b feature/your-feature)
  3. πŸ’Ύ Commit your changes (git commit -m 'Add some feature')
  4. πŸš€ Push to the branch (git push origin feature/your-feature)
  5. πŸ“ Open a pull request

πŸ› Reporting Issues

Found a bug or have a feature request? Please open an issue with:

  • Clear description of the problem
  • Steps to reproduce
  • Your VS Code version
  • Screenshots (if applicable)

πŸ‘¨β€πŸ’» Author

Sammy Kumar
GitHub VS Code Marketplace

πŸ“„ License

MIT License - see LICENSE for details


🌟 Show Your Support

If you like this theme, please:

  • ⭐ Star the repository
  • πŸ”„ Share it with your developer friends
  • πŸ’¬ Leave a review on the VS Code Marketplace
  • πŸ› Report any issues you find

Happy Coding! πŸš€

πŸ’‘ Pro Tip: This theme works best with the following VS Code settings for an optimal retro coding experience:

{
  "workbench.colorTheme": "SynthWave Dark",
  "synthwaveDark.enableGlow": true,
  "editor.fontSize": 14,
  "editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.cursorBlinking": "smooth"
}

About

Synthwave Dark inspired colour theme for VS Code πŸŒ…πŸ•Ά

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 57.6%
  • CSS 24.8%
  • JavaScript 17.6%