Jump to content

Dark Mode - Skye

Go to solution Solved by paul2009,

Recommended Posts

  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

See 

 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 2 years later...

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 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

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.