How to restore VS Code’s previous UI design

Microsoft is testing a new UI design for VS Code, so you may see a new interface that differs from the previous design depending on your environment. The new UI places each element inside a rounded container. I like the design, but it has divided opinion among users.

Microsoft still considers the new VS Code design experimental, so you can turn it on or off in the settings.

VS Code describes the new design in its settings as follows:

the side bars and bottom panel are shown as floating cards with rounded corners and gaps, and a set of refreshed workbench styles is applied, matching the Agents window design.

How to restore the previous VS Code design

Microsoft has not rolled out the new VS Code design to all users, so you may see either the old or new design depending on your environment.

If Microsoft has rolled out the new design to your environment, you can restore the previous design by setting workbench.experimental.modernUI to false.

Change the setting from the GUI

1. Open the VS Code settings

2. Enter "modern" in the settings search bar, then turn off [Workbench > Experimental: Modern UI]

   

3. You’ll see the previous UI design again

Change the setting in settings.json

1. Open the VS Code settings.json file

2. Set workbench.experimental.modernUI to false.

   1
   {
   2
       // ...existing settings
   3
       "workbench.experimental.modernUI": false
   4
   }

3. You’ll see the previous UI design again