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

[PR #17870] Add nullable colors and improve Profile.Icon in settings UI #31388

New Issue
Open
opened 2026-01-31 09:46:56 +00:00 by claunia · 0 comments
claunia commented 2026-01-31 09:46:56 +00:00
Owner
Copy Link

Original Pull Request: https://github.com/microsoft/terminal/pull/17870

State: closed
Merged: Yes

Summary of the Pull Request

Adds some pre-existing settings ($profile.foreground, $profile.background, $profile.selectionBackground, $profile.cursorColor) to the settings UI. This was accomplished by introducing a new control: NullableColorPicker. This control allows the user to pick a color from the color scheme, set the color to null, and select a color from an advanced color picker.

Improves the UI for the Profile.Icon setting by adding an "Icon Type" combo box. This allows the user to pick from multiple options:

  • None: sets the icon to "none" which is interpreted as no icon
  • Built-in Icon: presents a combo box that enumerates the Segoe MDL 2 assets
  • Emoji: presents a text box with a hint to open the emoji picker
  • File: presents a text box to input the path of the image to use

Additionally, the rendered icon is displayed in the setting container. If "none", "none" is presented to the user (localized).

References and Relevant Issues

#10000

Detailed Description of the Pull Request / Additional comments

  • NullableColorPicker control
    • includes a built-in NullColorButton to set the current value to null
    • includes a "More colors..." button to display an advanced color picker
    • uses data templates on data templates (data templates squared?) to convert the current color scheme into a grid of color chips
    • color chips display a checkmark (similar to Windows settings personalization). This automatically updates its color to stay compliant with color contrast.
    • color chips are added to a list so we can (un)check them when a new color is selected
  • SettingsContainer changes
    • Forked ExpanderSettingContainerStyle to allow for a custom preview template. This way, we can display the current value in the expander and we're not just limited to text.
    • changed type of CurrentValue property from String to IInspectable
    • added CurrentValueTemplate property to control how to display the current value
  • Miscellaneous:
    • Added a few converters (BooleanToVisibility, ColorToString, ColorToBrush)
    • Added NameWithHexCode to ColorTableEntry to expose a color as Red #RRGGBB (used for tooltips and a11y)
    • Added ForegroundPreview (and equivalent for other colors) to AppearanceViewModel to deduce the color that will be used

Validation Steps Performed

  • a11y pass (NVDA, keyboard)
  • set the color to one of the color chips
  • set the color to null
  • set the color to a value from the integrated color picker
  • control updates properly when a new color scheme is selected
  • control updates properly when a color scheme has multiple colors of the same value

Follow-ups

  • [A11y] Screen readers don't read expander's preview text
  • Add Tab Color to settings UI
  • Update CursorColor preview to display #FFFFFF as "invert"
  • Use Leonard's font picker UI, with the Segoe icon picker, so that you can filter the list
**Original Pull Request:** https://github.com/microsoft/terminal/pull/17870 **State:** closed **Merged:** Yes --- ## Summary of the Pull Request Adds some pre-existing settings ($profile.foreground, $profile.background, $profile.selectionBackground, $profile.cursorColor) to the settings UI. This was accomplished by introducing a new control: NullableColorPicker. This control allows the user to pick a color from the color scheme, set the color to null, and select a color from an advanced color picker. Improves the UI for the Profile.Icon setting by adding an "Icon Type" combo box. This allows the user to pick from multiple options: - None: sets the icon to "none" which is interpreted as no icon - Built-in Icon: presents a combo box that enumerates the Segoe MDL 2 assets - Emoji: presents a text box with a hint to open the emoji picker - File: presents a text box to input the path of the image to use Additionally, the rendered icon is displayed in the setting container. If "none", "none" is presented to the user (localized). ## References and Relevant Issues #10000 ## Detailed Description of the Pull Request / Additional comments - NullableColorPicker control - includes a built-in NullColorButton to set the current value to null - includes a "More colors..." button to display an advanced color picker - uses data templates on data templates (data templates squared?) to convert the current color scheme into a grid of color chips - color chips display a checkmark (similar to Windows settings personalization). This automatically updates its color to stay compliant with color contrast. - color chips are added to a list so we can (un)check them when a new color is selected - SettingsContainer changes - Forked `ExpanderSettingContainerStyle` to allow for a custom preview template. This way, we can display the current value in the expander and we're not just limited to text. - changed type of `CurrentValue` property from `String` to `IInspectable` - added `CurrentValueTemplate` property to control how to display the current value - Miscellaneous: - Added a few converters (`BooleanToVisibility`, `ColorToString`, `ColorToBrush`) - Added `NameWithHexCode` to `ColorTableEntry` to expose a color as `Red #RRGGBB` (used for tooltips and a11y) - Added `ForegroundPreview` (and equivalent for other colors) to AppearanceViewModel to deduce the color that will be used ## Validation Steps Performed - [X] a11y pass (NVDA, keyboard) - [X] set the color to one of the color chips - [X] set the color to null - [X] set the color to a value from the integrated color picker - [X] control updates properly when a new color scheme is selected - [X] control updates properly when a color scheme has multiple colors of the same value ## Follow-ups - [A11y] Screen readers don't read expander's preview text - Add Tab Color to settings UI - Update CursorColor preview to display #FFFFFF as "invert" - Use Leonard's font picker UI, with the Segoe icon picker, so that you can filter the list
claunia added the pull-request label 2026-01-31 09:46:56 +00:00
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 pull-request
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#31388
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?