Adding a Dark Theme to a Squarespace Site

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! 😉

/*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;} 
  
}

I based my Dark theme on craigmod.com
Thanks Habib for the help with this!