[SalesForce] Change color theme of visualforce page

Good evening everyone.

I would like to know if it is possible to change a visualforce page color the same way we choose a color for each object.

At the moment, I have this VF page that can be either of type ObjectA or ObjectB. My question is, if I can change the theme color of the page accordingly to the type of object I will have in my constructor. Imagine I work with ObjectA__c which has green color/theme in its settings. Other times ObjectB might be the one I'm working with, but the color would also change along with it. I'm not sure if I'm making myself very clear, so I'm sorry if I'm explaining myself rather awfully.

Best Answer

You can bind a "tabStyle" to the page, which causes the color theme/icon to match the named tab or object tab (Custom__Tab or CustomObject__c). However, this value cannot be dynamic, so you may need to use a template page or component that contains the logic you want to encapsulate for each object individually, then include that page in two other pages that have the desired tabStyle set.

Common.page:

<apex:page ...>
</apex:page>

Tabstyle1.page:

<apex:page tabStyle="objectA__c">
    <apex:include pageName="common"/>
</apex:page>

Tabstyle2.page:

<apex:page tabStyle="objectb__c"/>
    <apex:include pageName="common"/>
</apex:page>

This "trick" works because the CSS will be dynamically selected, and all subelements will take on the appropriate color attributes.

If the page itself does not need to be styled differently, but you want to change the style of individual page blocks, you can do this as well:

<apex:pageBlock title="Contacts" tabStyle="Contact"> ... This area is purple. </apex:pageBlock>
<apex:pageBlock title="Accounts" tabStyle="Account"> ... This area is blue. </apex:pageBlock>
Related Topic