-
Notifications
You must be signed in to change notification settings - Fork 738
Fix focus indicator visibility for hyperlinks in dark mode and high contrast #2235
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
Co-authored-by: brianrob <6210322+brianrob@users.noreply.github.com>
@copilot, in addition to the current change, I'm also noticing that under high contrast, top menu bar, file path drop down, and Filter are all bright gray under high contrast dark mode. With the current change, I can see that the link selection is visible, but only barely. Please style these components to be dark like the rest of the components on the main window. |
Co-authored-by: brianrob <6210322+brianrob@users.noreply.github.com>
I've addressed the high contrast dark mode styling issues you mentioned. The changes in commit a0a27df add Key changes:
The top menu bar, file path dropdown, and filter should now appear dark like the rest of the interface in high contrast dark mode. |
@copilot, this change is not working. Please undo the change and then let's re-assess. It looks like the issue is not in PerfView's implementation of dark mode, but instead in PerfView's light mode when run under a Windows high-contrast dark mode them. Under this configuration, the links at the top of the window are light blue but on a very bright background, so they are hard to see, and the fact that one is selected is also very hard to see. Let's try to fix this by updating the LightMode.xaml theme to make the color of the selected item at the top a much darker blue. |
Co-authored-by: brianrob <6210322+brianrob@users.noreply.github.com>
I've reverted the failed high contrast changes to DarkTheme.xaml and updated LightTheme.xaml instead as requested. Changed the MenuItem.Selected.Border and MenuItem.Highlight.Border colors from bright blue (#FF2084E8) to a much darker blue (#FF1F4E79) to improve visibility of selected menu items when running PerfView's light mode under Windows high-contrast dark mode. This should provide much better contrast against bright backgrounds. Changes in commit 71fa941. |
src/PerfView/Themes/DarkTheme.xaml
Outdated
@@ -2205,10 +2205,14 @@ SOFTWARE. | |||
<Setter Property="OverridesDefaultStyle" Value="true" /> | |||
</Style> | |||
<Style x:Key="{x:Type Hyperlink}" BasedOn="{StaticResource {x:Type Hyperlink}}" TargetType="{x:Type Hyperlink}"> | |||
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please undo all changes in this file.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reverted all changes to DarkTheme.xaml as requested. Changes in commit c31b04d.
src/PerfView/Themes/LightTheme.xaml
Outdated
@@ -85,9 +85,9 @@ SOFTWARE. | |||
<SolidColorBrush x:Key="Menu.Static.Separator" Color="#FFD7D7D7"/> | |||
<SolidColorBrush x:Key="Menu.Disabled.Foreground" Color="#FF707070"/> | |||
<SolidColorBrush x:Key="MenuItem.Selected.Background" Color="#3D26A0DA"/> | |||
<SolidColorBrush x:Key="MenuItem.Selected.Border" Color="#FF2084E8"/> | |||
<SolidColorBrush x:Key="MenuItem.Selected.Border" Color="#FF1F4E79"/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This doesn't seem to work either - it looks like the high contrast theme overrides the highlighting color and chooses something very bright. The bottom status bar in PerfView is properly themed such that under dark high-contrast themes, the text is light and the background is dark. Can you please theme the top file menu bar in the same way?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed by changing the top menu bar to use SystemColors.MenuBarBrushKey
instead of theme-specific colors. This makes it work like the bottom status bar - using system colors that automatically adapt to high contrast themes. Changes in commit c31b04d.
Co-authored-by: brianrob <6210322+brianrob@users.noreply.github.com>
Copilot Post-Mortem:
|
Problem
Focus indicators were not visible for hyperlinks in dark mode and high contrast, making keyboard navigation difficult for users with visual impairments. When users press Tab to navigate through links in the left navigation section or data grid help buttons, there was no visual indication of which link currently has focus.
Root Cause
The elements in PerfView's UI are using specific colors instead of the system colors.
Solution
Updated the affected elements to use system colors, which react to the system themes.
Before/After
Before: Hyperlinks showed no visual indication when focused via keyboard navigation
After: Focused hyperlinks are wrapped in a light color when they have focus
Fixes #2234.