starred/terminal
1
0
Fork 0
mirror of https://github.com/microsoft/terminal.git synced 2026-09-25 00:15:10 +00:00
Code Issues 19.0k Packages Projects Releases 20 Wiki Activity

Add support for the Mica material #14332

New Issue
Closed
opened 2026-01-31 04:07:23 +00:00 by claunia · 17 comments
claunia commented 2026-01-31 04:07:23 +00:00
Owner
Copy Link

Originally created by @DHowett on GitHub (Jun 24, 2021).

Originally assigned to: @zadjii-msft on GitHub.

Depends on #10508

Originally created by @DHowett on GitHub (Jun 24, 2021). Originally assigned to: @zadjii-msft on GitHub. Depends on #10508
claunia commented 2026-01-31 04:07:26 +00:00
Author
Owner
Copy Link

@sylveon commented on GitHub (Jun 29, 2021):

Blocked by https://github.com/microsoft/microsoft-ui-xaml/issues/5319

@sylveon commented on GitHub (Jun 29, 2021): Blocked by https://github.com/microsoft/microsoft-ui-xaml/issues/5319
claunia commented 2026-01-31 04:07:26 +00:00
Author
Owner
Copy Link

@DHowett commented on GitHub (Jun 29, 2021):

Oh no. Thanks.

@DHowett commented on GitHub (Jun 29, 2021): Oh no. Thanks.
claunia commented 2026-01-31 04:07:27 +00:00
Author
Owner
Copy Link

@selastingeorge commented on GitHub (Aug 6, 2021):

https://github.com/microsoft/microsoft-ui-xaml/issues/5319#issuecomment-894008314

@selastingeorge commented on GitHub (Aug 6, 2021): https://github.com/microsoft/microsoft-ui-xaml/issues/5319#issuecomment-894008314
claunia commented 2026-01-31 04:07:27 +00:00
Author
Owner
Copy Link

@dongle-the-gadget commented on GitHub (Jan 28, 2022):

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

@dongle-the-gadget commented on GitHub (Jan 28, 2022): Or you can reference WinUI's source code and create a composition brush for Mica.
claunia commented 2026-01-31 04:07:27 +00:00
Author
Owner
Copy Link

@selastingeorge commented on GitHub (Jan 28, 2022):

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

@selastingeorge commented on GitHub (Jan 28, 2022): 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
claunia commented 2026-01-31 04:07:28 +00:00
Author
Owner
Copy Link

@lzlrd commented on GitHub (Apr 5, 2022):

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:
image

