How to Extract Colors from a Theme Builder Customized Site

If you see a theme of your liking on our Demos Website, or you have a theme applied to your website and have no access to the Theme Builder to check the colors, here's how you can extract the 6 main colors of ShortPoint theme builder.

TABLE OF CONTENTS

• Intro
• Step-by-step Tutorial
  • Step 1. Open the console on the target site.
  • Step 2. Use a command to learn the color.
  • Step 3. Copy the colors and use them.

Intro

ShortPoint Theme Builder uses six colors that you can setup to brand your website. These are:

• Primary Color
• Secondary Color 
• Highlight Color
• Alternate Color 1
• Alternate Color 2
• Alternate Color 3

You can set these up when in Theme Builder by going to Branding > Color Palette:

But because ShortPoint picks up the pre-set colors of your branding automatically, the colors are not retained in case you copy a theme from one place to another. 

You might have noticed that when you import designs from the Demos Website to your tenant, the colors of the Demos Website theme are replaced with your tenant branding colors.

But in case you prefer to use the exact same colors we used, this tutorial is for you. 

Below is a guide on how to get these colors.

Step-by-step Tutorial

Step 1. Open the console on the target site.

On the SharePoint website from where you want to copy the colors from, open the console 

("Cmd + Option + J" (on a Mac) or "Ctrl +Shift +J" (on Windows). 

As an alternative, you can right-click on the webpage and click "Inspect" to open the developer console).

Step 2. Use a command to learn the color.

Here is the list of commands that you can copy, put into your console, and hit Enter to learn a color.

Here is an example where I learn about the Highlight Color:

Use them one by one: copy a command, paste into the Console, and the color will be displayed for you:

Step 3. Copy the colors and use them.

You can copy each color to a text or code editor and use them in you own Theme Builder (Branding > Color Palette) or even make it a part of your theme (in case you need to re-use the same theme with the exact same colors in many different sites).

Related articles:

•  How to Export a Theme Builder Theme with Colors
• Getting Started with ShortPoint Theme Builder - Modern SharePoint Sites (Part 1)
• Getting Started with ShortPoint Theme Builder - Modern SharePoint Sites (Part 2)