As a platform operator, I want to quickly add new tenants with their individual CI and domain

[itrich]

As a platform operator, I want to add new tenants (e.g. municipalities) with their own CI and (sub-)domain. The tenant can be customized with a main color, a logo and is defined by a unique (sub)domain.

For instance, if the dashboard is called via buehl.airfrischt.de, the top bar is blue with a specific logo of Bühl. However, if the dashboard is called via anothercity.airfrischt.de, the top bar is green with a specific logo of AnotherCity.

[rtzll]

In other words you are asking for sub/domain-based white labeling.

Clarification

Besides logo and primary color, other colors should be overwritten as well, see quasar.variables.scss. Those colors where chosen to work with each other. Otherwise you might end up with undesirable contrasts in the UI.

Implementation

Since you don't want to change the Frontend code for every new tenant (assumption), this mechanism should allow for some sort of plugin/external configuration, where a specific sub/domain maps onto the values that should be overwritten. When a request is received the styling is looked up based on the window.location.host. If the lookup returns no match the default styling (clair-berlin) is applied.

Complexity

Due to the fact that the variables from quasar.variables.scss are compiled into the CSS, the styling has to be known at compile time.