Frontend Mentor | Four card feature section 🌜 Dark-mode / Light-mode feature coding challenge solution

Solution retrospective

Hello my fellow developers ! Here is my solution for this challenge with a extra feature :

And I have some questions :

It's first time I'm adding dark-mode to my project and I was very unfamiliar and had to do a lot of research, What are best practices to create dark mode using sass ? Is my approach any good ?
This should've loaded initial theme based on user's OS theme, But it seems like It's not working after deployment, does it work for you?
Can you switch themes or is my solution broken ? 😐

✅ Let me know your thoughts and feedbacks on this

Community feedback

Ken• 4,915

@kens-visuals

Posted over 2 years ago

Hey @Yazdun 👋🏻

I've got some feedback for the project.

For the icons, add aria-hidden="true”, because they are for decoration. You can read more about aria-hidden here. For example:

<img class="card__icon" src="./images/icon-team-builder.svg" alt="" aria-hidden="true”>

Now what comes to the questions:

I'm not really experienced with dark mode and how to implement it, so I'll let other mentors to give some suggestions on that.
When I first opened the website, I was going to tell you to add a feature to load the site based on user's preferences, but then I saw the question. Unfortunately, that option is not working, it just opened in white mode, whereas my theme of preference is dark.
Overall, you added a cool feature, and it works as expected.

I hope this was helpful 👨🏻‍💻 Cheers 👾

Marked as helpful

Yazdun• 1,310

@Yazdun

Posted over 2 years ago

@kens-visuals Hello Ken ! I added header instead of div and also added alt="" aria-hidden="true" to my images, Thanks for the heads up 👍

Also I will do more research on how to apply theme based on user's OS preference, Thanks for informing me about It's functionality 🙏

Ken• 4,915

@kens-visuals

Posted over 2 years ago

@Yazdun no problem, glad to be helpful 😇

Four card feature section 🌜 Dark-mode / Light-mode feature