How to Add Dark Mode to Your RapidWeaver Websites

Classic
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