# How set the body color for dark mode?

**URL:** <https://forums.realmacsoftware.com/t/how-set-the-body-color-for-dark-mode/47536>\
**Category:** Elements\
**Created:** [May 13, 2025, 8:59am UTC](https://forums.realmacsoftware.com/t/how-set-the-body-color-for-dark-mode/47536 "2025-05-13T08:59:02Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Massimo](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/massimo/32/25456_2.png) [@Massimo](https://forums.realmacsoftware.com/u/Massimo)\
**Post date:** [May 13, 2025, 8:59am UTC](https://forums.realmacsoftware.com/t/how-set-the-body-color-for-dark-mode/47536/1 "2025-05-13T08:59:02Z")

</div>

I am trying to set a background color for the body for the “dark” mode. I tried to insert the following CSS code in **Settings → Template** but it doesn’t seem to work.  
How can I do this?

```auto
<style>
@media (prefers-color-scheme: dark) {
    body {
      @apply bg-brand-900;
    }
  }
</style>

```

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/a/ba42653ce95f1de0f352598a3ccc939970f81471.png)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [May 13, 2025, 11:16am UTC](https://forums.realmacsoftware.com/t/how-set-the-body-color-for-dark-mode/47536/2 "2025-05-13T11:16:55Z")

</div>

There’s a simpler way to do that in Tailwind CSS: just apply the classes to the body:

```auto
<body class="bg-white dark:bg-gray-900">
  <!-- Your content here -->
</body>

```

However, that won’t work in [Elements](https://elementsapp.io/) because the site template isn’t processed by our Tailwind CSS processor (yet).

We have a ticket to add support for setting the background colour of pages in the main UI. It’s actually a bit overdue, so I think we’ll bump it up the list and get it done as soon as possible!

---

<div class="post-metadata">

**Author:** ![Massimo](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/massimo/32/25456_2.png) [@Massimo](https://forums.realmacsoftware.com/u/Massimo)\
**Post date:** [May 13, 2025, 11:51am UTC](https://forums.realmacsoftware.com/t/how-set-the-body-color-for-dark-mode/47536/3 "2025-05-13T11:51:31Z")

</div>

I actually did my first attempt that way, but I saw that it didn’t work.  
I’ll wait for the fix.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [May 13, 2025, 12:36pm UTC](https://forums.realmacsoftware.com/t/how-set-the-body-color-for-dark-mode/47536/4 "2025-05-13T12:36:44Z")

</div>

> [@Massimo](#):
>
> I actually did my first attempt that way, but I saw that it didn’t work.

Ah okay, that’s good to know 😊

Hope to have a fix very soon…

---

<div class="post-metadata">

**Author:** ![tpbradley](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tpbradley/32/25503_2.png) [@tpbradley](https://forums.realmacsoftware.com/u/tpbradley)\
**Post date:** [May 21, 2025, 5:24pm UTC](https://forums.realmacsoftware.com/t/how-set-the-body-color-for-dark-mode/47536/5 "2025-05-21T17:24:30Z")

</div>

Hey @Massimo,

I’m sure you’re aware of this but we released [Elements](https://elementsapp.io/) 0.9.0 recently with support for background colours!

Just make sure your site template includes the following.

```auto
<body class="{{page.bodyClasses}}" {{page.bodyAttributes}}>

```

More info here [Elements 0.9.0 (23579)](https://forums.realmacsoftware.com/t/elements-0-9-0-23579/47668)

Cheers!

---

<div class="post-metadata">

**Author:** ![Massimo](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/massimo/32/25456_2.png) [@Massimo](https://forums.realmacsoftware.com/u/Massimo)\
**Post date:** [May 22, 2025, 9:08am UTC](https://forums.realmacsoftware.com/t/how-set-the-body-color-for-dark-mode/47536/6 "2025-05-22T09:08:11Z")

</div>

Hey thanks, yes I saw but I didn’t have time to update my [Play](https://www.rwpro.space/preview/play/) project. I think I will do it this afternoon. 👍

---

<div class="post-metadata">

**Author:** ![Massimo](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/massimo/32/25456_2.png) [@Massimo](https://forums.realmacsoftware.com/u/Massimo)\
**Post date:** [May 22, 2025, 3:19pm UTC](https://forums.realmacsoftware.com/t/how-set-the-body-color-for-dark-mode/47536/7 "2025-05-22T15:19:50Z")

</div>

> [@tpbradley](#):
>
> `class="{{page.bodyClasses}}" {{page.bodyAttributes}}`

I have updated the [Play](https://www.rwpro.space/preview/play/) project, now it is compatible with the new **Theme Background Color** feature.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [May 22, 2025, 6:36pm UTC](https://forums.realmacsoftware.com/t/how-set-the-body-color-for-dark-mode/47536/8 "2025-05-22T18:36:06Z")

</div>

> [@Massimo](#):
>
> Hey thanks, yes I saw but I didn’t have time to update my [Play](https://www.rwpro.space/preview/play/) project. I think I will do it this afternoon. 👍

@Massimo I’m curious how one gets the update to the Play project? I bought it a couple of days ago.

---

<div class="post-metadata">

**Author:** ![Massimo](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/massimo/32/25456_2.png) [@Massimo](https://forums.realmacsoftware.com/u/Massimo)\
**Post date:** [May 22, 2025, 7:05pm UTC](https://forums.realmacsoftware.com/t/how-set-the-body-color-for-dark-mode/47536/9 "2025-05-22T19:05:15Z")

</div>

### **How to upgrade?**

- By clicking on the **download link/button** in the purchase email.
- By logging into **[my.paddle.com](http://my.paddle.com/)** (register if you don’t have an account yet) with the same email address you used to make the purchase.

* * *

I recommend you sign up for the newsletter on the rwpro.space website, so you will be notified of any updates.