Experience Builder Organization Theme doesn't match Shared Theme
I'm trying to use Shared Theme to apply our org's Brand Guideline colors to all of our apps.
For older apps the Shared Theme controls are working as expected: I can directly set the header colors, buttons, and body text. It doesn't really fit our palette well, but I can use the grayscale colors fine.
For Experience Builder, the "Organization Theme" doesn't match any of this, instead defaulting to a different mid-grey for Header Color and completely ignoring the Shared Theme Logo.
If I go through and customize a Theme, it has an entirely different set of named colors than Shared Theme.
- Primary
- Secondary
- Light
- Dark
- Success
- Info
- Warning
- Danger
Setting these gives much better results, but seems like it must be done for each app individually.
Why is the Organization Theme creating such different colors?
Is there any way to configure a common theme that respects our brand colors?
Accepted Solutions
Hi @MatthewProctor-Brown Thanks for your feedback!
The shared theme in Org is different design system compared to Experience Builder.
Experience Builder theme is much more complex and has more color variables then shared theme does. So we can only try our best to match the colors in your shared theme to ExB. The "Button background" color in your shared theme will be picked to be "Primary" color in ExB, and the "Button text" color will match the "Dark" color in ExB. The "Body background" will match the Secondary color in ExB.
There is no way to match perfectly for different theme system. But you can manually adjust the app design to use the colors from your org shared theme. In color picker of EXB, you can see these colors from org. So you can decide where to use what color to match your shared theme.
And the logo in your shared theme cannot be read over, you have to manually upload it into ExB and use it in an Image widget
Hi @MatthewProctor-Brown Thanks for your feedback!
The shared theme in Org is different design system compared to Experience Builder.
Experience Builder theme is much more complex and has more color variables then shared theme does. So we can only try our best to match the colors in your shared theme to ExB. The "Button background" color in your shared theme will be picked to be "Primary" color in ExB, and the "Button text" color will match the "Dark" color in ExB. The "Body background" will match the Secondary color in ExB.
There is no way to match perfectly for different theme system. But you can manually adjust the app design to use the colors from your org shared theme. In color picker of EXB, you can see these colors from org. So you can decide where to use what color to match your shared theme.
And the logo in your shared theme cannot be read over, you have to manually upload it into ExB and use it in an Image widget
