How to Add Dark Mode to Your RapidWeaver Websites

Classic
1

I’ve seen a lot of discussion around the Web about updating websites with support for dark mode. Some doing it automatically, others with a toggle switch for user choice.

I’ve added Dark Mode to three different projects. The code and details are in Post #4 in this thread.

Thanks to @teefers and @habitualshaker who responded to the original post (this one, now edited) in which I asked if this was technically possible.

2

To my knowledge “dark mode” for websites isn’t yet a html standard.
I think Apples Safari for Mac is the only browser that supports using a “private media query” to determine the user is using dark mode and allow the website using CSS display a “dark mode” web page.

Other browser vendors may follow suit, especially if this specification gets adopted as an HTML standard.

I haven’t seen any RapidWeaver themes or stacks offering anything yet to make dark mode pages.

1 Like
3

Yes - it’s coming and it’s coming soon! Safari and Firefox (desktop and mobile) already support this. The very next versions of Chrome, Edge and Safari(iOS) will too. Chrome for iOS and Android will follow soon after.

The project (Source) that I am working on just now will support it. If you view the Source landing page in a compatible browser (and your preference on your OS is for Dark mode) then you will automatically get the dark version of the page. If you don’t prefer dark mode (or you are using an incompatible browser) then you will get the regular version.

4

Great news! I’ve been able to implement Dark Mode in multiple projects using custom CSS. Here’s where you start, inserting into a page or site wide CSS box:

    @media (prefers-color-scheme:     dark) {
 body {
color: #fafafa;
background-color: #1a1a1a !important; 
}

You’ll need to play around with it, targeting specific objects, but that should get you well on your way. The first part that you’ll want to change is the body tag. I implemented Dark Mode in three projects, using three different themes by Nick Cates, and each one needed a different set of tags.

Other than that, it took me about 30 minutes to get all three up to speed. Just make sure you have macOS in Dark Mode while you’re making adjustments to your code.

Special thanks to Team Realmac for the mobile simulator and live preview in RW8! Made playing around very easy.

3 Likes
5

Good work. It is definitely something that web designers should be starting to think about.

You inspired me to finish off a blog post I had started writing…

1 Like
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.