Changing the title bar color in accordance with the terminal's background. #5292

Closed
opened 2026-01-31 00:09:48 +00:00 by claunia · 25 comments
Owner

Originally created by @mohamedhaddi on GitHub (Nov 28, 2019).

Originally assigned to: @zadjii-msft on GitHub.

Description of the new feature/enhancement

It would be great if the backgroud color also applied to the title bar, for example, this is the terminal with a custom background color:

1

This is how it should look with the added feature (supposing the thick white border issue was fixed as well):

2

I think the tabs color doesn't look the best either, I don't have any ideas but maybe adding some opacity to them would look better...

Proposed technical implementation details (optional)

Originally created by @mohamedhaddi on GitHub (Nov 28, 2019). Originally assigned to: @zadjii-msft on GitHub. <!-- 🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨 I ACKNOWLEDGE THE FOLLOWING BEFORE PROCEEDING: 1. If I delete this entire template and go my own path, the core team may close my issue without further explanation or engagement. 2. If I list multiple bugs/concerns in this one issue, the core team may close my issue without further explanation or engagement. 3. If I write an issue that has many duplicates, the core team may close my issue without further explanation or engagement (and without necessarily spending time to find the exact duplicate ID number). 4. If I leave the title incomplete when filing the issue, the core team may close my issue without further explanation or engagement. 5. If I file something completely blank in the body, the core team may close my issue without further explanation or engagement. All good? Then proceed! --> # Description of the new feature/enhancement <!-- A clear and concise description of what the problem is that the new feature would solve. Describe why and how a user would use this new functionality (if applicable). --> It would be great if the backgroud color also applied to the title bar, for example, this is the terminal with a custom background color: ![1](https://user-images.githubusercontent.com/6943864/69833863-cb813d00-1236-11ea-8fb2-f7ef940a337a.png) This is how it should look with the added feature (supposing the thick white border issue was fixed as well): ![2](https://user-images.githubusercontent.com/6943864/69833981-ad680c80-1237-11ea-9c95-28f5f9bbf712.png) I think the tabs color doesn't look the best either, I don't have any ideas but maybe adding some opacity to them would look better... # Proposed technical implementation details (optional) <!-- A clear and concise description of what you want to happen. -->
Author
Owner

@DHowett-MSFT commented on GitHub (Nov 30, 2019):

This looks like the inverse of #3310.

@DHowett-MSFT commented on GitHub (Nov 30, 2019): This looks like the inverse of #3310.
Author
Owner

@mohamedhaddi commented on GitHub (Nov 30, 2019):

@DHowett Interesting! What if both perferences were added as a boolean option? But also with the ability to change the one left (either the tab or the title bar) to a prefered color.
For example, I'd love for the tab to take my system's accent color:
1

Also, another suggestion is that I think it'd look great if the tabs were (just like in Microsoft Edge) attached to the upper side of the window:
2

