Add Style & Colour to Salesforce with this App

Share this article...

Salesforce is slowly giving us the ability to customise our instance to make it feel more like our own. The Lightning Experience is bringing in some real changes to allow us to customise the look, feel and experience either across the whole Org or on a per profile basis. In the upcoming Winter ’18 release, Salesforce are making some minor appearance changes including the ability to add a background image, as well as removing a lot of the white space for less scrolling. But for those that want to add a little more pizzaz to your environment, meet Ceterna Lab’s Theme Builder.

The Theme Builder allows you to completely customise the colours that are applied to Salesforce right down to the tiny details, below you can see an example I made earlier for a famous drinks brand. The colours you can customise include the header, buttons, tabs, tables and pretty much any text on the page. Currently this works the best with Lightning Experience, but will change some colours on classic.


Creating a theme is easy and uses two elements, you must first create your customised look by accessing the Theme Builder, then load it locally onto your computer using the Lightning Restyler Chrome extension. As you might have guessed by now, the Theme Builder loads locally onto your computer so you don’t need ask permission from your manager or Administrator to carry this out.

Step 1 – Create a theme

Go to the Ceterna Labs Theme Builder and start creating your theme. You can use the tabs on the left hand side to access different sections of the standard Lightning page and choose the elements you wish to customise. You can either use the colour wheel to pick your custom colours to load onto the theme, or for a bit of precision you can use the Hexadecimal values from your branding. As you start choosing different colours, you will see the display update.

Tip – If you don’t know the hex values, you can use a site like HTML Color Codes to load your logo in and find out the correct values.

Once you are happy with your theme, hit the Export button at the top right of the page to get your custom theme code (Make sure you save this!)

Step 2 – Applying the theme

Once you’ve created a theme using the Theme Builder, now it’s time to apply. Head over to the Lightning Restyler Chrome extension and quickly install that into your browser. Once it’s installed, it’s as easy as clicking onto the extension, hitting add, and then pasting the code that you should have saved earlier.

Once added you can select the theme you wish to use, login to Salesforce and let the Lightning Restyler do the rest!

If you would like to read more about the Theme Builder/Lightning Restyler, head over to Ceterna Lab’s release post.


10 thoughts on “Add Style & Colour to Salesforce with this App

    1. Hey Justin!

      Yes the Restyler does re-brand both Salesforce modes. While the changes in Classic are not as complete as Lightning, it will still add your custom styles to most elements!


    1. Hey Mohit!

      At the moment we’ve just released the extension for Chrome, but we’re are working on the ports for both Firefox and Safari right now, and are planning to get these done by the end of the month.

      We’ll be announcing the release on both our Twitter and Medium accounts, @ceternalabs, so keep an eye out!

    1. Hey Karen,

      Sadly there is not a way to re-brand your organisation without using some form of third-party extension, so you’ll have to have each user install the extension.

      You’ll only need to build a theme once though, and just send the code to all your users to make it easy for all of them to have the same customised experienced!

    1. Hey Bill!

      Yes, sadly there is not a way to change the markup of Salesforce without using some form of third party extension to add in the custom branding.

      For setting up all the users in an org you’re responsible for, we’d recommend building your theme in advance, and then send out an email to all your users to take them through the quick steps of adding the extension, and then adding the theme you’ve built for them. It’ll only take a minute or so at max to get them all up and running with a customised on-brand experience!

  1. The ceterna theme builder doesn’t work anymore. This post is useless without the builder. Also this doesn’t work for classic. 🙁

Add Comment