vscode-custom-css

To apply custom CSS or JS to Visual Studio Code, follow these steps:

1. Install the extension.
2. Configure your settings.json by adding your files to the vscode_custom_css.imports array. Important: You must use File URLs, not plain file paths.
   • Windows Example: file:///C:/Users/MyUserName/Documents/custom.css (The C:/ part is required).
   • MacOS/Linux Example: file:///Users/MyUserName/Documents/custom.css.
3. Restart VS Code with elevated permissions:
   • Windows: Run as Administrator.
   • MacOS/Linux: Ensure you have ownership of the VS Code installation directory (see Mac and Linux users section).
4. Activate: Open the Command Palette and run Reload Custom CSS and JS.
5. Restart VS Code.

"vscode_custom_css.imports": ["file:///C:/Users/MyUserName/Documents/custom.css"]

The extension requires permission to modify Visual Studio Code's internal files. If VS Code is installed in a directory where your user does not have write access, you must claim ownership of the installation directory.

Run the following command in your terminal (adjusting the path if necessary):

sudo chown -R $(whoami) "$(which code)"
sudo chown -R $(whoami) /usr/share/code

Common installation paths:

• MacOS: /Applications/Visual Studio Code.app/Contents/MacOS/Electron
• MacOS (Insiders): /Applications/Visual Studio Code - Insiders.app/Contents/MacOS/Electron
• Linux: /usr/share/code, /usr/lib/code/, or /opt/visual-studio-code

The vscode_custom_css.imports setting supports VSCode variables and environment variables within the File URIs. The extension replaces these variables with their actual values before parsing the path.

Supported VSCode Variables:

• ${cwd}
• ${userHome}
• ${workspaceFolder}
• ${execPath}
• ${pathSeparator}
• ${/}

Environment Variables:

• ${env:ENV_VAR_NAME}
• ${env:ENV_VAR:defaultvalue} (with fallback value)

Note: ${workspaceFolder} refers to the root directory of the currently open workspace.

"vscode_custom_css.imports": ["file://${userHome}/.config/vscode-styles.css"]

Because this extension modifies VS Code's internal files (specifically electron-browser/index.html), Visual Studio Code may report that it is 'corrupted'.

Solutions:

1. Click "Don't show again" on the warning.
2. Install the Fix VSCode Checksums Next extension to resolve the checksum mismatch.

Use the Command Palette (F1, Ctrl+Shift+P, or Cmd+Shift+P) to access the following commands:

• Enable Custom CSS and JS: Enables the custom CSS/JS URLs listed in your vscode_custom_css.imports setting.
• Disable Custom CSS and JS: Disables custom CSS.
• Reload Custom CSS and JS: Disables and then re-enables the custom styles (useful after changing configuration).