Squarespace Tutorial: Using Color Themes as CSS Selectors

Did you know you can use Squarespace’s color themes to customize your site even more? While Site Styles lets you change colors for different sections, adding a bit of CSS gives you more control to style specific areas based on their theme. In this quick tutorial, I’ll show you target Squarespace’s color themes in CSS, including an example for swapping a logo out on darker backgrounds.

Squarespace Color Themes

Squarespace’s color themes go from light to dark, each with a unique CSS class. Here’s a quick breakdown:

Lightest 1: .white

Lightest 2: .white-bold

Light 1: .light

Light 2: .light-bold

Bright 1: .bright

Bright 2: .bright-inverse

Dark 1: .dark

Darkest 1: .black

Darkest 2: .black-bold

How to Use Color Themes for Custom Styles

First, figure out which theme class (like .white or .dark) is applied to the section you want to style. You can do this by navigating to edit section > colors. Then, use the theme class to apply custom styles in your CSS.

Example: How to Change a Logo Based on Page Color Theme

In the following code, you can get your logo on the “Darkest 1” theme to stand out, while still using your full-color logo on lighter pages. Simply replace the example URL with your own logo.

/* Logo Change for Darkest 1 Theme */

.black .header-title-logo picture,
.white-bold .header-mobile-logo picture{
  opacity:0;
}
.black .header-title-logo ,
.black .header-mobile-logo{
  position:relative;
}
.black .header-title-logo a:after,
.black .header-mobile-logo a:after{
  content: '';
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;

/*Replace Logo Below*/
  background-image: url(https://tinyurl.com/whitelogolink);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0% 50%;
}

More Customization with Will Myers’s Targeting Library

To take your customizations further, Will Myers’ Targeting Library is an excellent resource. His library provides a comprehensive, up-to-date list of CSS selectors for elements within Squarespace.

Special thanks to Will for sharing the logo swap idea with me!