Windows 11 Mica Material

Just like Windows 10, Windows 11 also ships with Acrylic Material. Acrylic is a semi-transparent material that replicates the effect of frosted glass. It is translucent, brighter, and has a stronger background relationship to give a unique-looking translucent, noisy effect. Acrylic is better suited for overlapping windows, context/pop-up menus, and UI elements other than the main body of the application Windows. Translucency is the heart and soul of Acrylic Material.

Windows 11 however also ships with a new material type called Mica. Unlike Acrylic, Mica is a very opaque material with just a slight hint (less than 2%) of translucency. Mica surfaces are subtly tinted with the user's desktop background color or with application Windows opened to the background of the currently active application.

Mica material is suitable for the main application body / main forms and serves as material for the content area of the application. There are both light and dark versions of mica.

Mica material. Windows 11 (Light theme) Source: Mica Material Microsoft

Mica material. Windows 11 (Dark theme). Source: Mica material Dark theme Microsoft

Mica Support in RAD Studio

Windows 11 Mica support is currently limited to Windows 11 specific UWP applications only. Microsoft may eventually enhance Mica support for traditional Win32 and .NET (WinForms, WPF) applications.

Since VCL is Windows-based and its implementations of common controls are wrappers of the Windows API, thus is close to the ground and fully native, the behavior of VCL applications is expected to be the same Win32 and .Net applications on Windows 11. This applies to both Delphi and C++ applications.

Fortunately, VCL is very flexible and supports manually adjusting forms to modify background colors, translucency, and other attributes to replicate almost similar results as the Windows 11 default Mica material.

Creating Mica Material Forms in RAD Studio 11

In the following sections, we’ll create four different projects in RAD Studio 11 to cover both Delphi and C++ with both Dark and Light Themes of Mica.

• Mica Material (Light) VCL application, C++ Builder
• Mica Material (Dark) VCL application, C++ Builder
• Mica Material (Light) VCL application, Delphi
• Mica Material (Light) VCL application, Delphi

Mica Material (Light) VCL application, C++ Builder

The default VCL Form background colors best resemble the traditional Windows look and feel, and rightly so. Windows has been using a background color with a slight tint of grey and is very often called the system color, highlighting the fact of how deeply rooted this color is to the Windows systems.

Following is a screenshot of the default VCL form as it appears on a Windows 11 computer, regardless of the Windows theme (Dark or Light).

(Image: RAD Studio VCL Form on Windows 11)

In order to make this form resemble Windows 11 Mica theme, we need to make a few adjustments as follows, • Change background-color • Enable Translucency (Alpha Blend) • Set Translucency Value (Alpha Blend Value)

Mica background color is brighter than the default VCL TForm color.

Mica background can be represented in RGB values as (248,249,253) .

Mica background has a slight hint of translucency, while the default VCL form is totally opaque.

Following is a Mica-looking form created in RAD Studio 11 using a Windows VCL application while C++ is the language and the properties set as shown above.

(Image: Mica Material VCL Form Light theme)

The C++ code to set the required attributes is as follows,

(Image: Mica Material VCL Form code, file: MicaFormsLight.cpp hosted on Github)

The AlpahBlend here represents the translucency values one can set in VCL, where a value of 255 means a fully opaque background, while a value of 0 represents a totally transparent background. A value of 250 is just under 2% transparency and with a custom color matching Windows 11 application backgrounds, it tunes perfectly with native Mica applications.

Mica Material (Dark) VCL application, C++ Builder

In order to achieve a dark Mica theme in a VCL application following properties needs to be defined (Pr-requisite information and the steps to achieve results are shown with a description of the light version of the application above).

Set the color value of 38,40,44 and translucency of 253 (less than 1% transparency).

(Image code snippet, Mica material VCL form, source, MicaFormsDark.cpp on Github)

A VCL form with mica theme, with Windows desktop as background appears as follows,

(Image: Mica Dark theme, Windows 11 desktop as background).

Mica Material (Light) VCL application, Delphi

To set Mica Material for the Delphi application same set of TColor, AlphaBlend, and AlphaBlendValue settings apply to the TForm, as shown in the C++ Builder example in the preceding sections of this document. The steps to achieve the above is as follows,

• Create a Delphi VCL application in RAD Studio.
• Under Object Inspector, on Events tabs, create a new OnCreate event mikaSettings

• This will create a new procedure micaSettings(Sender: TObject) which we will use to initialize the Mica styles when the form is created. The same steps can be repeated for any new forms you need to create.

Use the following code to apply settings,

(Image code snippet, Mica material VCL form, source, MicaDelphiLight.pas on Github)

Mica Material (Dark) VCL application, Delphi

To achieve the dark variant of Mica material in Delphi, the same steps apply as above.

• Create a Windows VCL application (Delphi)
• Under Object Inspector, on Events tabs, create a new OnCreate event mikaSettings
• Apply the following code in procedure micaSettings(Sender: TObject) to get desired dark style Mica material.

(Image code snippet, Mica material VCL form, source, MicaDelphiDark.pas on Github)

The resultant form should apply the dark variant of the Mica theme. Can be used for all subsequent forms created. Settings can be saved in an external module so that code can be reused for forms you might be needed to create.

Summary

To sum-up. Even though Microsoft currently offers no official solution, it is possible to get desired Mica effects by applying close approximate styles to your VCL forms as shown in various screenshots above.