sugarlabs / musicblocks

Music Blocks -- A musical microworld
https://musicblocks.sugarlabs.org/
GNU Affero General Public License v3.0
539 stars 726 forks source link

Created darkmode button and JS implementation according to Issue #383… #3876

Open Bengowang opened 2 months ago

Bengowang commented 2 months ago

…8 and updated Tone.js to use AudioWorklet Node according to Issue #3555 Hi, I have been working with my colleague to complete these two tasks as part of a school project. We are both university students taking a software engineering course.

The changes we have implemented are not complete but do offer some functionality.

We created a darkmode button in index.html, mimicking the toolbar design to the best of our abilities but the styling is still a bit off. We implemented the JS code in both toolbar.js and activity.js again mimicking the patterns to the best of our ability.

We ran into an issue with the Turtles.js library because it is used to create a canvas that acts as an overlay on the website. We weren't able to figure out where we could access its background color within activity.js. So far, the darkmode button works but only if you minimize the canvas using the collapse button in the top right below the toolbar.

Finally, we updated Tone.js to use AudioWorkletNode by finding the most recent version released by the library creators. However, they still use ScriptProcessorNode in some spots. Perhaps in the future they will completely migrate to AudioWorkletNode.

Thank you for reading!

walterbender commented 1 month ago

The background color is defined in js/utils/platformstyle.js

Probably you can do most of the work for dark mode by modifying that file.

I am a but wary of maintaining a fork of tone.js. Might make more sense to work upstream on that one.

walterbender commented 1 month ago

Also, please create separate MRs for dark mode and AudioWorklet.