How to change color themes
This article is about how to change colors themes in Squarespace.
*🖼️ You will find screenshots for each step, customized to the specific template you've chosen.
🔸 I’ll be using the “Style Sheet – Tutorial” page, located in the Not Linked section, as an example in this tutorial. This page showcases the Harmony Template Color Themes and you can use it and easily see what the content of your site will look like when you make changes on the Colors menu.
•💡Changes made in Site Styles apply across your entire site. If you update a theme, the changes will automatically apply to all sections that have that theme assigned.
If you're using a Style Sheet page or any other page to experiment with different colors, keep in mind that you can always revert back to the previous color.
To do this, you can use the undo and redo arrows in the top-left corner of the editor. These work for most changes in the page editor, including blocks, sections, section styles, and site styles.
If you click Save in the top-left corner while editing, you can still undo or redo changes within that session. However, once you Exit the page, your editing session ends, and any changes you made can no longer be undone or redone.
• From the “Style Sheet - Tutorial” page on your site:
Go to edit mode.
Click on the paint brush icon on the top right-hand side. And you will reach a menu.
Click on Colors. This is where you have the Color Palette and Color Themes.
4. Click the Edit icon right next to Lightest 1 and you will reach a menu.
Let’s change the Background color:
5. Click the circle next to where it says Section Background and the Color Palette will pop up.
The Background has been assigned to that off-white color from the Palette.
You can select a different color from the Palette:
You can also hop into Custom and assign any color you want.
Click and move the slider along and grab a color.
First move the slider #1 along and grab a color.
Then, move the circle #2 along and grab the shade you like.
Let’s say you want this pink:
There you go, now you’ve made it a pink.
To move this background back to the color it was set before you can:
• Go to your Palette and select the color.
• You can click the undo and redo arrows in the top-left corner of the editor. They apply to most things you can change in the page editor, including blocks, sections, section styles, and site styles.
🔸 If you click Save in the top-left corner while editing the page, you can continue to undo or redo changes.
👀 When you Exit the page, this ends your editing session, and any changes you made can't be undone or redone anymore.
• For this walkthrough, we’ll use the Dark 1 theme as an example.
Scroll down the Style Sheet Tutorial page until you find Dark 1.
Now, I do want you to notice one really interesting thing:
• At the bottom of the Palette Colors, you have a bar to adjust the opacity or level of transparency of the colors by using the slider.
Scoot the circle icon slightly to the left and you’re going to see that pink get lighter.
🔸 Remember, you have all of these sections lined out for each one of the Harmony Template’s Color Themes on a Page named “Style Sheet - Tutorial” located on the Not Linked section. You can use it and easily see what the content of your site will look like when you make changes on this Colors menu.