React Countries REST API + Styled Components

Solution by
Desktop design screenshot for the REST Countries API with color theme switcher coding challenge
This is a solution for...

REST Countries API with color theme switcher

View Challenge

Design Comparison



  • 0Accessibility

  • 1HTML

View Report

Aaron Stroud's questions for the community

In this initial release, I deviated from the design in a couple of ways:

  • I left out the DarkMode label. I think it looks better as a single icon.

I still need to fix the blinding darkmode flash. It's annoying on the initial load, but it becomes downright infuriating when you rapidly navigate between border countries (while in darkmode).

I'm planning to use this Josh Comeau post as a guide The Quest for the Perfect Dark Mode, but I'm going to need to overhaul my themes and darkmode to fix the flash. 💥


  • <del>I used flex box for the grid, so I couldn't get the cards to justify along the sides (justify-content: space-between) with a gap. Should I refactor using css grid?</del> (Safari now supports gap with flexbox as of last month)
Slack logo

Join our Slack community

Join over 75,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!