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

mohamedhaddi · 2019-11-28T22:39:12Z

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:

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

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)

DHowett-MSFT · 2019-11-30T00:34:17Z

This looks like the inverse of #3310.

mohamedhaddi · 2019-11-30T15:02:06Z

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

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:

DHowett-MSFT · 2019-12-02T20:50:51Z

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!

mdtauk · 2019-12-02T23:01:42Z

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

simioni · 2020-04-05T12:25:50Z

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.

mohamedhaddi · 2020-04-05T14:34:18Z

@simioni looks nice!

mdtauk · 2020-04-05T15:01:31Z

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.

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

zadjii-msft · 2020-05-22T20:46:32Z

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

##### ⚠️ targeting 1.15 ## Summary of the Pull Request Adds support for Themes, a new type of customization for the Terminal. Themes allow the user to customize elements of the Terminal window itself. In this first iteration, this PR adds support for two main properties: * enabling Mica as the window backdrop * changing the tab row color (read: changing the titelbar color) These represent the most important asks of theming in the Terminal. The properties added in this PR are: * Theme color variants: - `"#rrggbb"` or `"#aarrggbb"` - `"accent"` - `"terminalBackground"` * Properties (_listed here in dot notation, but implemented as sub-objects_) - `tabRow.background`: accepts a ThemeColor (above) - `window.applicationTheme`: accepts one of `{"system", "light", "dark"}` - `window.useMica`: accepts a boolean, defaults to false. ## References * As first described in #3327 * spec'd in #12530 ## PR Checklist * [x] Sorta enables #10509, but doesn't close it. That'll need more comprehensive changes to the titlebar code. * **update**: I totally disabled mica, but left the serialization code. It just seems silly without #10509. * [x] Closes #1963 * [x] Closes #3774 * [x] Closes #12939 * [x] Does the bulk of the #3327 work, but I'm going to leave that open since that's become my megathread for everything related to theming. * [x] I work here * [x] Tests added/passed * [ ] Requires documentation to be updated - **SURE DOES** ## Detailed Description of the Pull Request / Additional comments ### --> GO READ #12530 <-- Seriously. These themes aren't customizable in the SUI currently. You can change the active theme, and the UI will show all of the defined themes, but they're not editable there. They don't layer. You'll need to define your own themes. Thay can't come from fragments. This is a really cool future idea, but not implemented in this v0. The sub objects have some gnarly macros to generate a lot of the serialization code for you. ### TODOs * [x] I still have yet to establish what the accent color algorithm is. This might be proprietary and require a ThemeHelpers workaround. * [x] Make sure `terminalBackground` & the SUI result in something sensible * [x] Make sure runtime BG changes work with `terminalBackground`. One time, they didn't. `printf "\x1b]11;rgb:ff/00/ff\x07"` * [x] Acrylic Terminal BG's look weird, like, the opacity is always 50% or something. And the tab row looks all wrong then. ## Validation Steps Performed This is the blob I've been testing with: <details> ```jsonc // "useAcrylicInTabRow": true, "theme": "my dark", // "theme": "Edge", "theme": "orangey", "theme": "WHITE", // "theme": "terminal", "themes": [ { "name": "my dark", "window": { "applicationTheme": "dark", "useMica": true, }, "tabRow": { "background": "#00000000", }, }, { "name": "Edge", "tabRow": { "background": "accent" }, "window": { "applicationTheme": "system" } }, { "name": "orangey", "window": { "applicationTheme": "light", "useMica": true, }, "tabRow": { "background": "#ff8800", }, }, { "name": "WHITE", "window": { "applicationTheme": "dark", "useMica": true, }, "tabRow": { "background": "#FFFFFF", }, }, { "name": "terminal", "window": { "applicationTheme": "dark", "useMica": false, }, "tabRow": { "background": "terminalBackground", }, }, ] ``` </details>

ghost · 2022-09-13T17:09:29Z

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

Handy links:

isayakmondal · 2023-03-19T13:45:47Z

How to get the desired effect that OP wanted?

zadjii-msft · 2023-03-20T16:01:27Z

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

isayakmondal · 2023-03-20T16:11:39Z

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

zadjii-msft · 2023-03-20T16:12:55Z

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

isayakmondal · 2023-03-20T16:14:00Z

@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?

zadjii-msft · 2023-03-20T16:15:55Z

Yep, that's what I'd do

isayakmondal · 2023-03-20T16:20:50Z

Write now it's looking like this

Please check out the file here -> settings.json
@zadjii-msft

zadjii-msft · 2023-03-20T16:22:29Z

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

should be

    "theme": "Example",

isayakmondal · 2023-03-20T16:27:55Z

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

zadjii-msft · 2023-03-20T16:29:20Z

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

isayakmondal · 2023-03-20T16:31:29Z

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

zadjii-msft · 2023-03-20T16:34:21Z

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.

isayakmondal · 2023-03-20T16:44:17Z

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

debajyoti1990 · 2023-04-01T06:46:11Z

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.

mohamedhaddi added the Issue-Feature Complex enough to require an in depth planning process and actual budgeted, scheduled work. label Nov 28, 2019

