Visual Studio Code Fluent UI

Gives your Visual Studio Code a modern, Fluent UI-inspired makeover!

Enhance your Visual Studio Code experience with a modern, Fluent UI-inspired theme.

This extension brings Microsoft's Fluent UI design aesthetic to VS Code with blurred backgrounds, customizable colors, and a refined interface.

Inspired by and based on the awesome concept designs by u/zeealeidahmad.

[!CAUTION]

⚠️DISCLAIMER⚠️

This theme heavily modifies VS Code's UI for aesthetic purposes.

It's experimental and considered beta software - use at your own risk.

Features

• Windows 11 Mica Effect - Blurred wallpaper background emulating Fluent UI's Mica material
• Light/Dark Theme Support - Choose between light and dark accent colors
• Customizable Background & Colors - Personalize with your own wallpaper and accent colors
• Compact Mode - Reduce padding around UI elements to maximize workspace

Quick Start

1. Install the extension from VS Marketplace or Open VSX
2. Enable the extension: Open the command palette (Ctrl+Shift+P) and run > Fluent: Enable
3. Configure (optional): Open settings (Ctrl+,) and search for @ext:NightSky-Studio.vscode-fluent-ui-continued

Note: If you see a "Corrupt Installation" warning, this is expected. Click the cog icon and select "Don't show again".

Common Settings

{
    // Applies slight less padding around some of the elements.
    // The difference is subtle but can help those with limited space.
    "fluentui.compact": false,
    // Enable background image
    "fluentui.enableWallpaper": false,
    // Path to image. By default, it will use the default Windows 11 wallpaper for the Windows light theme.
    "fluentui.wallpaperPath": "C:\\Windows\\Web\\Wallpaper\\Windows\\img0.jpg",
    // Blur amount for the background wallpaper (0-100). Lower values result in sharper images.
    "fluentui.wallpaperBlurAmount": 50,
    // Quality of the background wallpaper image (1-100). Higher values result in better quality but larger file size.
    // Note: High quality images may increase VS Code startup time.
    "fluentui.wallpaperQuality": 80,
    // Resolution for the background wallpaper. 'original' preserves the source image resolution.
    // Lower resolutions reduce memory usage and improve performance.
    "fluentui.wallpaperResolution": "original",
    // Output format for the background wallpaper.
    // JPEG offers best compression, PNG offers lossless quality, WebP offers balanced compression.
    "fluentui.wallpaperFormat": "jpeg",
    // Accent color. Only HEX values are supported.
    "fluentui.accent": "#005fb8",
    // Background color for dark mode. Only HEX values are supported.
    "fluentui.darkBackground": "#202020",
    // Background color for light mode. Only HEX values are supported.
    "fluentui.lightBackground": "#ffffff"
}

FAQ

• Corrupt installation warning? This is normal and expected. The extension modifies VSCode's workbench HTML file.
• Corrupt setting has changed? This is normal and expected. The extension modifies the global settings to apply Fluent UI styles.
• Problems after uninstalling? See our uninstallation troubleshooting guide.
• Compatible with other extensions? Yes, but some extensions may have compatibility issues.

Recommended Companion Extensions

• Fluent Icons
• Carbon Icons

For more information, see our full documentation.

✨ Give your Visual Studio Code a modern, Fluent UI-inspired makeover today!

⭐ If you enjoy this extension, please consider giving it a star on GitHub!