Configuration

The Custom CSS and JS extension is configured entirely within your Visual Studio Code settings.json file. You can open this file by running the Preferences: Open User Settings (JSON) command from the Command Palette (Ctrl+Shift+P).

vscode_custom_css.imports

This is the most important setting. It defines which CSS and JavaScript files to load.

  • Type: Array of strings
  • Default: []
  • Description: A list of URLs pointing to the CSS and JS files you want to inject.

Paths Must Be URLs

The items in this array must be valid URLs, not simple file system paths. For local files, this means using the file:// URI scheme.

Local File URL Examples

  • Windows: Note the required drive letter and forward slashes.

    "vscode_custom_css.imports": ["file:///C:/Users/YourUser/styles/custom.css"]

  • macOS & Linux: The path starts from the root directory.

    "vscode_custom_css.imports": ["file:///Users/YourUser/styles/custom.css"]

Remote File URL Example

You can also load files directly from the web.

"vscode_custom_css.imports": ["https://example.com/styles/my-theme.css"]

vscode_custom_css.statusbar

This setting controls the visibility of the status bar indicator.

  • Type: boolean
  • Default: true
  • Description: When true, a paint can icon (codicon-paintcan) is displayed in the status bar to indicate that custom styles/scripts are active.
{
    "vscode_custom_css.statusbar": false
}

Using Variables in File URLs

For more portable and dynamic configurations, the extension supports replacing variables within file:// URLs.

Supported VS Code Variables

  • ${userHome}: The path to your home directory.
  • ${workspaceFolder}: The path of the first workspace folder opened in VS Code.
  • ${cwd}: The current working directory of the VS Code process.
  • ${execPath}: The path to the VS Code executable.
  • ${pathSeparator} or ${/}: The platform-specific path separator (\ on Windows, / on others).

Example using ${userHome}:

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

Environment Variables

You can also reference environment variables using the ${env:VARIABLE_NAME} syntax. You can also provide a default fallback value.

  • ${env:MY_STYLE_PATH}: Uses the value of the MY_STYLE_PATH environment variable.
  • ${env:MY_STYLE_PATH:default/path/style.css}: Uses the environment variable if it exists, otherwise falls back to default/path/style.css.

Example using an environment variable:

"vscode_custom_css.imports": ["file://${env:VSCODE_STYLE_HOME}/main.css"]