Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Mark RootMark Root 

apex commandbutton color does not match theme's brand color

I'm not able to get my apex:commandButtons to display the color of my Theme (see below). The following are the key elements of my VFpage. What am I doing wrong? Thank you.

<apex:page docType="html-5.0">
<apex:slds />

<apex:commandButton styleClass="slds-button slds-button_brand" value="Save" />

Custom button colors don't match Theme's brand color
ANUTEJANUTEJ (Salesforce Developers) 
Hi Mark,

As you have used slds for the button class it is applying the default theme to the button, to edit the color of the background colour can you try adding the style tag with css to the button tag.

you can use below code for reference:

<style type="text/css">
.myClass{
color:white !important;
background:#00CC00 !important;
}
</style>

Link: https://developer.salesforce.com/forums/?id=906F000000099S5IAI

To get the color of the theme button you can use color picker tool.

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
 
Mark RootMark Root
Yes, I can change the color via CSS, like you suggested, but we have lots of buttons on different VFpages across different orgs with different Themes and I'd rather the Theme drive the color of the buttons, not set styles manually for each org on each page.  Make sense?
ANUTEJANUTEJ (Salesforce Developers) 
ohh, In that case, I think it wouldn't be a possible solution to add CSS to each and every button in the visualforce page.

One possible way although a little tedious that I could find is you can assign a class name to the buttons and then instead of mentioning the style tag in every visualforce page you can have a stylesheet file that modifies colour to the buttons that have the class name that you have specified, and uploading this css file as a static resource and referring it in the visualforce page.

<apex:stylesheet value="{!URLFOR($Resource.style_resources, 'styles.css')}"/>

You can use something like the above line in visualforce pages to load the css file.

2 places where a similar use was made in the documentation are below:

>> https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_resources_reference.htm

>> https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_stylesheet.htm

I hope this helps and in case if you find this helpful can you please choose this as best answer so that it can be useful for others in the future.