Quick Start: Apply Your First Custom Style

This guide will walk you through the essential steps to apply a single custom CSS file to change the editor's font and add a status bar indicator.

Step 1: Create a Custom CSS File

First, create a CSS file anywhere on your computer. For this example, we'll create a file named vscode-style.css and add a rule to change the editor's font family to 'Fira Code'.

/* ~/vscode-style.css */
.monaco-editor,
.monaco-editor .inputarea,
.monaco-editor.integrated-terminal .xterm-helpers {
    font-family: 'Fira Code', monospace !important;
}

Step 2: Get the File URL

The extension requires a URL, not a simple file path. You must format it correctly for your operating system.

  • Windows: file:///C:/Users/YourUsername/vscode-style.css
  • macOS / Linux: file:///Users/YourUsername/vscode-style.css

Replace YourUsername with your actual user name. Notice the three slashes /// after file:.

Step 3: Update settings.json

Open your VS Code settings.json file (Ctrl+Shift+P > Preferences: Open User Settings (JSON)) and add the vscode_custom_css.imports setting with the URL from the previous step.

{
    // Other settings...
    "vscode_custom_css.imports": [
        "file:///Users/YourUsername/vscode-style.css"
    ]
}

Step 4: Enable the Extension

Now, activate the extension via the Command Palette.

  1. Press Ctrl+Shift+P (or Cmd+Shift+P on macOS).
  2. Type Enable Custom CSS and JS and press Enter.

Permission Requirements

  • On Windows, ensure you are running VS Code as an Administrator.
  • On macOS/Linux, you may need to resolve permission issues.

Step 5: Restart VS Code

A notification will appear prompting you to restart. Click the Restart button.

After restarting, your custom font should be applied, and you should see a new paint can icon in the bottom-right status bar, indicating that the extension is active.