Branding and color pallet based on User domain (whitelabel)

[charles_bubble]

Hello folks,

I’m building an app that will have multiple tenants, each with their own set of User and custom design for all pages. I welcome any input, suggestions, or comments.

After a long search on multiple threads and a few tests, I’m implementing something similar to @blurapps suggestion at Multi-tenant subapp, one main app, or something else? - #4 by blurapps

The implementation should work for MainApp/SubApp layout (which requires Production Bubble Plan) or for a single “monolithic” app.

Each User will have a column called “Domain” which will contain the customization settings, such as:

• White Logo
• Dark Logo
• Multiple variables containing # of colors

For the logo and any other image-related customization, I’m implementing using Dynamic Image Source (Current User’s Domain’s Logo).

As for the color scheme, I’m still figuring out the best way to implement it:
(1) Using conditionals: Apply conditional in all elements that could change colors (such as texts, groups or shapes).

(2) Using CSS:
Create a reusable element that contains a single HTML block with a tag that will override the Bubble colors variable.
Ex:

I’m still figuring out how to avoid a “blinking effect” that occurs between the page loading and the result of the database query returning the Domain variables (page is loaded using default or no colors at all and, after 1 second, it is filled with the database values).

If anyone has had experience with this in the past or is currently experiencing similar issues, feel free to contribute or ping me.

Thanks!

[Sarah_Esteve]

Can you give a try to add a State on the page itself, domain datatype, set it on page load to Current user Current Domain, and refer to this state for your style code?

(In my case I ended up to add the color code directly to the user table )

[charles_bubble]

Hey Sarah, great idea! I’ll test which one is the fastest. I think it will also have the “blinking effect” because it will require database access. In the worst case, I can use the “Page is loaded” workflow to hide a “loading” message. Thanks!