Skip to content
Submitted over 4 years ago

Social Media Dashboard With CSS Grid And Light/Dark Theme Transition

ApplePieGiraffe•30,525
@ApplePieGiraffe
A solution to the Social media dashboard with theme switcher challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey, everybody! 👋

This was an awesome challenge that was a little trickier than I initially thought! 😅

This was my first time creating a site with light/dark themes but I'm pretty happy with the result. I added this cool transition that ripples over the cards when the theme is changed! 😆

As usual, feedback is welcome and appreciated! 😊

And as always, happy coding! 😁

Code

Please log in to post a comment

Log in

Community feedback

  • Rahimullah Sharifi•155
    @Octagon-King

    That's really cool.. A question how to make the icons fixed to the cards.. in my solution when I try to change the resolution, it changes positions.

  • Anna Leigh•5,135
    @brasspetals

    Can't believe I missed this! I haven't done this challenge yet, but had to drop in to let you know that theme switch transition is fantastic! 🙌 Definitely bookmarked for when I get around to this one.

  • BerylBucket•280
    @BerylBucket

    This is so good!

    P.S. Your profile says you're a newbie, but I don't believe it. :)

  • Arturo Simon•1,805
    @artimys

    Very cool. Nice touch on the ripple animation for the items.

    Keep it up, waiting for your next solution 👍

  • tediko•6,700
    @tediko

    Hello, ApplePieGiraffe!

    Great job as always! I came to see your solution to learn something new. The only thing that caught my eye in this great project was the lack of toggle button animation. What I could suggest is:

    • Maybe instead of adding .toggle-switch__btn--inactive class to your #toggle-switch button and change justify-content to flex-end you should add this inactive class to your .toggle-switch__circle and set transform: translate() on it. Combining this with transition on your circle element you'll get nice and smooth animation. I hope that what I wrote makes sense.

    Good luck, have fun coding :)!

  • Seck Mamadou•325
    @doums85

    Waouh Just amazing PERFECT 👏👏👏

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