Fix error message visibility in Dark Theme Problems panel hover state

[Copilot]

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

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)

• Fixes microsoft/pxt-arcade#7080

---

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

[jwunderl]

@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

[Copilot]

@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.