Adding a dark theme to a Squarespace 7.0 website

I love that most mainstream apps now have their own dark theme. Naturally, I wanted my Squarespace website to also look nice at night!

Unfortunately, Squarespace hasn’t shipped a one click “make my site have a dark theme” setting. For now, you’ll need custom CSS.

I’m no web designer, but here’s the CSS that did the trick for me on my site, which is using the theme Avenue.

It’s unlikely that this will work perfectly copy/paste, but it’s worth a shot! 😉

I based my Dark theme on craigmod.com

Thanks Habib for the help with this!

🖤

/*Dark theme for Squarespace Avenue Theme! */
@media (prefers-color-scheme: dark) {
  body {
      color: #C2C2C2 !important;
      background-color: #222222 !important; 
  }
  
h1, h2, h3, h4, h5 {color: #C2C2C2 !important; }
  
a { 
color: #C2C2C2 !important;
} 
  
p a , p span { 
color:#c6 !important;
text-decoration: underline !important;
text-decoration-color:#2393DC!important;
} 
  
p a:hover , p span:hover { 
color:#2393DC !important;
text-decoration: underline !important;
text-decoration-color:#2393DC!important;
}   
  
.project-title  { color: #fafafa !important; }
    
.sqs-svg-icon--wrapper.facebook .sqs-use--mask { fill: #fafafa !important; }

.sqs-svg-icon--wrapper.linkedin .sqs-use--mask { fill: #fafafa !important; }

.sqs-svg-icon--wrapper.instagram .sqs-use--mask { fill: #fafafa !important; }
  
.sqs-svg-icon--wrapper.twitter-unauth .sqs-use--mask { fill: #fafafa !important; }
  
.sqs-svg-icon--wrapper.spotify .sqs-use--mask { fill: #fafafa !important; }
  
.sqs-svg-icon--wrapper.youtube .sqs-use--mask { fill: #fafafa !important; }  
  
.sqs-block-summary-v2 .summary-metadata-item { color: #fafafa !important;} 
  
}