Welcome to the Dark Side - Our Website Now Supports Dark Mode + Tutorial on How to Implement Dark Mode via Custom CSS on Squarespace

nightmode Banner.jpg

Our website now supports your operating systems native dark mode - depending on the settings of your device, this website will be either light or dark, making it more user friendly and easier on the eyes when viewed at night. Please note that you need to use a relatively modern browser for this to work.

 

How to Enable Dark Mode

Enabling dark mode depends on your device. Here is a quick how-to for the most common operating systems:

iOS / iPad OS (iPhone / iPad)

  1. Make sure you have at least iOS 13.0 installed (you can check in Settings -> General -> Info)

  2. Access control center (by swiping down from the top right on Face ID enabled devices or from the bottom up on devices with a home button)

  3. Long press on the brightness slider and tap the dark mode icon at the bottom left

Android (can be different depending on manufacturer)

  1. Make sure you have at least Android 10 installed (you can check in Settings -> About Phone -> Software Information)

  2. Open the settings app

  3. Navigate to Display -> Theme and enable ‘Dark Theme’ (you can also add a tile to the quick settings pull-down menu)

Mac

  1. Make sure you have at least macOS Mojave (10.14) installed (you can check by clicking on the Apple Menu at the top left, and then ‘About this Mac’)

  2. Open the settings app and navigate to General

  3. Use the buttons at the top to switch between a dark and a light appearance (with macOS Catalina (10.15), you can also set this to automatic, based on sunset at your location)

Windows

  1. Make sure you have at least Windows 10 installed (you can check by clicking on the Start Button -> Settings -> System -> About)

  2. Open the settings app and go to Personalization -> Colors

  3. Under ‘Choose your default app mode’, choose Dark

 

Feedback

We are constantly improving our websites, dark mode is just one of many improvements (although a big one). If you have issues with dark mode, have ideas to improve our websites further, or have other feedback, we’d love to hear from you.

 

Bonus: Tutorial on How to Implement Dark Mode via Custom CSS on Squarespace

This website (as well as all our other websites) is based on Squarespace - this tutorial will only work on Squarespace. However, the code used might also work for other websites. Naturally, we don’t take any responsibility for this working on your website, but it’s worth a try, isn’t it?

In principle, there are only three steps necessary to implement dark mode.

  1. Set up your website to ‘see’ what mode the device of the visitor is in and adapt to it accordingly

  2. Define what items become what color when dark mode is enabled

  3. Add the code to your Squarespace page (Design -> Custom CSS)

Item one is relatively easy, the code for this is “@media (prefers-color-scheme: dark)”. Item two is a little more tricky, as you first have to find out how the item you want to change is called. You can do this via the ‘inspect’ command of your browser (right-click on the item you want to inspect, and then ‘inspect’). For example, the author name on a blog post is addressed with the item “.Blog-meta-item.Blog-meta-item--author”. As soon as you have found out what the item you want to change is called, you can address it with a simple “color : #HEXCODE”) or “background-color : #HEXCODE”.

Here is the full code we have used:

@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%);

}

}

Marvin Zick