# How to Add Dark Mode to Your RapidWeaver Websites

**URL:** <https://forums.realmacsoftware.com/t/how-to-add-dark-mode-to-your-rapidweaver-websites/27775>\
**Category:** RapidWeaver Classic\
**Created:** [July 11, 2019, 12:28pm UTC](https://forums.realmacsoftware.com/t/how-to-add-dark-mode-to-your-rapidweaver-websites/27775 "2019-07-11T12:28:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![chet](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/chet/32/35396_2.png) [@chet](https://forums.realmacsoftware.com/u/chet)\
**Post date:** [July 11, 2019, 12:28pm UTC](https://forums.realmacsoftware.com/t/how-to-add-dark-mode-to-your-rapidweaver-websites/27775/1 "2019-07-11T12:28:46Z")

</div>

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](http://forums.realmacsoftware.com/t/how-to-add-dark-mode-to-your-rapidweaver-websites/27775/4).

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

---

<div class="post-metadata">

**Author:** ![teefers](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/teefers/32/8173_2.png) [@teefers](https://forums.realmacsoftware.com/u/teefers)\
**Post date:** [July 11, 2019, 12:50pm UTC](https://forums.realmacsoftware.com/t/how-to-add-dark-mode-to-your-rapidweaver-websites/27775/2 "2019-07-11T12:50:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![habitualshaker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/habitualshaker/32/10762_2.png) [@habitualshaker](https://forums.realmacsoftware.com/u/habitualshaker)\
**Post date:** [July 11, 2019, 1:14pm UTC](https://forums.realmacsoftware.com/t/how-to-add-dark-mode-to-your-rapidweaver-websites/27775/3 "2019-07-11T13:14:53Z")

</div>

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](https://shakingthehabitual.com/stacks/source/) 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.

---

<div class="post-metadata">

**Author:** ![chet](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/chet/32/35396_2.png) [@chet](https://forums.realmacsoftware.com/u/chet)\
**Post date:** [July 11, 2019, 6:55pm UTC](https://forums.realmacsoftware.com/t/how-to-add-dark-mode-to-your-rapidweaver-websites/27775/4 "2019-07-11T18:55:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![habitualshaker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/habitualshaker/32/10762_2.png) [@habitualshaker](https://forums.realmacsoftware.com/u/habitualshaker)\
**Post date:** [July 11, 2019, 9:11pm UTC](https://forums.realmacsoftware.com/t/how-to-add-dark-mode-to-your-rapidweaver-websites/27775/5 "2019-07-11T21:11:28Z")

</div>

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…

> **[Blog | Shaking the Habitual](https://shakingthehabitual.com/blog/?post=turn-to-the-dark-side)**
>
> Blog page for Shaking the Habitual with articles on RapidWeaver, stacks and general web design.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/system/32/25301_2.png) [@system](https://forums.realmacsoftware.com/u/system)\
**Post date:** [August 11, 2019, 7:11am UTC](https://forums.realmacsoftware.com/t/how-to-add-dark-mode-to-your-rapidweaver-websites/27775/6 "2019-08-11T07:11:36Z")

</div>

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