Dark mode for SS7.1?

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!

If I understand you, you are wanting to invert page text  colors  and your logo color on certain pages? Things like that, could be possible with code. In order to get there you will need to post the pasword to your site, and be specific about the pages and the blocks that you want to make changes to. 

@derricksrandomviews

Hi, that would be right, thanks!

Ah, sorry I missed that - here's the password:
quirkilymade2020

I guess the logo in the header section (both mobile and desktop versions) is the main area of focus. 
The other is the section background for 'What I do' under the 'About' page.

Let me know if you need more info?

Cheers!

https://meetmichaelhenry.com/blog/2019/10/6/enabling-dark-theme-on-squarespace-with-custom-css

and this one for 7.1 and 7.0

Hey, thanks for sending this - I'll check it out 🙂

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? 

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

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!

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. 

Hey! It's been some time but in case you're still looking, I've created a Dark Mode Toggle Plugin you can use for free here that lets you add a button to your navbar that can toggle between Light and Dark mode.

https://www.squarify.xyz/plugins/p/dark-mode-toggle-plugin