Add support for the Mica material

[DHowett]

Depends on #10508

[sylveon]

Blocked by microsoft/microsoft-ui-xaml#5319

[DHowett]

Oh no. Thanks.

[selastingeorge]

microsoft/microsoft-ui-xaml#5319 (comment)

[dongle-the-gadget]

Or you can reference WinUI's source code and create a composition brush for Mica.

[selastingeorge]

Have you tried using Compositor.TryCreateBlurredWallpaperBackdropBrush() , it gives the blurred wallpaper brush that is used for creating mica. It is also supported in windows.ui.composition

[lzlrd]

There's also the "Tabbed" material used by Explorer [on the last few Insider builds], which would be nice to have for the tab bar's background:

[dongle-the-gadget]

Not sure about its implementation.

[zadjii-msft]

Since I'm tracking this here: dev/migrie/f/no-custom-caption-btns has the weird version of the terminal with no MinMaxClose control, only the DWM frame. I think that's a dead end though.

[ghost]

🎉This issue was addressed in #13935, which has now been successfully released as Windows Terminal Preview v1.17.1023.:tada:

Handy links:

• Release Notes
• Store Download

[plashenkov]

Hey! Thanks for adding Mica!

It's worth noting that you have to move opacity slider to 0 to have Mica effect on a client terminal area.

But you'll see a horizontal line between the client area and the title bar in that case, and the active tab and client area aren't seamless.

To solve this, we can make the title bar darker, and, since we can't have completely transparent elements (tab) over semitransparent (darker title bar), we can add some white to the active tab to workaround this.

{
  "profiles": {
    "defaults": {
      // ...attributes...
      "opacity": 0
    }
  },
  "theme": "Mica",
  "themes": [
    {
      "name": "Mica",
      "window": {
        "applicationTheme": "dark",
        "useMica": true
      },
      "tabRow": {
        "background": "#00000043", // darker
        "unfocusedBackground": "#00000043" // darker
      },
      "tab": {
        "background": "#FFFFFF09", // lighter
        "unfocusedBackground": "#00000000" // transparent
      }
    }
  ]
}

Finally, this is how it looks now:

[Void48]

Hey! Thanks for adding Mica!

It's worth noting that you have to move opacity slider to 0 to have Mica effect on a client terminal area.

But you'll see a horizontal line between the client area and the title bar in that case, and the active tab and client area aren't seamless.

To solve this, we can make the title bar darker, and, since we can't have completely transparent elements (tab) over semitransparent (darker title bar), we can add some white to the active tab to workaround this.

{
  "profiles": {
    "defaults": {
      // ...attributes...
      "opacity": 0
    }
  },
  "theme": "Mica",
  "themes": [
    {
      "name": "Mica",
      "window": {
        "applicationTheme": "dark",
        "useMica": true
      },
      "tabRow": {
        "background": "#00000043", // darker
        "unfocusedBackground": "#00000043" // darker
      },
      "tab": {
        "background": "#FFFFFF09", // lighter
        "unfocusedBackground": "#00000000" // transparent
      }
    }
  ]
}

Finally, this is how it looks now:

hey @plashenkov
can you please help me make Terminal look like it does in your screenshot? I tried messing with the settings in the JSON file but couldn't get it to work. Could you maybe share your json file so I can just replace mine?

[plashenkov]

Hey @Void48

I've already posted everything needed. This should really be enough, no need to expose other parts of my config. If you've already added these settings, what do you get?

[Void48]

Actually I figured it out @plashenkov 👍🏻