This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Live Site URL:


The challenge

Users should be able to:

  • See all countries from the API on the homepage
  • Search for a country using an input field
  • Filter countries by region
  • Click on a country to see more detailed information on a separate page
  • Click through to the border countries on the detail page
  • Toggle the color scheme between light and dark mode (optional)


Home Page

Light Home Page

Dark Home Page

Country Details Page

Light Details Page

Dark Details Page


Mobile Home Page

Mobile Details Page



Built with

  • Vue – JavaScript Framework
  • Sass – For styles

Project setup

Clone the project

git clone

Install the needed dependencies

npm install

Start the development server

npm run serve

The website will start running at http://localhost:8080

Build the project for production

npm run build


View Github