Color Theme Customizer for VS Code

A powerful VS Code extension that lets you customize your editor's colors and themes with an intuitive, user-friendly interface. No more manual JSON editing - just point, click, and customize!

Features

Comprehensive Color Customization

• 300+ Color Settings: Access every customizable color in VS Code
• 26 Organized Categories: Colors grouped by UI components (Activity Bar, Editor, Tabs, Panels, etc.)
• Live Preview: See your changes instantly as you customize
• Visual Color Picker: Easy-to-use color picker with hex input

Smart Management

• Theme Switching: Quickly switch between installed themes
• Search Functionality: Find specific color settings instantly
• Modified Color Tracking: See which colors you've changed
• Safe Settings Management: Only modifies your customizations, preserves other settings

Import/Export

• Export Themes: Save your custom color schemes as JSON files
• Import Themes: Load and apply saved color schemes
• Share with Others: Share your custom themes with teammates

User Experience

• Collapsible Categories: Organize your workspace by expanding only what you need
• Responsive Design: Works great on any screen size
• Keyboard Shortcuts: Quick access via Ctrl+Shift+Alt+C (Mac: Cmd+Shift+Alt+C)
• Reset Options: Reset individual colors or all customizations

Installation

From Marketplace (Coming Soon)

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Color Theme Customizer"
4. Click Install

From Source

1. Clone this repository
2. Run npm install
3. Run npm run compile
4. Press F5 to open a new VS Code window with the extension loaded

Usage

Opening the Customizer

Method 1: Command Palette

1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Type "Color Theme Customizer: Open Customizer"
3. Press Enter

Method 2: Keyboard Shortcut

• Press Ctrl+Shift+Alt+C (Windows/Linux)
• Press Cmd+Shift+Alt+C (Mac)

Customizing Colors

1. Browse Categories: Click on category headers to expand/collapse
2. Search Colors: Use the search bar to find specific settings
3. Change Colors:
   • Click the color preview box to open the color picker
   • Or type a hex color directly in the text input
4. See Changes Live: Your changes apply immediately
5. Reset if Needed: Click the "Reset" button on any color to restore default

Switching Themes

1. Use the theme selector dropdown in the top-right
2. Select any installed theme
3. Customize further if desired

Exporting Your Theme

1. Click the "Export" button
2. Choose a location and filename
3. Share the JSON file with others

Importing a Theme

1. Click the "Import" button
2. Select a previously exported JSON file
3. Your colors will be applied immediately

Resetting Everything

1. Click the "Reset All" button
2. Confirm the action
3. All customizations will be removed

Customizable Categories

The extension organizes colors into logical categories:

• Workspace UI: Activity Bar, Side Bar, Status Bar, Title Bar
• Editor: Background, foreground, widgets, and decorations
• Text Elements: Lists, trees, tabs, and panels
• Input Controls: Buttons, inputs, dropdowns, checkboxes
• Git Integration: Decorations for file status
• Developer Tools: Debug toolbar, peek view, merge conflicts
• Advanced: Charts, keyboard shortcuts, settings UI, and more

Settings

The extension stores modified colors in your VS Code settings:

• colorThemeCustomizer.modifiedColors: Array of colors you've customized

All color changes are saved to workbench.colorCustomizations in your user settings.

Color Format

Colors can be specified in various formats:

• Hex: #FF0000 or #FF0000FF (with alpha)
• RGB: rgb(255, 0, 0)
• RGBA: rgba(255, 0, 0, 0.5)

Tips & Tricks

1. Start with a Base Theme: Choose a theme you like, then make small adjustments
2. Use Search: With 300+ colors, search is your friend
3. Export Often: Save your work regularly by exporting
4. Experiment Freely: Use "Reset All" if you want to start over
5. Contrast Matters: Ensure sufficient contrast for readability

Troubleshooting

Colors not applying?

• Make sure you've saved your changes
• Try reloading VS Code (Ctrl+R / Cmd+R)

Lost your customizations?

• Check workbench.colorCustomizations in your settings
• Import your last exported theme file

Extension not loading?

• Check the Output panel (View > Output) for errors
• Make sure you're on VS Code 1.74.0 or later

Requirements

• VS Code 1.74.0 or higher

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License

Support & Feedback

Found a bug or have a feature request? Please open an issue on our GitHub repository.

For questions or support, you can:

• Open an issue on GitHub
• Email: mdshabuj973@gmail.com

Author

Monirul Islam

• Portfolio: https://stackedby-monirul.github.io/portfolio-live/
• GitHub: @StackedBy-Monirul
• LinkedIn: Monirul Islam

Acknowledgments

Built with passion for the VS Code community. If you find this extension helpful, please consider:

• Giving it a star on GitHub
• Rating it on the VS Code Marketplace
• Sharing it with your fellow developers

Enjoy customizing your VS Code experience!