Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Dec 4, 2025

Error messages in the Problems panel become unreadable when hovered in Dark Theme due to insufficient contrast between text and hover background.

Changes

  • Added CSS overrides in theme/color-themes/overrides/arcade-dark-overrides.css to force var(--pxt-neutral-foreground1) on hover/focus states for error list items
  • Ensures consistent contrast using theme's standard foreground color variable

Technical Details

The Problems panel's default hover state doesn't account for Arcade's dark theme palette. Override targets:

  • .errorList .errorListInner .ui.selection.list .item:focus
  • .errorList .errorListInner .ui.selection.list .item:hover
.errorList .errorListInner .ui.selection.list .item:focus,
.errorList .errorListInner .ui.selection.list .item:hover {
    color: var(--pxt-neutral-foreground1) !important;
}
Original prompt

This section details on the original issue you should resolve

<issue_title>Error message visibility issue in Dark Theme on hover</issue_title>
<issue_description>Describe the bug
When using the Dark theme, the error message displayed in the Problems panel becomes difficult to read when hovering over it.

Steps to reproduce the behavior:
1.Navigate to Microsoft MakeCode Arcade
2.Set the theme to Dark via Settings --> Theme --> Dark.
3.Create a new project and switch to JavaScript or Python editor.
4.Drag some code blocks into the workspace.
5.Introduce an error and hover over the error message in the Problems panel.

Actual behavior
The error message is hard to see in Dark theme when hovering.

Expected behavior
Error messages should remain clearly visible and readable when hovered over in Dark theme.

Screenshots
Image

Additional context
1.OS: Windows 11 24H2
2.Browser: Chrome(tested only on this browser.)
3.Arcade version : 2.1.14
4.Microsoft MakeCode version: 12.2.2</issue_description>

Comments on the Issue (you are @copilot in this section)


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Co-authored-by: jwunderl <5615930+jwunderl@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix error message visibility issue in dark theme on hover Fix error message visibility in Dark Theme Problems panel hover state Dec 4, 2025
Copilot AI requested a review from jwunderl December 4, 2025 22:58
@jwunderl
Copy link
Member

@copilot that's the wrong selector. One of the selectors that is being colored badly on hover is .errorList .errorListInner .ui.selection.list .item:focus, .errorList .errorListInner .ui.selection.list .item:hover

Co-authored-by: jwunderl <5615930+jwunderl@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Dec 11, 2025

@copilot that's the wrong selector. One of the selectors that is being colored badly on hover is `.errorList .errorListInner .ui.selection.list .item:focus, .errorList .errorListInner .ui.selection.li...

Fixed in 5e05d7e. Updated the CSS selector to target .errorList .errorListInner .ui.selection.list .item:focus and .item:hover as specified.

@jwunderl jwunderl marked this pull request as ready for review December 11, 2025 18:40
@jwunderl jwunderl enabled auto-merge (squash) January 13, 2026 23:54
@jwunderl jwunderl disabled auto-merge January 13, 2026 23:54
@jwunderl jwunderl enabled auto-merge (squash) January 13, 2026 23:54
@jwunderl jwunderl merged commit 537de99 into master Jan 14, 2026
21 checks passed
@jwunderl jwunderl deleted the copilot/fix-error-message-visibility branch January 14, 2026 00:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Error message visibility issue in Dark Theme on hover

3 participants