[Carlos Zamora (carlos-zamora)]

Summary of the Pull Request

Adds the tab color profile setting to the settings UI. It's positioned next to the tab title at the root of the profile page.

The new component uses a nullable color picker control to allow the user to pick a color. The null color is represented as "Use theme color".

The tricky part is evaluating the ThemeColor for null (aka "use theme color"). Since the value is dependent on the active theme, it can be any of the following values:

• theme.tab.background...
  • explicit color
  • accent color
  • terminal background color
• (if no theme.tab.background is defined) theme.window.applicationTheme
  • light --> #F9F9F9
  • dark --> #282828
  • default --> one of the above two values depending on the application theme

The above light/dark values were acquired by using the color picker on the tab when in light/dark theme.

Validation Steps Performed

✅ accessible value is read out
✅ explicit tab color set

• tab color is null, so we fall back to...
  • ✅ theme.tab.background: explicit color, accent color, terminal background color
  • ✅ theme.window.applicationTheme (and no theme.tab.background defined): light, dark, default (aka not defined)
    • ✅ updates when theme is changed locally and via JSON

PR Checklist

Closes part of #18318

[Carlos Zamora (carlos-zamora)]

Demo