Responsive API Countries Web App Using Angular, Html and CSS

1. Country Details: You are using the endpoint https://restcountries.com/v3.1/name/{name}, now this might work in almost all cases, but in some it just doesn't. Like when I click on India, it shows me the details for British Indian Ocean Territory. That's because the endpoint is sending the results for all the countries having India in its name & then you are displaying the first object in the array. I suggest you use the endpoint: https://restcountries.com/v3.1/alpha/{code} & use the ccna3 which is the unique country code.
2. Persistent Theme: The theme switcher works, but when I refresh it goes back to the default theme & doesn't remember my preference. You can use LocalStorage to achieve this.
3. Details Page: If I refresh the details page or share the link for a certain countries details page, the page doesn't load due to the App being an SPA. I see you deployed your app on Netlify so, the solution is really simple, you just need a small Netlify Config File which tells Netlify how to handle this situation. You can read about it here. You just require a netlify.toml file in your project with the following redirect instructions:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Hi. Congrats on the completion of this project. An extra features you can add is to store the themes state using browser localstorage so that your site can maintain the theme state even if the page was reload. Right now if I switch to light mode and reload the web page its switching back to the default theme. Using browser storage to store the theme and accessing the themes based on user preference will prevent this from happening. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage