Submitted over 3 years ago

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

Yazdun•1,310

@Yazdun

A solution to the Four card feature section challenge

Preview Code

Solution retrospective

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

I used grid to position cards.
I added dark and light mode as 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

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

P
Ken•4,915
@kens-visuals
Posted over 3 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”>
```
- Next, <div class="header"></div> should be <header class="header"></header>
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

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