Using ReactQuery + Local Storage to persist Dark Mode over mult visits

I used quite a hacky way of changing the dark-to-light mode, by changing the css root variables from inside the Header component (which can apparently be done, quite cool!).

It was non-trivial how to persist which mode a user enabled between the home page and the detail page, so I used localStorage to persist this between the pages. This does not seem as the best solution though, how would you do this?

Additionally, I was wondering whether there was a smarter way of getting the border country names from the codes on a CountryPage than doing an additional API request. I imagine I could pass the full countryList prop to the CountryPage component and then filter in there, but then users which would directly go to the CountryPage, would not be able to see the bordering countries.

I suppose the best would be giving the CountryList as props to the CountryPage, but then that the CountryPage checks whether it has the list before rendering and if not, that it then does an additional request to get the bordering countries by the code API call.

More meta question: To what extent should we prefer trying to persist data in our applications rather than making API requests?