Skip to content
Submitted over 1 year ago

Dashboard with Light/Dark Theme Switcher

accessibility, bem, lighthouse, sass/scss, tailwind-css
P
Daniel 🛸•44,740
@danielmrz-dev
A solution to the Social media dashboard with theme switcher challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

🛸 Hello Front-End Mentor Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

  • HTML
  • SASS
  • Tailwind
  • JavaScript
  • BEM Notation
  • Mobile First workflow approach

Another very fun and challenging project. That Instagram container with the gradient border gave me a hard time 😅

Now I know how the Light/Dark Modes are made.

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

Code

Please log in to post a comment

Log in

Community feedback

  • Alexandar Živkovič•70
    @stashix

    Love the translateY for the split background, I should have thought of that :)

    Were you going off of the Figma or just that good of an eye for detail? The positioning is near perfect.

    I think the Dark Mode toggle could be improved by respecting the prefers-color-scheme media query by default and only overriding the browser preference on toggle.

    Plus if toggled the state could be persisted in local storage.

    Marked as helpful
  • Ahmad Maartmesrini•120
    @Ahmad-Maartmesrini

    I love how you used a span for the toggle, made it much easier to click. I used buttons now the user has to click on the other button to switch the toggle.

  • Account deleted

    Hello Daniel, I'd like to share some thoughts on enhancing the responsiveness of our website. Specifically, when the screen width is less than 1025px, the current layout displays just one card. To optimize the user experience on mobile and tablet devices, let's consider adjusting it to showcase three cards or more. Implementing a flex-wrap property will facilitate this change seamlessly. Looking forward to your insights and collaboration on making these adjustments for an improved mobile and tablet responsiveness.

  • chems eddine bourabia•150
    @chemsodev

    perfection❤

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