Fix Dark Mode Bugs

[justin212407]

Description:

This PR addresses issue #4429 and fixes UI issues in dark mode affecting the grid, dialog box, and dropdown.

Changes Made:

Fixed grid and dialog box styling to ensure proper visibility in dark mode.
Adjusted background and text colors to match the dark theme.

Screenshots:

Checklist:

• The code has been tested in Dark Mode.
• There are no breaking changes.

[justin212407]

@walterbender please review this

[walterbender]

These are all good. But the grid itself is still a bit off.

[justin212407]

Ohh i guess it got overlooked i'll fix that and push that commit too

[walterbender]

The grids are rendered with this method:

https://github.com/sugarlabs/musicblocks/blob/master/js/activity.js#L2438

But the individual grid SVGs are defined in artwork.js
It is there that you could replace the color (fill and stroke) definitions with entities that get "replaced" before doing the b64 conversion in, for example, https://github.com/sugarlabs/musicblocks/blob/master/js/activity.js#L6689

[justin212407]

Sure i will take a look into it and make all the neccessary changes and then update this pr

[github-actions]

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

synthutils.test.js
VolumeActions.test.js
turtle-singer.test.js