sugarlabs / musicblocks

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

Adding Darkmode #3838

Open Thund3rHawk opened 3 months ago

Thund3rHawk commented 3 months ago

Current Behavior

Implement dark mode feature for enhanced user experience, enhancing accessibility and reducing eye strain. Enhance UI readability and comfort.

Desired Behavior

Dark mode should switch interface colors to darker shades, ensuring readability, reducing eye strain, and improving user experience in low-light conditions while maintaining visual clarity and accessibility.

Screenshot

Screenshot 2024-03-26 at 11 48 19 PM

Implementation

Implement a toggle button that switches between light and dark modes. Utilize JavaScript to update CSS classes dynamically, altering color schemes based on user preference.

Environment

Checklist


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

📚 See contributing instructions.

🙋🏾🙋🏼 Questions: Community Matrix Server.

Bengowang commented 2 months ago

I've attempted to complete this addition with my colleague but have run into some roadblocks. Since neither of us are very familiar with the code base we haven't been able to figure out all of the functions and facets that influence background color. Is anyone knowledgeable on what the hierarchy for what determines background color?

Bengowang commented 2 months ago

Update: We've made some headway in figuring out how the darkmode implementation is going to work, we just need some info now. Screenshot 2024-04-15 210702 So, in this screenshot, I'm not sure what this circled area is called but I need to know because it is an overlay of the overall page background. In order to implement dark mode, we need to be able to apply it to both the background and whatever the overlay is. Can someone tell me what it's called and where in the code it is? Thanks.