As developers, we’re always looking for ways to enhance our productivity and streamline our workflows. One thing which has bothered me endlessly is the floating Debug Toolbar. I love the fact that it is floating, but I have to move it out of the way every time I want to do something.
Many times I have been thinking to create an extension to move the Debug Toolbar to the titlebar, but I never got around to it. I was thinking about it again today, but unfortunatly, you cannot add CSS for the Visual Studio Code UI without a “hack”.
important The hack requires you to override the CSS file in the Visual Studio Code app. Use this at your own risk. Worst case, you have to install Visual Studio Code again.
In this blog post, I’ll share the CSS hack I created to integrate the Debug Toolbar into the titlebar of Visual Studio Code. Follow along as we modify the workbench.desktop.main.css file to achieve this new layout.
Step 1: Create backup copies
Before we modify any files, it’s important to create backups. Open a terminal and run the following commands to copy the original workbench.desktop.main.css file and create a backup:
Step 2: Apply the CSS
Now that we have backups, it’s time to modify the
workbench.desktop.main.css file. Run the following command to append the necessary CSS changes:
This CSS snippet modifies the Debug Toolbar’s appearance and positions it within the titlebar. The
background property sets the toolbar color,
top adjusts the position, and
border remove any extraneous styling.
edit Updated the CSS to set the debug toolbar not as draggable, otherwise the buttons are not clickable since the latest update on the title bar.
Step 3: Copy the modified file
Finally, we need to copy our modified
workbench.desktop.main.css file back to the Visual Studio Code application folder. Run the following command:
Step 4: Restart Visual Studio Code
To see the changes, restart Visual Studio Code. You should now see the Debug Toolbar integrated into the titlebar once you start a debugging session!
You are still able to mode the Debug Toolbar, but you will have to hold the
ctrl key + click and drag.
important You will need to apply this CSS hack every time you do an update of Visual Studio Code. That is why I hooked it up to a Raycast script so that I can run it quick and easy.