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

Dark/Light theme QR Code Challenge

@Ritika-Agrawal811

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey everyone! I completed another challenge - QR code component!

I tried to add dark/light mode and created a toggle to switch between the themes. I added local storage support also to not lose theme on page reload.

I found it very difficult to select colors on dark mode. Would love to know your inputs on it and any way I can improve my code!

Community feedback

T
Grace 29,310

@grace-snow

Posted

I'm afraid the theme toggle is completely inaccessible. It's fine to try and extend these challenges but not at the expense of essential accessibility. Look up how to fix it and have a go. The html needs to change the most but also the design.

Another critical accessibility issue is writing font size in px, which is an immediate WCAG failure, and especially bad when used on the html selector. By doing that you've made it impossible for people to adjust the text size. Why font-size must never be in px

Thirdly, media queries need to be defined in rem or em not px so that a site can reflow correctly no matter what text size or viewport size is used.

Marked as helpful

2

@Ritika-Agrawal811

Posted

Thank you so much @grace-snow for going through my code and finding these errors!

I read the articles you linked and searched some more to write an accessible toggle button. I've corrected all the issues. Thanks again!

0
T
Grace 29,310

@grace-snow

Posted

Well done, that looks nice @Ritika-Agrawal811

I'm not sure the button label is ideal but you've sparked me into going and researching that as I'm genuinely not sure what the best button label would be

1
Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello @Ritika-Agrawal811!

Your project looks awesome!! I love it!

I think it's nice when people add their special touch to the projects!

Great job!

2

@Ritika-Agrawal811

Posted

Thanks so much @danielmrz-dev

1
Yousef 90

@ousey-ousey

Posted

hello again so , I checked your site that give book and I noticed that the logo (your picture ) is draggable so try this

.element-class { user-drag: none; user-select: none; /* Optional: Disable text selection / } or .element-class { -webkit-user-drag: none; -webkit-user-select: none; / Optional: Disable text selection */ }

1

@Ritika-Agrawal811

Posted

Hey @ousey-ousey

Are your talking about Gumroad? That's not something I built. It's platform where you can sell digital products. I made an account there to publish ebooks.

But thanks for this tip! Learnt about "user-drag" from it.

0
Yousef 90

@ousey-ousey

Posted

aha so it is like WordPress ? I thought you made it I liked the button style and your book is amazing make more for free of course! hahhahahh happy coding! @Ritika-Agrawal811

1
Yousef 90

@ousey-ousey

Posted

Hello it's amazing ! do you use html , CSS , JavaScript (vanilla) only ?

0

@Ritika-Agrawal811

Posted

Hey @ousey-ousey, for this challenge I used those only.

I know ReactJS and Tailwind CSS too which I will practice with other challenges.

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