How set the body color for dark mode?

Elements
1

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?

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

image
image950×1050 107 KB

2

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

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

However, that won’t work in Elements 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!

3

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

4

Ah okay, that’s good to know :blush:

Hope to have a fix very soon…

5

Hey @Massimo,

I’m sure you’re aware of this but we released Elements 0.9.0 recently with support for background colours!

Just make sure your site template includes the following.

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

More info here Elements 0.9.0 (23579)

Cheers!

6

Hey thanks, yes I saw but I didn’t have time to update my Play project. I think I will do it this afternoon. :+1:

1 Like
7

I have updated the Play project, now it is compatible with the new Theme Background Color feature.

2 Likes
8

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

9

How to upgrade?

  • By clicking on the download link/button in the purchase email.
  • By logging into 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.

1 Like