Skip to content

Instantly share code, notes, and snippets.

@rickbot-dot

rickbot-dot/README.md

Last active November 26, 2022 08:44
Show Gist options
  • Save rickbot-dot/4eaedc7d11e9f81fe129654823eeea58 to your computer and use it in GitHub Desktop.
Save rickbot-dot/4eaedc7d11e9f81fe129654823eeea58 to your computer and use it in GitHub Desktop.
Download ZIP
How to get Windows 11 look in VS Code
Raw
README.md

VS Code Sun Valley Theme

Visual Studio Code is great for JavaScript development, but it has a boring theme based on the Metro design found in Windows 10:

image

BTW, you can install a Fluent theme and get rid of the default Windows 10 theme:

Before (Metro/WinUI 2) After (Fluent/WinUI 3)
image image

Here are instructions on how to apply the Fluent workbench theme.

Install the Fluent UI extension

To get the Sun Valley look in VS Code, you need to install an extension that automatically does the work for you.

Open Visual Studio Code as administrator.

Press Ctrl+P. You will get a popup. Enter the following in it:

ext install leandro-rodrigues.fluent-ui-vscode

This will install the Fluent design patch.

Enable patch

Three commands are contributed to VS Code:

  • Fluent UI: Enable: Enables the Fluent design theme.
  • Fluent UI: Disable: Enables the default Metro design theme.
  • Fluent UI: Reload: Reloads VS Code. This will apply workbench modifications.

Open the Command Palette with Ctrl+Shift+P. Select "Fluent UI: Enable".

Close VS Code and run it as a normal user. If you get a warning saying VS Code has been corrupted, click the cog on the notification and select the option to stop showing it.

You finally got a theme that mimics Windows 11!

image

Optional: Get Fluent product icons

To get the icons shown in the screenshot, you need to install Fluent Icons:

ext install miguelsolorio.fluent-icons

Change your "Product Icon Theme" to "Fluent Icons".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment