Looking for guidance on custom component CSS to support stock themes

  • 1
  • Question
  • Updated 3 years ago
What is the recommended best practice for writing a custom component and ensuring that the CSS classes can be properly themed?  Is there a way to write a custom component and designate CSS classes on the component that can "extend" themes?

A few examples:
1) Developer writes a custom component and decorates the elements with various classes.  User A has chosen "Lightning Design", User B has chosen the "Ice Age" and User C has chosen the "Cool Gray".  In the CSS within the component pack, the CSS class is only defined once.  What is the process for ensuring that the custom component gets styled properly based on the theme that the user has selected?  

2) Company has acquired App Exchange Packages from multiple ISVs (let's assume 3 different ones).  How do ensure that a user can choose a Theme and all components are styled using that theme?

3) Company has acquired Components Packs from multiple ISVs (let's assume 3 different ones) and used them throughout their application. How do ensure that a user can choose a Theme and all components are styled using that theme?

I can see a way to solve for this by creating custom themes (cloned from existing) within the org but each time you add a new App Exchange package or Custom Component pack you'd need a new theme that adds the new classes in to it.  Then, you'd need a version of that for all the themes offered to your users which can become difficult to manage.

Is there a way to define a component back itself with theme support so that out of the box it can support at least the stock themes?  

Looking for the best practice for handling these types of situations?

Thanks!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb

Posted 3 years ago

  • 1

Be the first to post a reply!