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

NFT Preview Card with Light/Dark Theme

#bootstrap
Rod 260

@bague-rodnel

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm not good with color theory. For now my thought process. is "just switch to light/dark shade of the same color and try to match how 'far' the color is from black/white". lol.

Share some good resources about the topic. :)

Community feedback

Rafal 1,395

@grizhlieCodes

Posted

Super awesome for you to practice extra stuff with this project, that's the spirit I LOVE (i tend to maximise my learning per project also).

When it comes to color, I struggle also.

From what I can tell is that you can't simply 'reverse' colors and hope for the best. Sort of like the complete invert-standard that seems to be prevelant amongst newer designers/developers. You need to find a similar 'theme' color and build around it. It can also be said that for this project you might have kept this card identical, even though the background changed since it's a nice contrast.

Imagine you had 3 cards, this would be the center, and the cards on the left/right would be the ones with the white/light-gray background. All of a sudden you've made this stand out massively. I'm just saying it's not as simple as one may think.

Feel free to criticise my website's dark/light mode toggle and tell me what you think. I think we can discuss and learn from the criticism. I'll be honest, I spent 5% of my time implementing the light mode and coloring so it probably sucks. I just wanted it to seem bearable.

I also like discussing stuff :).

An interesting resource is material ui (I think this is basically a google built team that creates AMAZING resources and guidelines for us devs/designers). They cover their thinking/principles/fundementals in incredible and useful detail :)

Marked as helpful

1

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