Building a FlexCard for an Experience Cloud site? Use these styling hooks to inherit colors defined in the Experience Builder. This post is part of the FlexCard Design Thinking mini series.
I’m currently building some FlexCards for an Experience Cloud site, but I live in fear of the day I decide to update my Experience Cloud site’s branding, and all my cards don’t fit in anymore. No one wants to manually update each and every card whenever a color changes.
I would much rather inherit things like color, so I never have to adjust my cards (at least for that reason).
So, I dug through the CSS output of an Experience Cloud site and found the styling hooks you can use to access your site’s colors. There are hundreds of styling hooks (for your site, your CSS overrides, and the Lightning Design System), but I just grabbed the ones associated to the color palette you configure in Experience Builder:
Text Colorcolor:var(--lwc-colorTextDefault);
Detail Text Colorcolor: var(--lwc-colorTextWeak);
Action Colorcolor:var(--lwc-colorTextActionLabelActive);
Link Colorcolor:var(--lwc-brandTextLink);
Overlay Text Colorcolor:var(--lwc-colorTextBrandPrimary);
Border Colorborder-color:var(--lwc-colorBorder);
Page Background Colorbackground:var(--lwc-dxpGRoot);
How To Use
When you’re building your FlexCard:
- Select the element you want to style (like Block, Text, etc.).
- On the Style tab, add one of the CSS snippets (above) to the Inline CSS Styles section.
- Activate your card. You will only see the effect of the styling hook once you have added your active FlexCard to an Experience Cloud site page. Unfortunately, that means it’s tedious to test, but luckily you can do so by previewing your changes in Experience Builder (no need to publish your site changes to see if it worked).
In theory, these should make your FlexCards fit in with whatever branding set has been assigned for the audience of the current Experience Cloud user. You can probably extend this idea to do more than color, but I’m taking baby steps.
This Old Cloud 