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.

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>