ghost added Needs-Triage It's a new issue that the core contributor team needs to triage at the next triage meeting Needs-Tag-Fix Doesn't match tag requirements labels Nov 28, 2019

zadjii-msft added Area-User Interface Issues pertaining to the user interface of the Console or Terminal Issue-Task It's a feature request, but it doesn't really need a major design. Product-Terminal The new Windows Terminal. labels Dec 2, 2019

ghost removed the Needs-Tag-Fix Doesn't match tag requirements label Dec 2, 2019

zadjii-msft added Needs-Tag-Fix Doesn't match tag requirements and removed Issue-Feature Complex enough to require an in depth planning process and actual budgeted, scheduled work. labels Dec 2, 2019

ghost removed the Needs-Tag-Fix Doesn't match tag requirements label Dec 2, 2019

zadjii-msft added this to the Terminal Backlog milestone Dec 2, 2019

zadjii-msft mentioned this issue Dec 2, 2019

Add comprehensive XAML "theming" functionality #3327

Open

27 tasks

j4james mentioned this issue Dec 15, 2019

Titlebar color isn't updated according to color scheme #3973

Closed

zadjii-msft mentioned this issue Feb 28, 2020

Investigate Acrylic in titlebar / not using a HRGN for the titlebar #4744

Closed

j4james mentioned this issue Jun 6, 2020

Titlebar design #6384

Closed

zadjii-msft added Area-Theming Anything related to the theming of elements of the window and removed Area-User Interface Issues pertaining to the user interface of the Console or Terminal labels Aug 4, 2021

zadjii-msft mentioned this issue Apr 27, 2022

Initial Theme support #12992

Merged

12 tasks

ghost added the In-PR This issue has a related PR label Apr 27, 2022

zadjii-msft modified the milestones: Up Next, Terminal v1.15 Apr 28, 2022

ghost removed the Needs-Tag-Fix Doesn't match tag requirements label Apr 28, 2022

zadjii-msft modified the milestones: Terminal v1.15, Terminal v1.16 Jun 6, 2022

zadjii-msft self-assigned this Jun 21, 2022

zadjii-msft closed this as completed in #12992 Jul 7, 2022

ghost added the Needs-Tag-Fix Doesn't match tag requirements label Jul 7, 2022

ghost added Resolution-Fix-Committed Fix is checked in, but it might be 3-4 weeks until a release. and removed In-PR This issue has a related PR labels Jul 7, 2022

This comment was marked as off-topic.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

mohamedhaddi commented Nov 28, 2019

DHowett-MSFT commented Nov 30, 2019

mohamedhaddi commented Nov 30, 2019

DHowett-MSFT commented Dec 2, 2019

mdtauk commented Dec 2, 2019

simioni commented Apr 5, 2020

mohamedhaddi commented Apr 5, 2020

mdtauk commented Apr 5, 2020

zadjii-msft commented May 22, 2020

ghost commented Sep 13, 2022

isayakmondal commented Mar 19, 2023

zadjii-msft commented Mar 20, 2023

isayakmondal commented Mar 20, 2023

zadjii-msft commented Mar 20, 2023

isayakmondal commented Mar 20, 2023

zadjii-msft commented Mar 20, 2023

isayakmondal commented Mar 20, 2023 •

edited

Loading

zadjii-msft commented Mar 20, 2023

isayakmondal commented Mar 20, 2023

zadjii-msft commented Mar 20, 2023

isayakmondal commented Mar 20, 2023

zadjii-msft commented Mar 20, 2023

isayakmondal commented Mar 20, 2023

This comment was marked as off-topic.

This comment was marked as off-topic.

debajyoti1990 commented Apr 1, 2023

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

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

Comments

mohamedhaddi commented Nov 28, 2019

Description of the new feature/enhancement

Proposed technical implementation details (optional)

DHowett-MSFT commented Nov 30, 2019

mohamedhaddi commented Nov 30, 2019

DHowett-MSFT commented Dec 2, 2019

mdtauk commented Dec 2, 2019

simioni commented Apr 5, 2020

mohamedhaddi commented Apr 5, 2020

mdtauk commented Apr 5, 2020

zadjii-msft commented May 22, 2020

ghost commented Sep 13, 2022

isayakmondal commented Mar 19, 2023

zadjii-msft commented Mar 20, 2023

isayakmondal commented Mar 20, 2023

zadjii-msft commented Mar 20, 2023

isayakmondal commented Mar 20, 2023

zadjii-msft commented Mar 20, 2023

isayakmondal commented Mar 20, 2023 • edited Loading

zadjii-msft commented Mar 20, 2023

isayakmondal commented Mar 20, 2023

zadjii-msft commented Mar 20, 2023

isayakmondal commented Mar 20, 2023

zadjii-msft commented Mar 20, 2023

isayakmondal commented Mar 20, 2023

This comment was marked as off-topic.

This comment was marked as off-topic.

debajyoti1990 commented Apr 1, 2023

isayakmondal commented Mar 20, 2023 •

edited

Loading