Social Media Dashboard using HTML, CSS, and JS

In the middle of the project I ended up having to create and add a bunch of CSS classes to the page elements in order to add the light and dark mode functionality. I should have prepared better in advance to figure out which elements had overlapping style rules and decided on an efficient way to organize the CSS classes so that I wouldn't need to spend a lot of time writing javascript code to add and remove classes.

For those who added the colored section in the upper part of the background, how did you do it? I figure one way would be to create a grid in the body elements and have the top row be the colored section but I'm sure there are other ways.

I'd be happy to hear any comments or critiques about this project. I'm sure there are many areas for improvements so if you get a chance let me know how I could improve.