@mohamedhaddi commented on GitHub (Nov 30, 2019): @DHowett Interesting! What if both perferences were added as a boolean option? But also with the ability to change the one left (either the tab or the title bar) to a prefered color. For example, I'd love for the tab to take my system's accent color: ![1](https://user-images.githubusercontent.com/6943864/69902144-56bf1780-138a-11ea-82d5-743ca60ebc5a.png) Also, another suggestion is that I think it'd look great if the tabs were (just like in Microsoft Edge) attached to the upper side of the window: ![2](https://user-images.githubusercontent.com/6943864/69902152-6179ac80-138a-11ea-9909-e38e305799ea.png)
Author
Owner

@DHowett-MSFT commented on GitHub (Dec 2, 2019):

If we're going to do this, we have to figure out how it works with split panes. For now, it's backlogged and marked as requiring a spec. Thanks!

@DHowett-MSFT commented on GitHub (Dec 2, 2019): If we're going to do this, we have to figure out how it works with split panes. For now, it's backlogged and marked as requiring a spec. Thanks!
Author
Owner

@mdtauk commented on GitHub (Dec 2, 2019):

If we're going to do this, we have to figure out how it works with split panes. For now, it's backlogged and marked as requiring a spec. Thanks!

The Active pane could set the window background colour - maybe with a short 500ms colour transition animation

@mdtauk commented on GitHub (Dec 2, 2019): > If we're going to do this, we have to figure out how it works with split panes. For now, it's backlogged and marked as requiring a spec. Thanks! The Active pane could set the window background colour - maybe with a short 500ms colour transition animation
Author
Owner

@simioni commented on GitHub (Apr 5, 2020):

If the title bar takes the same color as the window, the active tab should be rounded at the bottom too. No point for it to float midair with a squared bottom.

69902144-56bf1780-138a-11ea-82d5

@simioni commented on GitHub (Apr 5, 2020): If the title bar takes the same color as the window, the active tab should be rounded at the bottom too. No point for it to float midair with a squared bottom. ![69902144-56bf1780-138a-11ea-82d5](https://user-images.githubusercontent.com/7426615/78491871-1b10d180-771f-11ea-9d46-81fc51ff97df.png)
Author
Owner

@mohamedhaddi commented on GitHub (Apr 5, 2020):

@simioni looks nice!

@mohamedhaddi commented on GitHub (Apr 5, 2020): @simioni looks nice!
Author
Owner

@mdtauk commented on GitHub (Apr 5, 2020):

If the title bar takes the same color as the window, the active tab should be rounded at the bottom too. No point for it to float midair with a squared bottom.

69902144-56bf1780-138a-11ea-82d5

The padding would need to be adapted to account for there being no gap between the console background and the window edge

@mdtauk commented on GitHub (Apr 5, 2020): > If the title bar takes the same color as the window, the active tab should be rounded at the bottom too. No point for it to float midair with a squared bottom. > > ![69902144-56bf1780-138a-11ea-82d5](https://user-images.githubusercontent.com/7426615/78491871-1b10d180-771f-11ea-9d46-81fc51ff97df.png) The padding would need to be adapted to account for there being no gap between the console background and the window edge
Author
Owner

@zadjii-msft commented on GitHub (May 22, 2020):

I'm yanking this out of the spec tracker, since this is incorporated in the spec for #3327, over in #5772. Thanks!

@zadjii-msft commented on GitHub (May 22, 2020): I'm yanking this out of the spec tracker, since this is incorporated in the spec for #3327, over in #5772. Thanks!
Author
Owner

@ghost commented on GitHub (Sep 13, 2022):

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

Handy links:

@ghost commented on GitHub (Sep 13, 2022): :tada:This issue was addressed in #12992, which has now been successfully released as `Windows Terminal Preview v1.16.252`.:tada: Handy links: * [Release Notes](https://github.com/microsoft/terminal/releases/tag/v1.16.252) * [Store Download](https://www.microsoft.com/store/apps/9n8g5rfz9xk3?cid=storebadge&ocid=badge)
Author
Owner

@isayakmondal commented on GitHub (Mar 19, 2023):

How to get the desired effect that OP wanted?

@isayakmondal commented on GitHub (Mar 19, 2023): How to get the desired effect that OP wanted?
Author
Owner

@zadjii-msft commented on GitHub (Mar 20, 2023):

I'd try something like:

    "theme": "Example",
    "themes":
    [
        {
            "name": "Example",
            "tabRow":
            {
                "background": "terminalBackground",
                "unfocusedBackground": "terminalBackground"
            }
        },
    ]

For more details, see: https://learn.microsoft.com/en-us/windows/terminal/customize-settings/themes

@zadjii-msft commented on GitHub (Mar 20, 2023): I'd try something like: ```json "theme": "Example", "themes": [ { "name": "Example", "tabRow": { "background": "terminalBackground", "unfocusedBackground": "terminalBackground" } }, ] ``` For more details, see: https://learn.microsoft.com/en-us/windows/terminal/customize-settings/themes
Author
Owner

@isayakmondal commented on GitHub (Mar 20, 2023):

I think it's only available in the preview version. @zadjii-msft

@isayakmondal commented on GitHub (Mar 20, 2023): I think it's only available in the preview version. @zadjii-msft
Author
Owner

@zadjii-msft commented on GitHub (Mar 20, 2023):

@isayakmondal Nope, that shipped in 1.16, which is stable now.

@zadjii-msft commented on GitHub (Mar 20, 2023): @isayakmondal Nope, that shipped in 1.16, which is stable now.
Author
Owner

@isayakmondal commented on GitHub (Mar 20, 2023):

@isayakmondal Nope, that shipped in 1.16, which is stable now.

Interesting but it doesn't work for me. Should I share my settings.json file?

@isayakmondal commented on GitHub (Mar 20, 2023): > @isayakmondal Nope, that shipped in 1.16, which is stable now. Interesting but it doesn't work for me. Should I share my `settings.json` file?
Author
Owner

@zadjii-msft commented on GitHub (Mar 20, 2023):

Yep, that's what I'd do

@zadjii-msft commented on GitHub (Mar 20, 2023): Yep, that's what I'd do
Author
Owner

@isayakmondal commented on GitHub (Mar 20, 2023):

Write now it's looking like this
image
Please check out the file here -> settings.json
@zadjii-msft

@isayakmondal commented on GitHub (Mar 20, 2023): Write now it's looking like this ![image](https://user-images.githubusercontent.com/51121313/226403513-e11b224e-2b57-41f7-900e-8c69b1b1bcc3.png) Please check out the file here -> [settings.json](https://gist.github.com/isayakmondal/7750f0ad485cd900416ec5e37b89f010) @zadjii-msft
Author
Owner

@zadjii-msft commented on GitHub (Mar 20, 2023):

You didn't change the theme to Example. This line:
https://gist.github.com/isayakmondal/7750f0ad485cd900416ec5e37b89f010#file-settings-json-L333

should be

    "theme": "Example",
@zadjii-msft commented on GitHub (Mar 20, 2023): You didn't change the `theme` to `Example`. This line: https://gist.github.com/isayakmondal/7750f0ad485cd900416ec5e37b89f010#file-settings-json-L333 should be ```json "theme": "Example", ```
Author
Owner

@isayakmondal commented on GitHub (Mar 20, 2023):

Oh my bad, is there any way to make the tab bar transparent and not translucent? @zadjii-msft

@isayakmondal commented on GitHub (Mar 20, 2023): Oh my bad, is there any way to make the tab bar transparent and not translucent? @zadjii-msft
Author
Owner

@zadjii-msft commented on GitHub (Mar 20, 2023):

Not in 1.16, that was only fixed in 1.17, in #13935

@zadjii-msft commented on GitHub (Mar 20, 2023): Not in 1.16, that was only fixed in 1.17, in #13935
Author
Owner

@isayakmondal commented on GitHub (Mar 20, 2023):

Got it, any idea when will that be a stable release? @zadjii-msft

@isayakmondal commented on GitHub (Mar 20, 2023): Got it, any idea when will that be a stable release? @zadjii-msft
Author
Owner

@zadjii-msft commented on GitHub (Mar 20, 2023):

We don't have a timetable at the moment, though, Preview is typically just as stable. I suspect we won't be shipping a new release for a couple of months, we've got some BIG changes in the pipeline that will take a little longer to bake than usual.

@zadjii-msft commented on GitHub (Mar 20, 2023): We don't have a timetable at the moment, though, Preview is typically just as stable. I suspect we won't be shipping a new release for a couple of months, we've got some BIG changes in the pipeline that will take a little longer to bake than usual.
Author
Owner

@isayakmondal commented on GitHub (Mar 20, 2023):

Alright, thank you, keep up the good work. 1.16 would work for me atm. @zadjii-msft

@isayakmondal commented on GitHub (Mar 20, 2023): Alright, thank you, keep up the good work. 1.16 would work for me atm. @zadjii-msft
Author
Owner

@isayakmondal commented on GitHub (Mar 21, 2023):

On a whole separate topic is there any feature to have the context menu while right-clicking? By default, it pastes things which is pretty annoying for me instead I would like a context menu as we can find in git bash or in other terminal emulators? @zadjii-msft

@isayakmondal commented on GitHub (Mar 21, 2023): On a whole separate topic is there any feature to have the context menu while right-clicking? By default, it pastes things which is pretty annoying for me instead I would like a context menu as we can find in git bash or in other terminal emulators? @zadjii-msft
Author
Owner

@zadjii-msft commented on GitHub (Mar 21, 2023):

@isayakmondal That's tracked elsewhere in the repo, in #3337.

@zadjii-msft commented on GitHub (Mar 21, 2023): @isayakmondal That's tracked elsewhere in the repo, in #3337.
Author
Owner

@debajyoti1990 commented on GitHub (Apr 1, 2023):

I am able to get the tab bar to follow the terminal background but, there's a thin line below tab bar which is kind of annoying.

@debajyoti1990 commented on GitHub (Apr 1, 2023): I am able to get the tab bar to follow the terminal background but, there's a thin line below tab bar which is kind of annoying.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/terminal#5292