[✨ Triage] dotnet/aspire#10013 by JamesNK - Darken dialogs displayed in dashboard darkmode #1154
Description
Triage for dotnet/aspire#10013.
Repo filter: area-dashboard issues.
MihuBot version: 1a6438.
Ping MihaZupan for any issues.
This is a test triage report generated by AI, aimed at helping the triage team quickly identify past issues/PRs that may be related.
Take any conclusions with a large grain of salt.
dotnet/aspire#10013: Darken dialogs displayed in dashboard darkmode by JamesNK
[Tool] Searching for dark mode dialogs, dashboard dialog color, dialog border color, dark mode error readability, AI dialog border (IncludeOpen=True, IncludeClosed=True, IncludeIssues=True, IncludePullRequests=True, Repository=dotnet/aspire)
[Tool] Found 47 issues, 31 comments, 47 returned results (8951 ms)
Here are the most relevant related issues and discussions for issue #10013 ("Darken dialogs displayed in dashboard darkmode"):
1. Issue #1464 (December 2023) - "Error UI is hard to read in dark theme"
- The issue reports that error dialogs and overlays in dark mode are hard to read due to poor contrast (off-white boxes with unreadable text and links).
- Multiple screenshots illustrate the problem.
- No comments, but the issue was closed, likely due to a fix.
2. Issue #1627 (January 2024) - "Contrast is bad when showing errors in dark mode"
- Reports that black text on a bright red background is hard to read in dark mode, suggesting using white text or a softer red.
- No comments, but the issue was closed, likely after a fix.
3. PR #1527 (January 2024) - "Restyle error ui and reconnection ui"
- This PR directly addresses contrast issues in dark mode for error and reconnection dialogs.
- Before/after screenshots show that the background for dialogs in dark mode was made darker, but some feedback in comments suggests it could be even darker.
- Discussion about balancing background darkness with foreground color for accessibility.
- The PR was merged, indicating improvements were made, but some desire for further darkening remains.
4. PR #1240 (December 2023) - "Override fluentui-blazor error hex, darken trace duration background"
- Fixes #690 and #689, including making error colors more readable in dark mode.
- Discussion about color choices, with feedback that some new colors were too light/dark and suggestions to use colors from other UI elements.
- Final changes aimed to improve contrast and readability, especially for error messages.
5. Issue #690 (November 2023) - "Error indicator on span in /Traces is hard to see in dark mode"
- Reports that error indicators (red on dark) lack sufficient contrast.
- Suggestions include adjusting icon style or using lighter backgrounds for error blocks.
- Comments discuss tweaking the error color variable and overriding it for accessibility.
6. PR #9809 (June 2025) - "Style dashboard blazor reconnect modal"
- Styles the reconnect dialog to use Aspire colors and support both light and dark themes.
- The PR was merged, indicating ongoing work to align dialog styles with the rest of the dashboard, including in dark mode.
7. PR #3189 (March 2024) - "Avoid reconnection modal taking up entire screen, not being able to interact"
- Centers and restyles the reconnection modal, making it less intrusive and more visually distinct.
- Comments discuss the need for a shadow or border to separate the dialog from the background, especially in light mode, but the principle applies to dark mode as well.
8. Issue #6700 (November 2024) - "Dashboard tooltips do not appear dark in dark mode"
- Reports that tooltips remain light in dark mode, suggesting a broader theme consistency issue with overlays/dialogs.
9. PR #9943 (June 2025) - "Interaction service"
- Adds a service for prompting users in the dashboard, using FluentUI dialogs.
- Comments discuss dialog content and style, referencing FluentUI guidelines.
Summary of Conclusions and Trends
- There is a recurring theme of contrast and readability issues for dialogs, overlays, and error messages in dark mode.
- Multiple fixes have been implemented to darken backgrounds, adjust error colors, and improve text contrast.
- There is consensus in the discussions that dialogs in dark mode should be darker, with lighter borders or shadows to avoid blending into the background—exactly as suggested in issue #10013.
- The AI dialog and some newer modals already use a lighter 1px border for separation, which is seen as a good pattern to follow.
- The problem is not unique to error dialogs; tooltips and other overlays have also had similar issues.
In summary:
The request in issue #10013 is well-supported by previous issues and PRs. There is a history of improving dialog readability in dark mode, with a clear trend toward darker backgrounds and subtle borders for separation. The suggestion to darken dialogs and use a lighter border is consistent with both user feedback and recent design changes in the dashboard.
Most relevant issues/PRs for further reading:
Let me know if you need a deeper dive into any specific discussion or a summary of the implementation details from the PRs!