Jump to content

Dark Mode - Skye

By RaiderTimes, in Customize with code

Go to solution Solved by paul2009,

Recommended Posts

  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

paul2009
paul2009

See   

  • Solution
paul2009 Level 17

paul2009

Posted
  • Solution
Posted

See 

 

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
  • 2 years later...
codeandtonic Level 6

codeandtonic

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources