Squarespace Theme Toolkit

Site Themes available in the editing panel have different names compared to the attributes used in the site's code. Why? I’m not really sure. This can create confusion when trying to implement advanced customizations via CSS. For instance, what Squarespace refers to as "LIGHTEST 1" in the editing panel is represented as white in the code.

To help you with this, here’s a theme reference that translates the site theme names you see in the editor to their corresponding code attributes and allows you to quickly copy the value you need.

Squarespace Site Theme Data Value
LIGHTEST 1 white
LIGHTEST 2 white-bold
LIGHT 1 light
LIGHT 2 light-bold
BRIGHT 1 bright-inverse
BRIGHT 2 bright
DARK 1 dark
DARK 2 dark-bold
DARKEST 1 black
DARKEST 2 black-bold

For examples on using this toolkit effectively, check out these articles:

Featured
Use Google Material Icons in Your Squarespace Website
Use Google Material Icons in Your Squarespace Website

A full guide on how to use Google Material Icons in Squarespace. We will cover why Google Material Icons is a great font library choice, and how to insert icons in your Squarespace site.

Read More →
Change the Footer Background on a Single Page
Change the Footer Background on a Single Page

A coding hack that can change the theme of your footer in individual pages.

Read More →