rest-countries-api-with-color-theme-switcher

Community feedback

• 

  Sophie•430

  @ippotheboxer

  Posted about 2 months ago

  Some bugs I noticed:

  • Light and dark mode don't work. The whole app is essentially staying in dark mode, only the region filter and search get changed when I toggle the mode. You're using local storage to store darkmode, even when I change it to false, it doesn't change to light mode. I think this could be because local storage sets everything as text, so maybe true is being read as "true" rather than a boolean. For example, you do:

  const [darkMode, setDarkMode] = useState<boolean>(() => {
      return localStorage.getItem('darkmode' ) === "true"
    });
  

  But you should check localStorage.getItem('darkmode' ) === true, since it's a boolean. Also instead of returning it like this, just set useState<boolean>(false), and you could use useEffect to detect if the darkmode in local storage changes. You're basically always returning dark mode as true instead of reading it.

  • On dark mode, I can hardly read the text. On dark mode the text is supposed to be white, using a black and dark grey text makes it pretty hard to read, and when you search, I can't see the text that I'm writing.
  • Between the large and small screen sizes, there's a sudden jump to 1 per grid then to 3. So when it first changes to 3, the height is way too high for the flags and all the flags don't contain the whole flag, just a small zoomed-in portion of the flag (this can be fixed with object-fit). I think it would look better if it switched to 2, and then 3.
  • I feel like using local storage to set the theme could be a bit overcomplicated: I think it would be better to use a context to store the theme, and maybe if it changes you could then write to local storage.

  01