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

Added Theme Switcher and Mobile Menu, both done with Greensock

ajr1982 140

@ajr1982

Desktop design screenshot for the Fylo dark theme landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Originally attempted to do the theme-change animation with CSS Animations, but the animation duration would only register for the first play through. After that the styles would just instantly flick over from dark to light.

Tried 'resetting' the classes as described here https://css-tricks.com/restart-css-animation/ but couldn't get it working, so used Greensock instead.

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Great work on this challenge and I really like the bonus that you've added with the theme switcher. The way you've done it with Greensock is absolutely fine 👍

Another approach that would work would be to use a combination of CSS custom properties and transition. Here's a great post on dev.to about it for more information.

I hope that helps!

0
Yari 20

@Yariandres

Posted

Good job!

0
P
AjeaS 675

@AjeaSmith

Posted

Great work ajr1982! light and dark theme slides in perfectly and it looks great on all sizes.

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