Custom Code That Actually Works With Squarespace Color Themes

Nov 5

A better way to write your CSS so it adapts to color themes.

Note
This excerpt from an email that I sent out to Becca’s InsideTheSquare email list during a “take-over” of her social channels, the Week of Oct 26th, 2025.

Better CSS Colors 🎨

If you're using hex codes for your colors in css, we need to talk.

I have nothing against hex codes (actually, yes I do, but I'll that’s for another article), but hard coding any css colors can be problematic because they won't adapt to your section's color theme. So the next time you (or your client) changes the color theme of a section, your css might need updating. This means jumping back into the Custom CSS area or a bunch of emails back and forth with your client.

There's a better way.

Squarespace's Color Variables

Squarespace actually has a whole system for managing colors under-the-hood. And if we can understand this system, we can write much more adaptable customizations.

We already know how Squarespace handles colors:

5 palette colors → your base picks.
10 section themes → combos of those colors.

But the glue that holds it all together is CSS variables. Think of these as nicknames for your colors. Instead of saying “#ffffff” you just say “siteBackgroundColor” and Squarespace makes sure it matches that background color of your section. It's adaptable!

So instead of writing this: color: #ffffff;

Write this: color: var(--siteBackgroundColor);

And now your site magically adapts when you (or your client 👀) switch to a new color theme.

Where to Get the Goods

I've also got some great resources for you if you want to explore colors further.

Freebie → I put together a full list of Squarespace color variables you can search and copy.
Membership → My Membership + Chrome Extension makes it stupid-easy: hover, copy, paste. Done.

That's it. Stop hard-coding. Start variable-ing. Your future self (and your clients) will thank you.

Squarespace 7.1