[PR #3789] [MERGED] Add support for setting a tab's color at runtime w/ context menu #25501

Open
opened 2026-01-31 09:09:55 +00:00 by claunia · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/microsoft/terminal/pull/3789
Author: @gbaychev
Created: 11/30/2019
Status: Merged
Merged: 5/4/2020
Merged by: @undefined

Base: masterHead: dev/tabs-color


📝 Commits (10+)

📊 Changes

24 files changed (+1202 additions, -6 deletions)

View changed files

📝 .github/actions/spell-check/dictionary/apis.txt (+1 -0)
📝 .github/actions/spell-check/patterns/patterns.txt (+1 -0)
📝 .github/actions/spell-check/whitelist/web.txt (+1 -0)
📝 src/cascadia/LocalTests_TerminalApp/TabTests.cpp (+1 -0)
📝 src/cascadia/LocalTests_TerminalApp/pch.h (+2 -0)
src/cascadia/TerminalApp/ColorHelper.cpp (+269 -0)
src/cascadia/TerminalApp/ColorHelper.h (+32 -0)
src/cascadia/TerminalApp/ColorPickupFlyout.cpp (+103 -0)
src/cascadia/TerminalApp/ColorPickupFlyout.h (+27 -0)
src/cascadia/TerminalApp/ColorPickupFlyout.idl (+12 -0)
src/cascadia/TerminalApp/ColorPickupFlyout.xaml (+146 -0)
📝 src/cascadia/TerminalApp/Resources/en-US/Resources.resw (+21 -0)
📝 src/cascadia/TerminalApp/Tab.cpp (+222 -1)
📝 src/cascadia/TerminalApp/Tab.h (+16 -2)
📝 src/cascadia/TerminalApp/TerminalPage.cpp (+190 -1)
📝 src/cascadia/TerminalApp/TerminalPage.h (+5 -0)
📝 src/cascadia/TerminalApp/TitlebarControl.cpp (+0 -1)
📝 src/cascadia/TerminalApp/TitlebarControl.h (+0 -1)
📝 src/cascadia/TerminalApp/lib/TerminalAppLib.vcxproj (+15 -0)
📝 src/cascadia/TerminalApp/lib/TerminalAppLib.vcxproj.filters (+5 -0)

...and 4 more files

📄 Description

This commit introduces a context menu for Tab and a new item,
"Color...", which will display a color picker.

A flyout menu, containing a custom flyout, is attached to each tab. The
flyout displays a palette of 16 preset colors and includes a color
picker. When the user selects or clears color, an event is fired, which
is intercepted by the tab to which the flyout belongs.

The changing of the color is achieved by putting the selected color in
the resource dictionary of the tab, using well-defined dictionary keys
(e.g. TabViewItemHeaderBackground). Afterwards the visual state of the
tab is toggled, so that the color change is visible immediately.

Custom-colored tabs will be desaturated (somewhat) by alpha blending
them with the tab bar background.

The flyout menu also contains a 'Close' flyout item.

Validation Steps Performed

I've validated the behavior manually: start the program via the start
menu. Right click on the tab -> Choose a tab color.

The color flyout is going to be shown. Click a color swatch or click
'Select a custom color' to use the color picker. Use the 'Clear the
current color' to remove the custom color.

Closes #2994. References #3327.


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/microsoft/terminal/pull/3789 **Author:** [@gbaychev](https://github.com/gbaychev) **Created:** 11/30/2019 **Status:** ✅ Merged **Merged:** 5/4/2020 **Merged by:** [@undefined](undefined) **Base:** `master` ← **Head:** `dev/tabs-color` --- ### 📝 Commits (10+) - [`eeeed7f`](https://github.com/microsoft/terminal/commit/eeeed7f608442401be47aa4f5b9cf33d1e1d62cd) Add tab colors #2994 - [`a223c8d`](https://github.com/microsoft/terminal/commit/a223c8d75628b7667da6ccb709a85cfd31635748) Merge from upstream/master - [`524ce1c`](https://github.com/microsoft/terminal/commit/524ce1c2bf11e11d01cbbe8e0441c04245d91c30) Use events when picked color changes, adjust the preset colors (#2994) - [`2109095`](https://github.com/microsoft/terminal/commit/2109095a5cc556be0e5454a542c0f76ffc941e50) Merge from master (#2994) - [`894d8f9`](https://github.com/microsoft/terminal/commit/894d8f9486c849ddf9460c5c16f62db3fd74de42) Do code formatting (#2994) - [`a4b01b3`](https://github.com/microsoft/terminal/commit/a4b01b3f4b5663837c91d613cc26bc880795b2af) Merge branch 'master' into dev/tabs-color - [`306a8da`](https://github.com/microsoft/terminal/commit/306a8da94b922b447d48ce77160e578d4e44f5c5) Remove unwanted merge artifact (#2994) - [`3fcfe7f`](https://github.com/microsoft/terminal/commit/3fcfe7ffcdd453e9b33243afcd88a982c9fb5d73) Merge from master - [`a92a0e7`](https://github.com/microsoft/terminal/commit/a92a0e7876ba63ca49deb9a7d1606b255cdd904a) Merge branch 'master' into dev/tabs-color - [`a5aa717`](https://github.com/microsoft/terminal/commit/a5aa7176c5f6790fec806a61b3b6caf397cafd27) Merge branch 'master' into dev/tabs-color ### 📊 Changes **24 files changed** (+1202 additions, -6 deletions) <details> <summary>View changed files</summary> 📝 `.github/actions/spell-check/dictionary/apis.txt` (+1 -0) 📝 `.github/actions/spell-check/patterns/patterns.txt` (+1 -0) 📝 `.github/actions/spell-check/whitelist/web.txt` (+1 -0) 📝 `src/cascadia/LocalTests_TerminalApp/TabTests.cpp` (+1 -0) 📝 `src/cascadia/LocalTests_TerminalApp/pch.h` (+2 -0) ➕ `src/cascadia/TerminalApp/ColorHelper.cpp` (+269 -0) ➕ `src/cascadia/TerminalApp/ColorHelper.h` (+32 -0) ➕ `src/cascadia/TerminalApp/ColorPickupFlyout.cpp` (+103 -0) ➕ `src/cascadia/TerminalApp/ColorPickupFlyout.h` (+27 -0) ➕ `src/cascadia/TerminalApp/ColorPickupFlyout.idl` (+12 -0) ➕ `src/cascadia/TerminalApp/ColorPickupFlyout.xaml` (+146 -0) 📝 `src/cascadia/TerminalApp/Resources/en-US/Resources.resw` (+21 -0) 📝 `src/cascadia/TerminalApp/Tab.cpp` (+222 -1) 📝 `src/cascadia/TerminalApp/Tab.h` (+16 -2) 📝 `src/cascadia/TerminalApp/TerminalPage.cpp` (+190 -1) 📝 `src/cascadia/TerminalApp/TerminalPage.h` (+5 -0) 📝 `src/cascadia/TerminalApp/TitlebarControl.cpp` (+0 -1) 📝 `src/cascadia/TerminalApp/TitlebarControl.h` (+0 -1) 📝 `src/cascadia/TerminalApp/lib/TerminalAppLib.vcxproj` (+15 -0) 📝 `src/cascadia/TerminalApp/lib/TerminalAppLib.vcxproj.filters` (+5 -0) _...and 4 more files_ </details> ### 📄 Description This commit introduces a context menu for Tab and a new item, "Color...", which will display a color picker. A flyout menu, containing a custom flyout, is attached to each tab. The flyout displays a palette of 16 preset colors and includes a color picker. When the user selects or clears color, an event is fired, which is intercepted by the tab to which the flyout belongs. The changing of the color is achieved by putting the selected color in the resource dictionary of the tab, using well-defined dictionary keys (e.g. TabViewItemHeaderBackground). Afterwards the visual state of the tab is toggled, so that the color change is visible immediately. Custom-colored tabs will be desaturated (somewhat) by alpha blending them with the tab bar background. The flyout menu also contains a 'Close' flyout item. ## Validation Steps Performed I've validated the behavior manually: start the program via the start menu. Right click on the tab -> Choose a tab color. The color flyout is going to be shown. Click a color swatch or click 'Select a custom color' to use the color picker. Use the 'Clear the current color' to remove the custom color. Closes #2994. References #3327. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
claunia added the pull-request label 2026-01-31 09:09:55 +00:00
Sign in to join this conversation.
No Label pull-request
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/terminal#25501