I have recently started working on a project that utilizes Bootstrap4 for design and layout. However, there is now a need for the ability to change certain core styles (such as font-face, primary color, and background color) dynamically at runtime.
Currently, the website adheres to a single default theme using Bootstrap styles. But upon user login, specific individuals require custom styling to be applied.
All the information I've come across so far suggests creating a unique theme during the build process. While this is feasible, it would mean generating a new build every time we introduce a variation for a new client. Ideally, we are looking for a centralized theme that can be easily modified with a few custom styles - potentially loaded from an API call.
The technology stack includes Meteor 1.8 with Blaze being used as the UI framework. Unfortunately, I have not found any built-in methods within these technologies to handle dynamic style changes. It seems like we will need to consider either: * A JavaScript-driven solution such as conditionally requiring a CSS file * Dynamically generating a stylesheet as shown below:
var style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('#target {color: white}');