Zenbu 0 Share Posted October 8, 2020 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
0 Zenbu 0 Author Share Posted October 8, 2020 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 andrewtneel 0 Share Posted October 26, 2020 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 inunzi 28 Share Posted October 26, 2020 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 MIL 1 Share Posted November 8, 2020 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 inunzi 28 Share Posted November 8, 2020 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? Link to post
0 andrewtneel 0 Share Posted November 12, 2020 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 inunzi 28 Share Posted November 12, 2020 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
Question
Zenbu 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.
Otherwise, any feedback would be appreciated as we are hoping to develop the colour scheme further.
Link to post
Top Posters For This Question
3
2
2
1
Popular Days
Oct 8
2
Oct 26
2
Nov 8
2
Nov 12
2
Top Posters For This Question
inunzi 3 posts
Zenbu 2 posts
andrewtneel 2 posts
MIL 1 post
Popular Days
Oct 8 2020
2 posts
Oct 26 2020
2 posts
Nov 8 2020
2 posts
Nov 12 2020
2 posts
7 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment