VS Code Customizer 🎨

A collection of beautiful and customizable themes for Visual Studio Code that enhance your coding experience. This repository contains 9 carefully crafted color schemes and settings to make your VS Code environment both aesthetically pleasing and functional.

Choose from modern neon themes, nature-inspired palettes, GitHub-style dark mode, night sky aesthetics, fire gradients, and deep forest themes. Each theme is designed with readability and visual appeal in mind.

Available Themes

1. Color.css - Modern Dark Theme

themes/Color.css

Color Palette:

A sleek dark theme with vibrant syntax highlighting and a modern look.

• Custom syntax highlighting with fresh colors
• Dark background with neon accents
• Optimized for readability
• Perfect for long coding sessions

2. Ecotheme.css - Nature Theme 🌲

themes/Ecotheme.css

Color Palette:

A nature-inspired theme that brings the outdoors to your code editor.

• Forest greens and lake blues
• Nature-inspired syntax highlighting
• Warm oak accents
• Easy on the eyes

3. GitStyle.css - GitHub Dark Style 🐙

themes/GitStyle.css

Color Palette:

GitHub-inspired dark theme with green and red accents.

• GitHub's signature color palette
• Green for success/additions
• Red for errors/deletions
• Blue and purple for code elements
• Clean, professional look

4. ModernNight.css - Night Sky Theme 🌃

themes/ModernNight.css

Color Palette:

Modern dark theme with purple, red, and blue variants creating a night sky aesthetic.

• Deep purple and neon pink
• Electric blue accents
• Hot pink for control flow
• Subtle glow effects
• Perfect for night coding

5. FireGradient.css - Fire Theme 🔥

themes/FireGradient.css

Color Palette:

Tailwind-inspired warm gradient from rich blacks to bright oranges and yellows.

• Fire-like color progression
• Rich blacks to warm yellows
• Orange and red accents
• Warm, energetic feel
• Fire glow effects

6. ForestDepth.css - Deep Forest Theme 🌿

themes/ForestDepth.css

Color Palette:

Nature-inspired green gradient from dark forest to bright mindaro.

• Deep forest base colors
• Rich woodland tones
• Natural green progression
• Bright yellow-green highlights
• Organic, layered design

7. Andromeda.css - Galaxy Theme 🌌

themes/Andromeda.css

Color Palette:

A theme inspired by the Andromeda galaxy, with a dark background and vibrant, cosmic colors.

• Dark, space-like background
• Vibrant cyan, magenta, and yellow
• Cosmic blue and green accents
• High-contrast and readable

8. EmeraldMatte.css - Green & Gold Theme 🌿

themes/EmeraldMatte.css

Color Palette:

A sophisticated theme with a matte finish, featuring emerald greens, gold yellows, and sky blue accents on a zinc background.

• Matte zinc background
• Emerald green and gold yellow highlights
• Sky blue accents for a touch of color
• Smooth and elegant look

9. DesertNight.css - Desert Night Theme 🏜️

themes/DesertNight.css

Color Palette:

A warm and inviting theme inspired by a desert at night, with a palette of charcoal, persian green, saffron, sandy brown, and burnt sienna.

• Warm desert-inspired colors
• Charcoal and persian green base
• Saffron, sandy brown, and burnt sienna accents
• Cozy and comfortable for coding

Features

• Custom syntax highlighting
• Carefully selected color combinations
• Enhanced UI elements
• Optimized sidebar and activity bar
• Beautiful line numbers and cursor
• Custom git decoration colors

Installation

Step 1: Get the Files

Clone this repository:

git clone https://github.com/lakipop/VScode-Customizer.git

Step 2: Install Required Extension

1. Install the "Custom CSS and JS Loader" extension
2. Extension ID: be5invis.vscode-custom-css
3. Install from the Custom CSS and JS Loader extension page

Step 3: Setup Theme Files

1. Create a permanent folder for themes (e.g., VSThemes in your Documents)
2. Copy the contents of the themes folder to your chosen location
3. Note down the full path to your theme folder

Step 4: Configure VS Code

1. Open VS Code Settings:

   • Press Ctrl+, (Windows/Linux) or Cmd+, (macOS)
   • Click the "Open Settings (JSON)" icon in the top-right corner

2. Add these settings to your settings.json:

   {
     "workbench.colorTheme": "Vivid Black",
     "vscode_custom_css.imports": [
       "file:///C:/Users/YourUsername/Documents/VSThemes/Color.css"  // Update this path!
     ]
   }

3. Update the path in vscode_custom_css.imports:

   • Use your actual theme file path
   • Use forward slashes (/) not backslashes
   • Include file:/// prefix
   • Windows example: file:///C:/Users/Username/Documents/VSThemes/Color.css
   • macOS/Linux example: file:///home/username/Documents/VSThemes/Color.css

Step 5: Enable the Theme

1. Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
2. Type "Enable Custom CSS and JS"
3. Select and run the command
4. Click "Restart" when prompted

Troubleshooting

If the theme doesn't appear:

• Verify file paths in settings.json are correct
• Run VS Code as administrator once
• Try the "Enable Custom CSS and JS" command again
• Reload VS Code window
• Check extension is properly installed
• Ensure no syntax errors in settings.json

For any issues, please check the issues page or create a new one.

1. Applying themes:

   • The theme colors will be automatically applied
   • If colors don't update immediately, try:
     • Reload VS Code window (Ctrl+Shift+P or Cmd+Shift+P, then type "Reload Window")
     • Or restart VS Code completely

2. Troubleshooting:

   • Make sure all file paths in settings.json match your actual file locations
   • Check that the theme files are properly copied to your .vscode folder
   • Verify there are no syntax errors in your settings.json

Preview

(Coming soon: Theme preview screenshots)

Customization

You can customize these themes further by modifying:

• settings.json: General VS Code settings and UI colors
• Color.css: Main syntax highlighting colors
• Ecotheme.css: Nature-inspired theme colors

Upcoming Features

Stay tuned for:

• More theme variations
• Light theme versions
• Theme preview screenshots
• Custom icon packs
• Additional language-specific highlighting
• Theme generator tool
• Community-contributed themes

Contributing

Feel free to contribute to this project by:

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a new Pull Request

License

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

Support

If you like this theme collection, don't forget to give it a star ⭐️

---

Created with 💚 by lakipop