Customize VS Code beyond themes
VS Code Aesthetics is an extension that allows for deeper customisation than what normal themes permit, like gradients, wallpapers, glow effects and css animations on anything in the UI.
- Wallpaper support
- Text glow / glass effect
- Various flavors to choose from
- One standard color theme
- Custom CSS injection inside workbench (provide your own CSS stylesheet!)
Download the .vsix extension from the releases page and install it manually. (It's not yet available in the official vscode extensions)
(Official documentation on how to install vscode extensions manually)
On first time usage, make sure to run the Aesthetics: Apply command and change the color theme to Aesthetics Original under Preferences: color theme.
This is the most important command, it needs to be run everytime something changed in your settings.
In the command palette, the command Aesthetics: Apply will apply styling according to settings.
Modify settings in VS Code's setting editor (CTRL + ,) under Extensions > Aesthetics.
Aesthetics also comes with one theme right now available under Preferences: color theme > Aesthetics Original
To disable/enable the glow effect, go in settings (Ctrl + ,), then search for Aesthetics: Enable Wallpaper. After changing the value, you will need to re-run any Aesthetics: Apply command.
You can also in these settings set the url of the wallpaper, right now it works well with http urls.
The opacity of the wallpaper aswell as the blurriness intensity are customisable in settings.
To disable/enable the glow effect, go in settings (Ctrl + ,), then search for aesthetics Enable Glow. After changing the value, you will need to re-run any Aesthetics: Apply command.
To change the theme flavor, go in settings (Ctrl + ,), then search for aesthetics Flavor. After changing the value, you will need to re-run any Aesthetics: Apply command.
To use a custom CSS file, go in settings (Ctrl + ,), search for Aesthetics Custom CSS File and enter the absolute path for the css file you wish to provide. Finally, run the command Aesthetics: Apply.
Uninstall with the command Aesthetics: Remove
Once installed, VS Code will say that it's installation is corrupt.
It's possible that the extension stops working with future VS Code updates. Aesthetics 0.5.0 release was developed on 1.71.2
Everytime VS Code updates it will overwrite the extension's applied custom CSS. You will need to re-apply Aesthetics after every update if you want to keep using it.
When updating the extension, it is preferable to uninstall the old versions of this extension before. Otherwise, because the updated extension commands have changed, all old commands will remain in vscode's command prompt even tough the new version may not contain them, leading to unexpected behaviors. From 0.4 forward, the api should remain the same.
This extension will modify the files in your vscode installation folder and corrupt your installation. You should audit the injection/extension code in the Github repository, mainly in src/core/file-man.ts.
The file in src/injectable/injectors is for live CSS injection, it is the file that is executed at every vscode startup after running Aesthetics: Apply.
On windows: run vscode as admin.
On linux:
# get vscode path
whereis code
# give privileges to user
sudo chown -R <user> <vscode path>
# example
sudo chown -R kali /usr/share/code