Skip to content
Submitted about 3 years ago

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

Yazdun•1,310
@Yazdun
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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

Community feedback

  • Ken•4,915
    @kens-visualsPosted about 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
    0
    Yazdun•1,310
    @YazdunPosted about 3 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 🙏

    0
    Ken•4,915
    @kens-visualsPosted about 3 years ago

    @Yazdun no problem, glad to be helpful 😇

    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