Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Dark Mode


Zenbu

Question

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.

 

Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

7 answers to this question

Recommended Posts

  • 0

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.

Link to post
  • 0

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!

Link to post
  • 0
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

 

@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%);

}

}

 

 

 

 

Link to post
  • 0
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! 

Link to post
  • 0
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 :)

Link to post
  • 0
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>
Link to post

Create an account or sign in to comment

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


×
×
  • Create New...