Responsive Todo app using SASS and modular JavaScript

Community feedback

• 

  Ayobami Ikuewumi•850

  @IkuewumiPosted 9 months ago

  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

  Marked as helpful

  0

  ---

  

  Nada W. Abdelfattah•60

  @nabdelfattahPosted 9 months ago

  @Ikuewumi

  Hi Ayobami,

  Thank you for taking the time to review my project and for providing your suggestion regarding implementing dark mode. I appreciate your feedback and the alternative approach you've proposed.

  I will definitely explore this approach further and read more about CSS custom properties as you suggested. Your suggestion has been really helpful, and I'm grateful for your input.

  Once again, thank you for your valuable feedback and for contributing to the improvement of my project.

  Best regards, Nadda

  0