QR code component with theme toggler (dark/light), flexbox and BEM

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 👍