Fixes #4195 (Added dark mode feature)

[Bishal77]

---

name: Pull Request
about: Submit changes to the project for review and inclusion

Description

This PR implements dark mode support for Music Blocks, integrating with Sugar's activity system to provide consistent dark mode behavior. The implementation focuses on making the workspace and canvas background adapt to Sugar's color settings

Related Issue

This PR fixes #4195 issue.

This PR fixes #

Changes Made

1. Added dark mode CSS:
   SugarLabs/musicblocks/css/dark-mode/workspace.css

• Created new file with dark mode variables and styles
• Added styles for palette and toolbar in dark mode

2. Modified Turtles class:
   SugarLabs/musicblocks/js/turtles.js

• Added DARK_BG and LIGHT_BG constants
• Added background color property
• Added setBackgroundColor method

3. Updated loader integration:
   SugarLabs/musicblocks/js/loader.js

• Added Sugar environment dark mode detection
• Added color change event listener
• Implemented dark mode toggle functionality

4. Updated activity configuration:
   SugarLabs/musicblocks/activity/activity.info

• Added supports_dark_mode = true

Testing Performed

1. Tested dark mode toggle in Sugar environment
2. Verified background color changes in:
   - Initial load
   - Sugar color changes
   - Activity restart
3. Tested compatibility with existing blocks and palettes
4. Verified UI element visibility in dark mode

Checklist

[✅] I have tested these changes locally and they work as expected
[✅] I have followed Sugar activity guidelines for dark mode
[✅] I have maintained compatibility with existing functionality
[✅] I have kept the changes minimal and focused
[✅] I have tested the changes in both light and dark modes

Additional Notes for Reviewers

Current limitations:

1. The canvas background color update needs improvement
2. Some UI elements may need additional contrast adjustments.
3. Testing in different Sugar environments would be helpful
   The implementation follows SugarLabs's activity system patterns and maintains the existing codebase structure while adding dark mode support.

---

Thank you for contributing to our project! We appreciate your help in improving it.

📚 See contributing instructions.

🙋🏾🙋🏼 Questions: Community Matrix Server.

[Bishal77]

Here everything is working good the images are :

Only limitation is in image 2:
We cannot change modes in workspace :
The dark mode implementation failed because Music Blocks uses EaselJS canvas with SVG-based background rendering
that's initialized before our dark mode code could take effect, requiring modifications to the core canvas initialization
process rather than just CSS or surface-level JavaScript changes.

[Bishal77]

Why limitation was ocured:

1. Canvas Creation Architecture:

• The workspace canvas is created using EaselJS (createjs)
• The background color is set through the __makeBoundary function in turtles.js
• The canvas is initialized before our dark mode code runs

2. Key Issues:
   // In turtles.js
   __makeBoundary() {
   // The background color is embedded in SVG during boundary creation
   img.src = "data:image/svg+xml;base64," +
   window.btoa(
   base64Encode(
   MBOUNDARY.replace("fill_color", this._backgroundColor)
   // Once SVG is created, changing _backgroundColor doesn't update the canvas
   )
   );
   }

3. Why Our Approaches Failed:

a) CSS Approach Failed:
body.dark-mode #canvas {
background-color: var(--dark-bg) !important;
}

• Failed because EaselJS canvas overrides CSS backgrounds
• The canvas background is set through SVG, not CSS

b) JavaScript Direct Modification Failed:
activity.turtles.setBackgroundColor(isDark)

• Failed because changing _backgroundColor doesn't trigger canvas redraw
• The SVG background is created once during initialization

4.Correct Approach Would Be:
-Modify the canvas initialization process in activity.js
-Update the SVG background creation in turtles.js
-Handle Sugar's color system before canvas initialization
-Implement a proper canvas refresh mechanism

5. Solution Requirements:
   // Need to modify activity.js to handle canvas initialization
   class Activity {
   constructor() {
   // Need to get SugarLab's color preference before canvas setup
   env.getEnvironment((err, environment) => {
   const isDark = environment.colorvalue.stroke === '#ffffff';
   this.initCanvas(isDark);
   });
   }
   }

This explains why simple CSS or JavaScript changes weren't sufficient - we need to modify the core canvas initialization process to properly implement dark mode.

[omsuneri]

@walterbender i dont think it is the better version as canvas and many things just seems to be uneven i guess

[retrogtx]

great effort, but I think what adding dark mode must do is basically adding it optionally as a toggle.

and the whole background should be dark as well.

please join the matrix channel, you will know more about plans around this.

the community is still figuring it out about the implementation.

[sahitya-chandra]

great effort, but I think what adding dark mode must do is basically adding it optionally as a toggle.

and the whole background should be dark as well.

please join the matrix channel, you will know more about plans around this.

the community is still figuring it out about the implementation.

@retrogtx sir How can I join matrix channel

[retrogtx]

I'm 20 years old, contributor like you only

Here is the channel: https://app.element.io/#/room/#sugar:matrix.org