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

Social Media dashboard with theme switcher

@felipetn1989

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


Learned to create a toggle switch for a dark / light theme. Used a template from w3schools and adjusted the parameters for my project. Inside the javaScript, added mouseover and mouseout events for both the dark and light pages. Without them, the dark page parameters would transfer to the light page when using the toggle, so I had to create events for both cases even considering I already had hover states in my CSS. Tried to group similar elements together to save a lot of lines in the JS code.

Feedback is welcome!

Community feedback

Julia 110

@partum

Posted

You don't have to use a JS event for mouse over. You could have just used the :hover pseudo-class. Just a suggestion.

1

@felipetn1989

Posted

@partum i put a hover event on my css, but it would only work for the light version and not the dark one, since it would need different configurations for the latter. I will try to look for a css only way to be able to apply the hover for both the dark and light pages. Thanks!

0

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