Method to find Default Primary (Main) Color Theme in a Squarespace Template

Each Squarespace 7.1 template has 10 color themes. Each Squarespace template comes loaded with one unique primary color theme and nine general color themes. All color themes have following common characteristics.

Free Help Offer:

Just Email me and I will share my WhatsApp. Then you can show your computer screen through WhatsApp video call and I will help you changing colors of your Squarespace website.

Common Characteristics of Color Themes

Settings tweaks of all color themes apply to all pages on website. It means that if you insert a color theme on any section of a page, it will show same colors for text, buttons, background, and other micro color tweaks, on all other pages throughout website when used.

The name of each color theme used for a section is clearly displayed inside preview.

How to find Default Primary (Main) Color Theme in a Squarespace Template

All ten color themes have same tweaks for different elements on your website. You can access those tweaks by clicking pencil icon on a color theme. For example, if you click pencil icon of ‘Dark 1’ theme, its color tweak options are exactly same with that of ‘Lightest 1’ color theme but selected color for each tweak is different.

Application of any color theme to a section, will override the settings of current color theme on the section.

Importance of Finding the Primary Color Theme

Each template comes with one primary color theme. It is important to find out primary color theme in a template. Primary color theme allows you to quickly customize colors throughout the whole website.

Method To Determine Primary Color Theme in Squarespace?

To determine the primary color theme of a template, create a new page or section and focus on background and text colors, used on of most of built-in layouts in the pop-up window, then match same colors in themes list. You will easily find the primary color theme of a template.

Pro Tip: If you have already tweaked with the primary color theme, you cannot easily find it. For this purpose, start over by selecting the template again or restoring the respective color theme.

In fact, primary color of your Squarespace website is what that is applied by the person (template designer) on most sections of original template, who designed that particular template. Each template has a different primary color theme.

Key Differences in Primary and General Color Themes

Basic design and look of your selected template are tied and used with a primary or current color theme. Therefore, primary color theme differs from any general theme in following ways.

Primary color theme is what that is used by design on most areas of website - it is default color theme of a template. For example, in Barbosa template, primary color theme is Dark 1. Head over to themes list on right side and notice that Dark 1 color theme uses dark green background with white text over it. Now open different built-in pages and you can confirm that almost all pages have dark green background with white text.

Now let’s understand this with another example of Carmine template. You can see that primary color theme uses yellow background with black text. But on some pages, for example Tickets page, you see different black background in a section. It is because, black background is used only on this section using Darkest 1 theme which is a general color theme. Primary color theme in Carmine template is Bright 2. You will better understand this in next step.

If you create a new page or a new section on a page, its color scheme will follow the settings of the primary color theme, instead of any general theme.

Now, in Carmine template, if we create any new page or section, the background color will automatically load in yellow background with black text. This determines that primary background color of Carmine template is yellow. Now test it in some other template. If we create new section or new page in Barbosa template, the automatically loaded color for background will be dark green, which means that dark green is the primary color of Barbosa template.

Any changes or color tweaks in primary color theme applies to whole website in just one click. This is not the case with any general color theme. For example, primary color theme of Barbosa template is Dark 1. Now take any section and apply any of nine general color themes on this section. If we apply Lightest 1 color theme, it will change background color into white. Let’s change color of Lightest 1 theme to black. Click on pencil icon against Lightest 1 theme. In the ‘Section Background’ field change color from white to black. You will notice that black color is applied only to this one section. This tweak has not changed color of whole website to black because, Lightest 1 theme is not a primary theme. Any general color theme will only change color of a particular section on a page. It will not change colors of whole website.

Now change color of Dark 1 theme from dark green to orange. You can check that it has changed background color of whole Squarespace website to orange with one click, because Dark 1 is the primary color theme of this Barbosa template. You can open different pages to confirm that background of all pages has become orange.

So, the takeaway for you, is that use primary color theme to customize any changes throughout website with one click and use any general theme to change color scheme on a particular section of a page, to create a contrast and prominence for that section on a page.

More Resources

Check more resources which are helpful in designing a Squarespace website.

Irfan Hayat

As the Founder and CEO of DOZRO and various other ventures, I bring a wealth of diverse life experiences to the forefront. At heart, I am a passionate tech enthusiast. Feel free to explore our range of Pro Services, such as website and graphics design, SEO, and video editing, with confidence.

https://www.dozro.com/irfan-hayat
Previous
Previous

Squarespace Remove text link underline without CSS

Next
Next

Squarespace Method to apply background color Highlight to Text