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

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"
}

Example Custom CSS

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

/* Customize the editor's background */
.editor-container {
    background-color: [#242424](https://github.com/FreeIdom/vscode-friendly-ui/issues/242424);
}

Notes

• The extension requires a VSCode restart when enabled for the first time
• Use the disable command to revert to original VSCode appearance

Contributing

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

License

This extension is licensed under the MIT License.