Jump to content

Dark mode for SS7.1?

Recommended Posts

Site URL: https://www.quirkilymade.com/

Hi there,

Hope you've had a wonderful festive season wherever you are 🙂
I have a couple of questions around Dark Mode in Squarespace 7.1, I'm still figuring my way around 7.1 so I'm still working my way around the rodeo of 7.1.

I was wondering if anyone knew how I could optimise/set colour choices to text/section blocks in dark mode for my site or to swap out my site logo (currently a png with black linework on a transparent background) with versions in white/reversed in dark mode?

Not sure this is possible yet within 7.1 or if this is something that can be done through CSS customisation (preferably not Javascript/JQuery since I'm on the personal plan).

Any advice would be greatly appreciated!

Cheers!

Link to comment
  • 7 months later...
On 8/6/2021 at 12:52 PM, Ebonyhoi said:

I have set this up on my site and its working well but the toggle doesnt appear on the mobile version - does anyone know how to make this happen? 

Can you share link to your site? We can take a look

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...

Hi everyone, is this video still considered the best or only way to have a dark mode on 7.1? It's a feature I very much want but have seen mixed reviews on this particular css, plus it's a little out of my field.

If anyone has newer alternatives or simpler options for a dark mode feature then please let me know.

Thanks!

Link to comment
  • 4 months later...
On 12/31/2020 at 3:08 PM, kwokworks said:

swap out my site logo (currently a png with black linework on a transparent background) with versions in white/reversed in dark mode?

For changing the logo on darkmode I've added a code example to this blog post. It also has a video about switching logo on dark mode as well. 

Video – changing the logo on dark mode

Code example for changing the logo

<!-- jQuery 3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
//ADD YOUR DARKMODE LOGO LOCATION BELOW
var darkmodeLogoUrl = '';

// CHECK DARK MODE USER PREFERENCE 
var getDarkModeSystemPreference = function(){
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
	if (prefersDarkScheme.matches) {
	return "dark";
	} else {
	return "light";
	}
}

$(window).on("load", function() {
  if(getDarkModeSystemPreference() == "dark"){
    $('.header-title-logo img').attr('src', darkmodeLogoUrl);
  }
}); // WINDOW LOAD END

</script>

 

 

On 8/24/2021 at 2:57 PM, Super85RK said:

If anyone has newer alternatives or simpler options for a dark mode feature then please let me know

 

 

Free dark mode tutorials

- I have my own little blog post about Squarespace dark mode which has a few links to free tutorials. It's mostly about the UI/UX and my own plugin.

- The video tutorial above by Squarestylist is probably one of the best free resources at the moment. However it's for 7.0.

- There's also a more simple, free CSS -only dark mode code snippet by snazzyview.com. That's for 7.0 Brine -templates. It's automatic, so no toggle button.

- A bit older  2019  post for “automatic” (no button to enable or disable) CSS-only tutorial for 7.0 can be found at worldsepsisday.org

- [EDIT  December 2021]  One more free tutorial by Michael Henry can be found here.

Paid dark mode plugin for Squarespace

For Squarespace 7.1 the easiest solution is probably my new Squarespace dark mode plugin. However it's not a free option. So If the free resources above don't get the results you're after you can try it 🙂 I coded it specifically for 7.1 although and I've done my best to make it super easy, flexible, simple and elegant. It'll work with 7.0 as well. 

Edited by codeandtonic
video and blog post with new code examples

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.