@lzlrd commented on GitHub (Apr 5, 2022): 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: ![image](https://user-images.githubusercontent.com/24303423/161751714-a7ca4d10-b769-46ab-bbf4-2c011493e0d6.png)
claunia commented 2026-01-31 04:07:28 +00:00
Author
Owner
Copy Link

@dongle-the-gadget commented on GitHub (Apr 5, 2022):

Not sure about its implementation.

@dongle-the-gadget commented on GitHub (Apr 5, 2022): Not sure about its implementation.
claunia commented 2026-01-31 04:07:28 +00:00
Author
Owner
Copy Link

@zadjii-msft commented on GitHub (May 4, 2022):

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.

@zadjii-msft commented on GitHub (May 4, 2022): 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.
claunia commented 2026-01-31 04:07:28 +00:00
Author
Owner
Copy Link

@ghost commented on GitHub (Jan 24, 2023):

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

Handy links:

@ghost commented on GitHub (Jan 24, 2023): :tada:This issue was addressed in #13935, which has now been successfully released as `Windows Terminal Preview v1.17.1023`.:tada: Handy links: * [Release Notes](https://github.com/microsoft/terminal/releases/tag/v1.17.1023) * [Store Download](https://www.microsoft.com/store/apps/9n8g5rfz9xk3?cid=storebadge&ocid=badge)
claunia commented 2026-01-31 04:07:28 +00:00
Author
Owner
Copy Link

@plashenkov commented on GitHub (May 31, 2023):

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:

terminal

@plashenkov commented on GitHub (May 31, 2023): 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. ```jsonc { "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: ![terminal](https://github.com/microsoft/terminal/assets/2331932/8e5ae981-7ff6-47eb-8739-c10a3f913fbb)
claunia commented 2026-01-31 04:07:28 +00:00
Author
Owner
Copy Link

@Void48 commented on GitHub (Oct 7, 2023):

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:

terminal

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?

@Void48 commented on GitHub (Oct 7, 2023): > 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. > > ```js > { > "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: > > ![terminal](https://user-images.githubusercontent.com/2331932/242395167-8e5ae981-7ff6-47eb-8739-c10a3f913fbb.png) 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?
claunia commented 2026-01-31 04:07:29 +00:00
Author
Owner
Copy Link

@plashenkov commented on GitHub (Oct 7, 2023):

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?

@plashenkov commented on GitHub (Oct 7, 2023): 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?
claunia commented 2026-01-31 04:07:29 +00:00
Author
Owner
Copy Link

@Void48 commented on GitHub (Oct 7, 2023):

Actually I figured it out @plashenkov 👍🏻

@Void48 commented on GitHub (Oct 7, 2023): Actually I figured it out @plashenkov 👍🏻
claunia commented 2026-01-31 04:07:29 +00:00
Author
Owner
Copy Link

@DunderMiko commented on GitHub (Mar 28, 2025):

Hi, I can't quite get the seem to disappear no matter what value I set. The closest i got was at:

"theme": "Mica",
"themes": [
{
"name": "Mica",
"window": {
"applicationTheme": "dark",
"useMica": true
},
"tabRow": {
"background": "#00000043", // darker
"unfocusedBackground": "#00000043" // darker
},
"tab": {
"background": "#FFFFFF06", // lighter
"unfocusedBackground": "#00000000" // transparent
}
}
]
}

Any tips?

Image
@DunderMiko commented on GitHub (Mar 28, 2025): Hi, I can't quite get the seem to disappear no matter what value I set. The closest i got was at: "theme": "Mica", "themes": [ { "name": "Mica", "window": { "applicationTheme": "dark", "useMica": true }, "tabRow": { "background": "#00000043", // darker "unfocusedBackground": "#00000043" // darker }, "tab": { "background": "#FFFFFF06", // lighter "unfocusedBackground": "#00000000" // transparent } } ] } Any tips? <img width="363" alt="Image" src="https://github.com/user-attachments/assets/af2f2acc-69ce-4214-b528-a40b62ea7417" />
claunia commented 2026-01-31 04:07:29 +00:00
Author
Owner
Copy Link

@edge261 commented on GitHub (Jul 22, 2025):

Actually I figured it out @plashenkov 👍🏻

how you did that? I still get that difference :(

Image
@edge261 commented on GitHub (Jul 22, 2025): > Actually I figured it out [@plashenkov](https://github.com/plashenkov) 👍🏻 how you did that? I still get that difference :( <img width="948" height="153" alt="Image" src="https://github.com/user-attachments/assets/6d820bd4-1e05-42fb-9753-d4d834493d2a" />
claunia commented 2026-01-31 04:07:29 +00:00
Author
Owner
Copy Link

@plashenkov commented on GitHub (Jul 23, 2025):

@edge261 On some backgrounds I can see the difference too. I think we cannot eliminate it completely, unfortunately.

@plashenkov commented on GitHub (Jul 23, 2025): @edge261 On some backgrounds I can see the difference too. I think we cannot eliminate it completely, unfortunately.
claunia commented 2026-01-31 04:07:30 +00:00
Author
Owner
Copy Link

@DunderMiko commented on GitHub (Aug 10, 2025):

@edge261 On some backgrounds I can see the difference too. I think we cannot eliminate it completely, unfortunately.

A workaround I used for this is to set a custom color for the tab, I used color picker and set teh color to the nearest one fone in the mica window beneath the tab.

Image
@DunderMiko commented on GitHub (Aug 10, 2025): > [@edge261](https://github.com/edge261) On some backgrounds I can see the difference too. I think we cannot eliminate it completely, unfortunately. A workaround I used for this is to set a custom color for the tab, I used color picker and set teh color to the nearest one fone in the mica window beneath the tab. <img width="661" height="212" alt="Image" src="https://github.com/user-attachments/assets/7aa731c1-a1b7-4d67-bd08-5329a644b5b1" />
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
⛺ Reserved
A11yCO
A11yMAS
A11ySev1
A11ySev2
A11ySev3
A11yTTValidated
A11yUsable
A11yVoiceAccess
A11yWCAG
Area-Accessibility
Area-AtlasEngine
Area-AzureShell
Area-Build
Area-Build
Area-Chat
Area-CmdPal
Area-CodeHealth
Area-Commandline
Area-CookedRead
Area-DefApp
Area-Extensibility
Area-Fonts
Area-GroupPolicy
Area-i18n
Area-Input
Area-Interaction
Area-Interop
Area-Localization
Area-Output
Area-Performance
Area-Portable
Area-Quality
Area-Remoting
Area-Rendering
Area-Schema
Area-Server
Area-Settings
Area-SettingsUI
Area-ShellExtension
Area-ShellExtension
Area-ShellExtension
Area-Suggestions
Area-Suggestions
Area-TerminalConnection
Area-TerminalControl
Area-Theming
Area-UserInterface
Area-VT
Area-Windowing
Area-WPFControl
AutoMerge
Blocking-Ingestion
Culprit-Centennial
Culprit-WinUI
Disability-All
Disability-Blind
Disability-LowVision
Disability-Mobility
External-Blocked-WinUI3
Fixed
Gathering-Data
good first issue
HCL-E+D
HCL-WindowsTerminal
Help Wanted
Impact-Compatibility
Impact-Compliance
Impact-Correctness
Impact-Visual
In-PR
InclusionBacklog
InclusionBacklog-Windows TerminalWin32
InclusionCommitted-202206
Issue-Bug
Issue-Docs
Issue-Feature
Issue-Feature
Issue-Question
Issue-Samples
Issue-Scenario
Issue-Task
Needs-Attention
Needs-Author-Feedback
Needs-Bisect
Needs-Discussion
Needs-Repro
Needs-Tag-Fix
Needs-Tag-Fix
Needs-Triage
No-Recent-Activity
Priority-0
Priority-1
Priority-2
Priority-3
Product-Cmd.exe
Product-Colortool
Product-Colortool
Product-Colortool
Product-Conhost
Product-Conpty
Product-Meta
Product-Powershell
Product-Terminal
Product-WSL
pull-request
Mirrored from GitHub Pull Request
 Resolution-Answered
Resolution-By-Design
Resolution-Duplicate
Resolution-External
Resolution-Fix-Available
Resolution-Fix-Committed
Resolution-No-Repro
Resolution-Won't-Fix
Severity-Blocking
Severity-Crash
Severity-DataLoss
spam
this-will-be-a-breaking-change
Tracking-External
WindowsTerminal_Win32
Work-Item
zAskModeBug
zInbox-Bug
No Label Area-Theming Issue-Feature Product-Terminal Resolution-Fix-Committed
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/terminal#14332
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?