Adding Darkmode

[Thund3rHawk]

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

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

• Operating System: [e.g., Windows, macOS, Linux]
• Browser (if applicable): [e.g., Chrome, Firefox, Safari]
• Version of Software/Project: [e.g., v1.0.0]

Checklist

• [Y] I have read and followed the project's code of conduct.
• [Y] I have searched for similar issues before creating this one.
• [Y] I have provided all the necessary information to understand and reproduce the issue.
• [Y] I am willing to contribute to the resolution of this issue.

---

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

📚 See contributing instructions.

🙋🏾🙋🏼 Questions: Community Matrix Server.

[Bengowang]

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]

Update: We've made some headway in figuring out how the darkmode implementation is going to work, we just need some info now.

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.