Zenbu Posted October 8, 2020 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 comment
Zenbu Posted October 8, 2020 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 comment
andrewbn Posted October 26, 2020 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 comment
inunzi Posted October 26, 2020 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 comment
MIL Posted November 8, 2020 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 comment
inunzi Posted November 8, 2020 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 comment
andrewbn Posted November 12, 2020 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 comment
inunzi Posted November 12, 2020 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 comment
codeandtonic Posted December 29, 2021 Share Posted December 29, 2021 (edited) 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: repeat iphone toggle_2.mp4 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. SQS Code Connector – at 22.24.mp4 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 Edited April 14, 2022 by codeandtonic added a video JonRiver 1 Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem. Get in touch here! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment