RaiderTimes Posted November 15, 2019 Share Posted November 15, 2019 I was wondering if there was any way to add custom CSS or something like that to make a "dark mode" button for my website? I am using Skye template and I was wondering! Thanks for reading and please respond quickly as possible if you can :) Link to comment
Solution paul2009 Posted November 16, 2019 Solution Share Posted November 16, 2019 See tuanphan 1 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
codeandtonic Posted December 29, 2021 Share Posted December 29, 2021 (edited) You probably mean something like this? I'm the developer of the Squarespace dark mode plugin so I've spent quite a bit of time investigating how to implement dark mode on Squarespace 🙂 Happy to share my thoughs On 11/16/2019 at 12:20 AM, RaiderTimes said: I was wondering if there was any way to add custom CSS or something like that to make a "dark mode" button for my website? To add a button, we'll need to use javascript instead of CSS. To add a dark mode button to a website you'd write something like var createToggleButton = function(where){ $("<div id='darkmodetoggle' class='darkmode-fixed-bottom-left'>Toggle darkmode</div><div id='darkmodereset'>Reset Darkmode plugin</div>").appendTo(where); } createToggleButton('body'); ...But to make the button work, that takes a bit more effort. Dark Mode in 7.0 Skye is a 7.0 template. In 7.0 we'd make the button add a class to the <body> element. For example <body class='darkmode-enabled'>. We'd then use CSS to style our dark mode. So you'd style all the elements in a desired way, for example body.darkmode-enabled{ background: black; p, h1, h2, h3, a, ol, ul, time{ color: white; } } Dark Mode in 7.1 If you've switched to 7.1 we can benefit from color themes. We'll select a color theme to be our "dark" theme, and then apply it's CSS class to all sections, which will then make all the sections dark. $(".page-section").addClass("'dark-bold"); You'll also need to store a cookie to save the preference. Otherwise when user refreshes or goes to another page, the effect will disappear. With JS Simple Cookie library you'd use Cookie.set('darkmode', 'dark'); Hope these will help. However, enabling dark mode is quite a complex task. My Squarespace darkmode plugin is 400+ lines of code and growing as I improve it. There's quite a lot to take into account. P.S – If you're lazy... If you're willing to pay a few bucks I've made a dark mode plugin for Squarespace. You can also read my blog post about Squarespace dark mode. Edited December 29, 2021 by codeandtonic added a demo 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