Skip to content
Submitted about 1 year ago

Todo app built with Html, css and vanilla js

Rohit Kumar•560
@rohitKumar38344
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Todo app
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

I have used the approach of changing src value to switch between light and dark mode. Is there any better way to do this?

if (darkMode == "enabled") {
  enableDarkMode();
  // img.src = "images/icon-moon.svg";
  document.getElementById("theme-changer").src = "images/icon-moon.svg";
}

Community feedback

  • Scott•240
    @scottmotionPosted about 1 year ago

    Another approach would be to use the CSS content property: https://developer.mozilla.org/en-US/docs/Web/CSS/content

    So if you had a dark mode class on the element (or parent) you could use that to determine the content url :

    .someDiv {
  content: url(../images/bg-desktop-light.jpg);
}

.someDiv.dark {
  content: url(../images/bg-desktop-dark.jpg);
}

    Of course if the class is on a parent element then the selector would be something like

    .dark .someDiv
    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord