Social links card with light mode toggle (React, Next.js, Tailwind)

What are you most proud of, and what would you do differently next time?

I successfully "converted" this challenge from HTML, CSS and a little JavaScript into a React app built with Next.js and Tailwind CSS. I'm most proud of adding a light theme to complement the default dark styling of this challenge and a toggle to move between both themes. Using animated icons for the theme toggle was another favorite addition.

What challenges did you encounter, and how did you overcome them?

The biggest challenge was getting the animated toggle icons for each theme to restart their animation when clicked and without causing errors. The solution was to create a dynamic URL for the icons, which would force the animation to restart when toggling. However, common methods for creating a dynamic URL, like using the date and time, caused discrepancies between server and client file names and would throw an error.

So, I'm using a count variable equal to 0 and increasing it by 1 when the toggle button is clicked. This allows me to create dynamic URLs for each theme's toggle icon and ensure the filenames match across client and server.

let count = 0;

export default function Toggle() {
  const imgLight = "/images/sun-to-moon-loop.svg?" + count;
  const imgDark = "/images/moon-to-sun-loop.svg?" + count;
  const [dark, setDark] = useState(false);

  const toggleTheme = () => {
    setDark(!dark);
    document.documentElement.classList.toggle("dark");
    count++;
  };