Skip to content
| Marketplace
Sign in
Visual Studio Code>Themes>super-cool-themeNew to Visual Studio Code? Get it now.
super-cool-theme

super-cool-theme

plus0-water

|
9 installs
| (0) | Free
super cool theme
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Super Cool Theme

A sophisticated dark theme for Visual Studio Code with carefully crafted syntax highlighting and consistent color relationships.

✨ Features

🎨 Unified Color Philosophy

  • Headers/Keys: Green (#19F9D8) - For property names, object keys, YAML keys, CSS properties
  • Values/Content: Purple (#A78BFA) - For property values, strings, numbers, booleans
  • Active Highlights: Light Pink - For current line, active selections, focused elements

📁 File Type Support

  • JSON: Keys in green, values in purple
  • YAML: Keys in green, values in purple
  • CSS/SCSS: Property names in green, values in purple
  • TypeScript/JavaScript: Enhanced syntax highlighting with semantic tokens
  • HTML/XML: Consistent tag and attribute coloring
  • Markdown: Rich formatting with hierarchical heading colors

🖱️ Interface Highlights

  • Editor: Light pink current line highlight
  • Explorer: Light pink active file background
  • Tabs: Light pink active and hover states
  • Lists: Light pink selection and focus states
  • Sidebar: Consistent light pink drop zones

🚀 Installation

Via VSIX File

  1. Download the latest .vsix file from releases
  2. Install using VS Code command: code --install-extension super-cool-theme-x.x.x.vsix

Via Marketplace

Search for "Super Cool Theme" in the VS Code Extensions marketplace.

🛠️ Development

Prerequisites

  • Node.js and npm
  • VS Code Extension CLI (vsce)

Scripts

# Build the theme
npm run build

# Preview changes (build + uninstall + install)
npm run preview

# Uninstall current version
npm run uninstall

# Install built version
npm run install

# Publish to marketplace
npm run publish

# Update version and build
npm run update-version

Development Workflow

  1. Make changes to themes/super-cool-theme-color-theme.json
  2. Run npm run preview to test changes
  3. Repeat until satisfied
  4. Commit and publish

🎯 Design Principles

Color Consistency

All file formats follow the same key-value color relationship:

  • Configuration files (JSON, YAML, TOML)
  • Stylesheets (CSS, SCSS, LESS)
  • Markup languages (HTML, XML, JSX)

Visual Hierarchy

  • Primary elements (keywords, types): Distinct bright colors
  • Secondary elements (operators, punctuation): Muted colors
  • Background highlights: Subtle, non-distracting pink tones

Accessibility

  • High contrast ratios for readability
  • Consistent color meanings across contexts
  • Subtle transparency for layered elements

📝 Version History

  • v0.0.5: Added light pink highlights for active elements
  • v0.0.4: Fixed key-value color relationships across file types
  • v0.0.3: Enhanced JSON syntax highlighting
  • v0.0.2: Added comprehensive YAML support
  • v0.0.1: Initial release

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Test with npm run preview
  5. Submit a pull request

📄 License

This theme is released under the MIT License.

💡 Inspiration

Designed for developers who appreciate:

  • Consistent visual language across file types
  • Subtle but effective highlighting
  • Clean, modern aesthetics
  • Reduced eye strain during long coding sessions

Enjoy coding with style! ✨

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