Dark Mode

Site URL: https://zenbu.ltd/

We've implemented a native Squarespace dark mode on our website but we can't prevent the transition animation whenever a page is loaded.

Ideally after the choice is made, the website would only transition when the button is pressed and would otherwise load into the correct format.

Otherwise, any feedback would be appreciated as we are hoping to develop the colour scheme further.

Site URL: https://zenbu.ltd/

We've implemented a native Squarespace dark mode on our website but we can't prevent the transition animation whenever a page is loaded.

Ideally after the choice is made, the website would only transition when the button is pressed and would otherwise load into the correct format.

Any advice on cookie storing would also be appreciated as it is currently just native JS.

Awesome, it looks like you've been able to solve the issue! Any chance you'd be able to share the code you used? I've been trying to figure out how to add a dark mode button on my Squarespace site as well but can't seem to find any examples of it being done. Thanks so much!

3 hours ago, andrewtneel said:

Awesome, it looks like you've been able to solve the issue! Any chance you'd be able to share the code you used? I've been trying to figure out how to add a dark mode button on my Squarespace site as well but can't seem to find any examples of it being done. Thanks so much!

Hello, click and see this article to see if it will help you. I will paste In a code below but make sure you read the article for more Info. If you have any questions please reply to me, and also let me know if this helped you😁! https://www.worldsepsisday.org/news/2019/11/7/welcome-to-the-dark-side-our-website-now-supports-dark-mode-tutorial-on-how-to-implement-dark-mode-via-custom-css-on-squarespace

On 10/26/2020 at 7:38 AM, inunzi said:

Hello, click and see this article to see if it will help you. I will paste In a code below but make sure you read the article for more Info. If you have any questions please reply to me, and also let me know if this helped you😁! https://www.worldsepsisday.org/news/2019/11/7/welcome-to-the-dark-side-our-website-now-supports-dark-mode-tutorial-on-how-to-implement-dark-mode-via-custom-css-on-squarespace

 

@media (prefers-color-scheme: dark) {

body, .Index-page, .Footer-inner, .Footer-blocks, .Footer, .Main-content, .BlogItem-title, .Blog-meta-item, .Blog-meta-item.Blog-meta-item--author, .BlogItem-pagination-link-title, .BlogItem-pagination-link-label {

background-color: #1C1C1E ;

color: #C2C2C2;

}

body, .Main, .tweak-overlay-parallax-enabled.has-parallax-images:not(.tweak-site-width-option-constrained-width) {

background-color: #1C1C1E !important ;

color: #C2C2C2;

}

.Header-search-form-submit svg {

stroke: #C2C2C2;

}

p a , p span {

color: #C2C2C2 !important;

text-decoration-color:#C2C2C2!important;

}

a{ color: #C2C2C2 !important; border-color: #C2C2C2 !important ;}

a, h1, h2, h3, h4, h5 {

color: #C2C2C2 !important ;

}

.medium-button-style-outline .sqs-block-button .sqs-block-button-element--medium:hover {

color: #1C1C1E !important ;

background-color: #C2C2C2 !important}

.large-button-style-outline .sqs-block-button .sqs-block-button-element--large:hover {

color: #1C1C1E !important ;

background-color: #C2C2C2 !important }

.small-button-style-outline .sqs-block-button .sqs-block-button-element--small:hover {

color: #1C1C1E !important ;

background-color: #C2C2C2 !important }

.sqs-use--icon { fill: #C2C2C2

!important ; }

.tweak-social-icons-style-regular .SocialLinks-link-icon { fill: #C2C2C2

!important ; }

.Header-nav--secondary a:hover {

color: #e5007e !important ;

background-color: #C2C2C2 !important }

img {

filter: grayscale(35%);

}

}

 

 

 

 

Hi! I was wondering how do I implement a button like @Zenbu did in order to switch from the white to dark theme?  Thank you in advance! 

6 hours ago, MIL said:

Hi! I was wondering how do I implement a button like @Zenbu did in order to switch from the white to dark theme?  Thank you in advance! 

Hmm, are you meaning like a toggle?

On 11/8/2020 at 6:19 PM, inunzi said:

Hmm, are you meaning like a toggle?

Yes, this was my original question as well. Zenbu has a toggle button that visitors can click and switch between dark mode. Was wondering how to implement a similar button :)

1 hour ago, andrewtneel said:

Yes, this was my original question as well. Zenbu has a toggle button that visitors can click and switch between dark mode. Was wondering how to implement a similar button 🙂

Hmm I’m guessing here but try to add this code below, into a code block or markdown block to see if it works out for you.  Also this I a button , not a toggle. So would you rather want the toggle?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   body {
      padding: 25px;
      background-color: white;
      color: black;
      font-size: 25px;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .dark-mode {
      background-color: black;
      color: white;
   }
   .toggleButton {
      padding: 12px;
      font-size: 18px;
      border: 2px solid green;
   }
</style>
</head>
<body>
<h1>Toggle Dark/Light Mode Example</h1>
<button class="toggleButton">Toggle dark mode</button>
<h2>Click the above button to toggle dark mode</h2>
<script>
   document .querySelector(".toggleButton") .addEventListener("click", toggleDarKMode);
   function toggleDarKMode() {
      var element = document.body;
      element.classList.toggle("dark-mode");
   }
</script>
</body>
</html>

Dark Mode Plugin

I've made an Automatic Dark Mode Plugin for Squarespace. It's the best one currently available. I'll tell you how it solves these problems.

1) Automatic detection

My plugin automatically detect if dark mode is enabled.
I mean this:

My plugin uses this code

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

2) Remembering the setting

My plugin uses cookies to "remember" the dark mode setting - if user clicks on a button on website to turn it on. The automatic mode doesn't need to remember anything.

I use a javascript library called js-cookie. Example code:

//remember dark mode preference
Cookies.set('darkmode', 'dark');

3) Adding the dark mode button

My plugin has option to add the button in multiple places. For example in the navigation menu, or fixed button in the bottom and more. 

User can choose all four places or none if they only want the automatic mode.

My plugin uses this code to add the button in multiple places

// ℹ️ HELPER – CREATE TOGGLE BUTTON IN SELECTED PLACE
function createToggleButton(showOrNot, style, where) {
  $( document ).ready(function() {    
  	var toggleButtonHtml = $("<div id='darkmodetoggle' class='darkmode-darkmodeinner " + style +"'><div class='darkmodeinner'>Toggle darkmode</div></div>");
  	if(showOrNot == 'show'){
	toggleButtonHtml.prependTo(where);
	}
  }); 
}
createToggleButton('show', 'button', 'body');

Blog post

I also have a blog post about Squarespace Dark mode here