Cómo cambiar dinámicamente el color primario de Bootstrap v5.3 en tiempo de ejecución en Angular v17

Si estás desarrollando una aplicación en Angular que utiliza Bootstrap para el diseño, es probable que desees ofrecer a los usuarios la capacidad de seleccionar un color de tema. Sin embargo, cambiar el color primario de Bootstrap (definido como --bs-primary) en tiempo de ejecución sin recargar la página puede ser un desafío. A continuación, se describen los pasos necesarios para lograr esto y se abordan algunos problemas comunes que podrías encontrar.

Problemas Actuales

Actualmente, el color primario de Bootstrap se define en SCSS de la siguiente manera:

$primary: #0d6efd; 
@import "bootstrap/scss/bootstrap";

Este método requiere recompilación cada vez que se desea cambiar el color, lo que no es una opción práctica para una experiencia de usuario instantánea. Intenté usar variables de CSS para sobrescribir el color primario, pero encontré que no funcionaba para todos los componentes de Bootstrap, como botones y alertas.

Intentos y Soluciones

1. Uso de Variables CSS: Intenté definir el color primario en el nivel :root usando variables CSS:

   :root {
      --bs-primary: #{$primary};
   }

   Sin embargo, este enfoque no actuó como se esperaba y no cambió el color en todos los componentes.

2. Actualización Dinámica de Variables con JavaScript: Posteriormente, probé actualizar las variables CSS dinámicamente en TypeScript utilizando la siguiente función:

   changeThemeColor(color: string): void {
      document.documentElement.style.setProperty('--bs-primary', color);
      const primaryRgb = this.hexToRgb(color);
      if (primaryRgb) {
          document.documentElement.style.setProperty('--bs-primary-rgb', `${primaryRgb.r}, ${primaryRgb.g}, ${primaryRgb.b}`);
      }
   }

   A pesar de que esta modificación actualizaba el color en algunos elementos, como el texto con la clase text-primary, el botón no reflejaba el nuevo color.

Solución Efectiva

Para resolver este problema y asegurarte de que todos los componentes de Bootstrap respondan al cambio del color primario, asegúrate de que estás aplicando las variaciones de CSS correctamente. Aquí hay una solución alterna:

1. Definir el Color Primario Globalmente: Asegúrate de que la variable de CSS --bs-primary esté definida en el nivel de :root:

   :root {
      --bs-primary: #0d6efd; /* Color inicial */
   }

2. Modificación Dinámica: Llama a la función changeThemeColor cada vez que un usuario seleccione un nuevo color. El código anterior debería funcionar, pero asegúrate de que todos los estilos que dependan de --bs-primary lo usen directamente en su CSS.

3. Revisar Componentes: Asegúrate de que los estilos de todos los componentes (botones, alertas, etc.) estén efectivamente utilizando la variable CSS. Esto puede requerir un ajuste en tu CSS para asegurar que las propiedades se basen en --bs-primary.

Conclusión

Cambiar dinámicamente el color primario de Bootstrap en Angular es posible y puede mejorar significativamente la experiencia del usuario al permitir la personalización de temas. Al seguir los pasos anteriores y asegurarte de que tu CSS esté configurado correctamente para utilizar variables, podrás ofrecer una funcionalidad de cambio de tema fluida.