Responsive Todo app using SASS and modular JavaScript

Hi Nadda. Great Project 👌.

About a better way to do dark mode, I checked your site out and saw you used the css :has selector on the .app wrapper. This is good, but a better way could be to define custom properties on your main element directly and just toggle that with the class change. This means your code is more maintainable and you can add more themes in the future.

Also, right now the :has selector isn't the safest for production, although the major browsers all support it, a lot of users aren't running on the most up-to-date version of their browser. So, I would suggest you use it just for progressive enhancement.

This is how my suggestion might look in code

main {
   --bg-img: url(...path-light-mode.jpg);
   --clr-bg: ...;
   --clr-text: ...;
   // and so-on
}


main.dark {
    --bg-img: url(...path-dark-mode.jpg);
    --clr-bg: ...;
    --clr-text: ...;
}

You can read more about how CSS custom properties work in the MDN docs. Hope this suggestion helps.

Happy Coding, Ayobami