{"id":245964,"date":"2023-11-16T08:00:55","date_gmt":"2023-11-16T16:00:55","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/visualstudio\/?p=245964"},"modified":"2023-11-15T16:13:02","modified_gmt":"2023-11-16T00:13:02","slug":"the-visual-studio-ui-refresh-preview-is-here","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/the-visual-studio-ui-refresh-preview-is-here\/","title":{"rendered":"The Visual Studio UI Refresh Preview is here!"},"content":{"rendered":"

Back in May, we showed a first look into the UI Refresh<\/a> that we’ve been working on for Visual Studio. We\u2019ve been working on a refresh for the Visual Studio UI to improve productivity, create a more inclusive environment, and keep up with evolving global accessibility requirements. The feedback we’ve collected from that first post and the developer community ticket<\/a> has been wonderful. We’ve been spending the time since then working through all your comments to ensure your valuable feedback gets weaved into the UI Refresh. Now, here at Ignite<\/a>, we’re excited to finally make a version of the UI Refresh available for folks to try for themselves.<\/p>\n

\"A<\/a>
The Visual Studio UI Refresh Preview<\/figcaption><\/figure><\/p>\n

To enable the UI Refresh, first go to Tools > Manage Preview Features from the main menu in Visual Studio. Then, look for \u201cExperimental control styles\u201d. Once that box is checked, you\u2019ll need to restart Visual Studio for the UI Refresh to be enabled.<\/p>\n

Driven by feedback<\/h2>\n

The fundamentals of the new experience haven’t changed. Our main goals are still based around the Fluent design language<\/a> and focus on three pillars: cohesiveness, accessibility, and productivity. However, since we revealed the images in our first post, we got a lot of feedback about the things that our developers found important. In this version of the UI Refresh, you\u2019ll get to experience a balance of the feedback we received with the accessibility requirements around things like clickable target space and reduction of visual clutter. This means a more inclusive experience to help everyone be more productive and comfortable while still maximizing code space and respecting the feedback you\u2019ve shared with us. As an example of this, the first screenshots we shared, showed a reduction of nearly a full line of code in the editor space, but the editor in 17.9 preview 1 is only reduced by a quarter of a line.<\/p>\n

\"An<\/a>
Comparison of the Editor in the various iterations of the UI Refresh<\/figcaption><\/figure><\/p>\n

We’ve found that we can meet the ideals of the Fluent design language while still prioritizing the things that our developers say are the most important. Now, this experience is ready for you to try so we can continue to build on your feedback. Our journey isn’t done yet; your feedback is absolutely critical! At this time, we don’t have a timeline for when this will be the primary UX for Visual Studio, which is why we’re spending so much time working with our users to get as much information as we possibly can.<\/p>\n

A cohesive and colorful experience<\/h2>\n

One of the pillars of the Fluent UI design language is around cohesiveness. For the Visual Studio UI Refresh, this has been most evident in the simplification of the colors that we use in Visual Studio. Styles across Visual Studio before the UI Refresh used over 4,000 color tokens which were difficult to maintain and were easily misused. This frequently led to inconsistent experiences, accessibility issues and many other issues that led to an experience that didn’t feel cohesive. The new refreshed styles use only about one hundred tokens, which may still seem like a lot, but are much easier to maintain and will make it easier to spot incorrect use. This is leading to more consistency, and we believe will result in the cohesive experience that will make Visual Studio more comfortable to use.<\/p>\n

Our current blue theme has some compatibility issues that we couldn\u2019t iron out in time for Ignite, and instead of delaying this preview, we\u2019ve had to make the decision to make it unavailable for now. We\u2019re also aware that 3rd<\/sup> party themes may run into similar complications, so those may not work as expected with the UI Refresh yet. We\u2019re working on both issues, so stay tuned and we\u2019ll update as we make progress.<\/p>\n

One of the benefits of streamlining the color service is that we can provide a fresher set of color themes beyond the basic “Dark” and “Light”. We’re calling these the new “Tinted” themes, and you can take a look at these below.<\/p>\n

https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/11\/20231025-rejuvenation-tinted-themes.mp4<\/a><\/video><\/div><\/p>\n

These tinted themes are inspired by Microsoft Edge and give Visual Studio a new, fresh look beyond the simple Light and Dark that have been the mainstay for the last decade. These themes can be found when the UI Refresh has been enabled and can be accessed either from the Tools > Theme or from the “color theme” combobox under Environment > Visual Experience in Tools\\Options.<\/p>\n

We want to hear from you<\/h2>\n

We’re excited to hear what folks think now that you can try out the UI Refresh instead of simply seeing static screenshots. We know that there’s still more we need to do. When switching to the tinted themes, customers not using the default Cascadia font will need to set their font back to their font of choice, and custom themes may not be compatible with the UI Refresh at this time. This is the first preview, but it certainly won’t be the last.<\/p>\n

To share your feedback on the UI Refresh<\/a>, you can join the discussion on Developer Community. If you want to share your feedback on the Tinted Themes<\/a>, we\u2019ve got a Developer Community discussion specifically for that too. We want to thank all our folks again for all the feedback that has gotten us this far and we’re eager to continue this conversation. Stay tuned here and in Developer Community as we continue down this journey.<\/p>\n","protected":false},"excerpt":{"rendered":"

Back in May, we showed a first look into the UI Refresh that we’ve been working on for Visual Studio. We\u2019ve been working on a refresh for the Visual Studio UI to improve productivity, create a more inclusive environment, and keep up with evolving global accessibility requirements. The feedback we’ve collected from that first post […]<\/p>\n","protected":false},"author":13892,"featured_media":245967,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[155],"tags":[6915,12,6815],"class_list":["post-245964","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-studio","tag-ui-refresh","tag-visual-studio","tag-visual-studio-2022"],"acf":[],"blog_post_summary":"

Back in May, we showed a first look into the UI Refresh that we’ve been working on for Visual Studio. We\u2019ve been working on a refresh for the Visual Studio UI to improve productivity, create a more inclusive environment, and keep up with evolving global accessibility requirements. The feedback we’ve collected from that first post […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/245964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/13892"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=245964"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/245964\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/245967"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=245964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=245964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=245964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}