QR code component with theme toggler (dark/light), flexbox and BEM
Design comparison
Solution retrospective
My 6th challenge is completed 🎉
This visibly simple component was interesting to code. I've added some optional features, like dark theme toggler. Also, the page will save the theme value using localStorage and show the page with preferred theme even after page reload.
The page also will adapt to device's preferred-color-scheme. That was done using simple media query. I would recommend adding this in your future projects. Your websites users will probably happy for this feature.
UPDATE: Due to some reasons, if your phone is in dark mode, the theme toggler was not working. I removed this features until I find the workaround. Your help in this issue is highly welcome.
UPDATE 2: I fixed the issue. Now the page can adapt to user's default theme on page load. But, I could also improve the solution so the page would adapt to device's theme change instantly. Right now the user should refresh the page for changes to occur.
This video was very helpful for theme switching. The code is clean, too. https://youtu.be/Xk12JtYG8rw?si=cJT0kI_gwDJJ1B-7
Any constructive feedback is welcome.
In case you want to watch my live coding of the component, the video is here
Take care and good luck in your other FrontendMentor challenges 👍
Community feedback
- @mohammed-sarhad-ahmedPosted about 1 year ago
This link might be helpful for fixing the issue https://youtu.be/6fTGj1TY6rE?si=LrhZMj2LoSCM7hi, a while back I coded a dark mode toggle, first I took whether or not the user toggled the mode switch before( of course loading it from the local storage) if not I used the info in that link to know the user preferred mode and use that.this made the toggle really dynamic.
Marked as helpful1@MuhammadjewelPosted about 1 year ago@mohammed-sarhad-ahmed , that video was useful. I'll try to use that approach to fix the issue.
Thanks for the help 😊
0 - @bccpadgePosted about 1 year ago
Hello @Muhammadjewel. Congratulations on completing this challenge!!!🎉
I love that you implemented the dark/light toggle. I would suggest you might add a box-shadow on card when you switch to light mode.
You did a great job
1@MuhammadjewelPosted about 1 year ago@bccpadge , thanks for the comment 😊
The card has box-shadow based on the design right now.
0
Please log in to post a comment
Log in with GitHub
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