Friendly UI for VSCode

A Visual Studio Code extension that allows you to customize your VSCode UI with custom CSS and JavaScript injection.

Features

• 🎨 Inject custom CSS to modify VSCode's appearance
• 🔧 Inject custom JavaScript to enhance functionality
• 🔄 Manual reload support for style updates
• 🏠 Support for using ~ to reference home directory in paths
• 🛡️ Safe backup and restore of original files
• 🚫 Option to disable VSCode's built-in workbench.js

Installation

1. Install the extension from VSCode Marketplace
2. Restart VSCode after installation

Usage

1. Configure your custom CSS and/or JavaScript file paths in VSCode settings
2. Use the command palette (Ctrl+Shift+P or Cmd+Shift+P) to:
   • Enable custom UI: Friendly UI: Enable Custom CSS and JS
   • Disable custom UI: Friendly UI: Disable Custom CSS and JS
   • Reload styles: Friendly UI: Reload styles (after making changes to your CSS/JS files)

Configuration

Add these settings to your VSCode settings.json:

{
    "friendly-ui.customCssPath": "~/path/to/your/custom.css",
    "friendly-ui.customJsPath": "~/path/to/your/custom.js",
    "friendly-ui.disableWorkbenchJs": false
}

Setting	Description
customCssPath	Path to your custom CSS file
customJsPath	Path to your custom JavaScript file
disableWorkbenchJs	When set to true, disables VSCode's built-in workbench.js when custom JS is enabled

Example Custom CSS

/* Make the sidebar darker */
.sidebar {
    background-color: #1a1a1a;
}

/* Customize the editor's background */
.editor-container {
    background-color: #242424;
}

Notes

• The extension requires a VSCode restart when enabled for the first time
• Use the disable command to revert to original VSCode appearance
• When disableWorkbenchJs is enabled, some built-in VSCode functionality might be affected

Contributing

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

License

This extension is licensed under the MIT License.