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
