Guest Posted April 17, 2020 Share Posted April 17, 2020 Hi all! I was wondering how it would be possible to implement a button onto my website which I can click to get a light/dark mode activated- simply changing the background to dark and its components such as the navigation bar etc.. Hopefully you could help me out! Thank you in advance! Link to comment
codeandtonic Posted March 30, 2022 Share Posted March 30, 2022 (edited) Plugin available First letting anyone know, I've made a dark mode plugin for Squarespace which does exactly what you described. coral background macbook toggling on off 1400px for blog.mp4 It also has automatic mode. It knows if user has dark mode in their phone/computer settings. It's not free, but if you have any problems I'll fix them. With free tutorials your emails won't get replied. You can also read this blog post: Squarespace Dark Mode – Ultimate guide DIY If you want to make one youreself, I recommend using the Squarespace 7.1 color palettes: Basically creating a button, and that button will add a specific colour theme to all sections in the page. This way it's easy to edit how the dark mode should look, specifying each element and editing them easily. Quite a bit of other customisations are needed as well. I can't share my entire plugin code (as it's something I've spent weeks on) but here's a video that tells exactly how it works and how a dark mode plugin can be made. It's pretty long and detailed. How a Squarespace dark mode plugin is coded (20 min video) If that's too much, take a look at the Automatic dark mode plugin. Takes 1 minute to install. Here are some free tutorials: Dark Mode tutorial by Michael Henry How to Add Dark Mode & Light Mode Toggle to your Squarespace Website by Squarestylist This video goes to detail and is free. Video takes 15 minutes, has a lot of manual work. Some comments say it doesn’t work, doesn’t work on mobile and some places don’t turn dark... Edited April 16, 2022 by codeandtonic Bertie 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
Bertie Posted August 15, 2022 Share Posted August 15, 2022 Thanks codeAndTonic for the info on this. Once again, Squarespace seems to be a little under developed in certain areas, and I would have expected this to be snapped up already, it seems like such an obvious omission. In fact, when adding imagery, there should be a dark/light option. 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