We are updating the VS Code interface to make it clearer, more consistent, and easier to adapt to different screens, accessibility needs, and working styles. Change can be disruptive, especially in a tool people use every day. Feedback on the modern UI has already helped us identify where the design needs to improve. This issue summarizes what the modern UI changed, what we heard, what we have updated, and what will happen next. ## What the modern UI changed The modern UI introduced: - Clearer separation between major areas of the workbench. - Updated typography and a simpler visual hierarchy. - More discoverable controls for resizing and moving panels. - A consistent approach to spacing, corner radii, colors, and elevation. - Refreshed tabs and status bar styling. - A shared design-token foundation for density, theming, and future customization. ## Feedback we received The most common feedback was: - The modern UI uses too much screen space, particularly on smaller displays and information-dense layouts. - Tabs and the status bar need to remain compact, clear, and customizable. - Resize affordances and separation between panels need to be discoverable without becoming distracting. - Rendering performance needs further improvement. On a 1920 x 1080 display at 100% zoom, the modern UI currently uses approximately `20px` more horizontal space and `12-18px` more vertical space, depending on layout. The feedback made clear that the initial balance between readability and density did not work for every person or setup. ## Updates we have already made In response to feedback, we have: - Simplified the typography ramp and removed all-caps labels. - Refined spacing, corner radii, and color treatments to create a more consistent hierarchy. - Continued adjusting panel separation and resize affordances. - Refined tabs and preserved control over the space reserved for tab actions. - Revisited status bar spacing to reduce visual competition between items. - Expanded theme customization for modern UI elements. - Added settings for the Activity Bar, tabs, and view headers: - `workbench.experimental.modernUIUppercaseViewHeaders` - `workbench.activityBar.compact` - `workbench.editor.tabActionReserveSpace` ## Compact Mode We are also introducing Compact Mode for people who prefer a denser workspace. Compact Mode keeps the structure and customization of the modern UI while reducing spacing where density matters most. It is designed for smaller displays, information-dense workflows, and anyone who prefers a tighter layout. Together with theme and color customization, it can provide an experience closer to the Classic UI while retaining the modern UI foundation. To enable Compact Mode, set `window.density.layout` to `compact`. ## What we are still working on We will continue to: - Refine tab styling and customization. - Improve rendering performance. - Adjust density, layout controls, and other details in response to specific feedback. - Make Compact Mode and related customization easier to discover. - Document the available density, theme, and color options. ## Timing and transition We plan to move everyone to the new UI and remove the Classic UI. Before that happens, there will be a transition period so we can continue adjusting the modern UI based on feedback. During this period, users can switch back to the Classic UI by disabling `workbench.experimental.modernUI`. The option to use the Classic UI is temporary and will be removed when the transition ends. We have not set a removal date yet. We will communicate the timeline clearly and give advance notice before removing the option. ## Help us shape what comes next Please continue to share specific examples of what works, what does not, and what prevents developers from being productive. Concrete details about your display, layout, settings, and workflow help us turn feedback into improvements. [Submit an issue](https://github.com/microsoft/vscode/issues)