Iconos modo oscuro

Hola Julian,

Por lo que veo en tu código, parece que estás utilizando correctamente los Styled Components para cambiar el color de los iconos según el tema. Sin embargo, mencionas que cuando recargas la página, los iconos pierden su color. Esto esta sucediendo debido a que el estado del tema no se está guardando entre recargas de la página y este el comportamiento padron, cuando usted recarga una pagina, si estabas escribiendo algo en cualquier pagina web por ejemplo, lo que escribiste será borrado etc. Entonces si deseas guardar el tema, debes guardar el estado del tema.

Esto generalmente se hace utilizando algo como localStorage en el navegador.

Aquí tienes un ejemplo de cómo podrías implementar esto:

// En tu componente donde manejas el cambio de tema, podrías tener algo como esto:

// Este es tu estado inicial
const [theme, setTheme] = useState(() => {
  // Intenta obtener el tema del localStorage
  const storedTheme = window.localStorage.getItem('theme');
  // Si hay un tema guardado, úsalo. Si no, usa el tema por defecto.
  return storedTheme ? JSON.parse(storedTheme) : 'light';
});

// Luego, cada vez que cambies el tema, también guárdalo en localStorage
const toggleTheme = () => {
  setTheme(prevTheme => {
    const newTheme = prevTheme === 'light' ? 'dark'  : 'light' ;
    window.localStorage.setItem('theme', JSON.stringify(newTheme));
    return newTheme;
  });
};

Este código intentará obtener el tema del localStorage cuando se cargue la página. Si no se encuentra ningún tema, usará un tema por defecto. Luego, cada vez que cambies el tema, también lo guardará en el localStorage.

Por favor, ten en cuenta que este es solo un ejemplo y puede que necesites adaptarlo a tu código específico.

¡Saludos!