Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Dark mode toggle with localStorage and CSS custom properties/variables

@miranlegin

Desktop design screenshot for the Social media dashboard with theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi all,

thinking about ways to solve this challenge I've made some research on the topic and found interesting diagram that helped me with laying out basic logic for how this thing would need to function. There is more than one way the user can change the theme/dark mode settings and all of them must act synchronized. Once the initial logic was set up it was only left to write it down in Javascript. I'm aware that this is not the prettiest piece of code and if anyone has any suggestions how to improve it please let me know.

There are also couple of things in CSS itself that could be beneficial of some kind of refactoring especially duplicating CSS custom properties in favor of setting up Theme/Dark Mode and some dirty hardcoding media query values for background switching.

If you want to know more details about this project you can find it either in Repo itself or ask a question here. I would be more than glad to answer it.

Keep coding!

Cheers, Miran

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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