# Create light mode and dark mode for an application

**URL:** <https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255>\
**Category:** Ask for Help\
**Created:** [June 28, 2023, 11:17am UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255 "2023-06-28T11:17:08Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dominiqu0](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dominiqu0/32/60953_2.png) [@Dominiqu0](https://community.glideapps.com/u/Dominiqu0)\
**Post date:** [June 28, 2023, 11:17am UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255/1 "2023-06-28T11:17:08Z")

</div>

I would like to create two identical pages. dark mode and light mode for an application but I don’t know how to go about it. I would like that when the user clicks on for example dark mode that he can change mode

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [June 28, 2023, 11:32am UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255/2 "2023-06-28T11:32:52Z")

</div>

In Settings \> Appearance, you as the builder of the app, you can slightly change the background of the navigation and of the rest of the page.

 ![CleanShot 2023-06-28 at 13.27.51@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/a/7a66d69af2427113e82b095bae51a7b4dc6709e1.png)

There is no feature to allow you the put a dark mode and light mode picker so your users can themselves change the mode of their app. That would be a nice feature request.

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [June 28, 2023, 12:02pm UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255/3 "2023-06-28T12:02:01Z")

</div>

You could also make everything in two containers, 1 Dark and 1 None and only show 1 based on which “mode” they selected that you can store in a USC under their profile. However… pretty tedious to do…

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 9, 2024, 3:53am UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255/4 "2024-05-09T03:53:32Z")

</div>

so apparently the Glide app can take the mode set by the user’s phone 👀

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 9, 2024, 4:08am UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255/5 "2024-05-09T04:08:41Z")

</div>

yes

 ![Screenshot_20240508-230737](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/c/2c8737d653f93ff99a9b256f0134a8920c5f027f.jpeg)

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 9, 2024, 4:29am UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255/6 "2024-05-09T04:29:05Z")

</div>

ughh… huge gasp for me. Because I thought that the auto was just going to affect the things I choose in my design, not allow for a flip for the users. 😩  
So I have some re-designing to do…

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 9, 2024, 4:40am UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255/7 "2024-05-09T04:40:49Z")

</div>

Auto just means that if a user has their actual device set to a light or dark theme, then the app will adjust accordingly.

I have my phone set to use a dark theme all the time, so any apps that have the setting set to auto will appear to me using the dark theme instead of the light theme.

 ![Screenshot_20240508-233536](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/1/f15852817ade9722e090b6fdc21665053d125b5a.png)

If you specifically select light or dark instead, then it will force that color scheme regardless of what a user might have set as a theme on their device.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 9, 2024, 4:50am UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255/8 "2024-05-09T04:50:01Z")

</div>

ok. I understand now. It’s too late though… some users like the app in dark mode so I can’t take it away from them. But since I designed it with the intent to be a monochromatic red-white theme, when I look at it in dark mode (which is now Red, Black and White), it looks cringe… too busy for my taste… sigh.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 9, 2024, 5:14am UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255/9 "2024-05-09T05:14:39Z")

</div>

Do you know the HTML code for background color in a block of text?  
I have my privacy policy as a web embed and it’s pretty much invisible in dark mode.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 9, 2024, 5:35am UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255/10 "2024-05-09T05:35:10Z")

</div>

What kind of block text do you want to change?

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 9, 2024, 5:42am UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255/11 "2024-05-09T05:42:18Z")

</div>

It kind of starts like this:

"!DOCTYPE html\>

 \<h1 style="font-family: 'Playfair Display'; font-size: 26px;" HIPT&T Privacy Policy   
"

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 9, 2024, 5:47am UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255/12 "2024-05-09T05:47:54Z")

</div>

Copy this code into the richtext component.

```auto
<div style="background-color: black; border-radius: 10px; padding: 20px;">
    <h1 style="font-family: 'Playfair Display'; font-size: 26px; color: white; text-align: center;">HIPT&T Privacy Policy</h1>
</div>

```

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 9, 2024, 5:55am UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255/13 "2024-05-09T05:55:39Z")

</div>

the header looks beautiful now but all the rest of the text blended into the black background. Unfortunately I’m a true no-coder 😆 I just stuck your code in, lol

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/0/303eed4ae74dd6f6c3ea28b56cbd7c3701f05baa.png)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/b/5b6ebc5ed56d20361ec9a5120fe4d744d4de0311.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 9, 2024, 6:11am UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255/14 "2024-05-09T06:11:58Z")

</div>

Since there is already a global setting for the `<h1>` `<p>` tags in Glide, I am using `filter: invert(100%)` to reverse their condition instead of you writing them one by one.

```auto
<div style="background-color: white; border-radius: 10px; padding: 20px; filter: invert(100%);">
    <h1 style="font-family: 'Playfair Display'; font-size: 26px; text-align: center;">HIPT&T Privacy Policy</h1>
    <p>PARAGRAPH</p>
    <p>PARAGRAPH</p>
</div>

```

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 9, 2024, 6:27am UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255/15 "2024-05-09T06:27:32Z")

</div>

Thanks! Looks 100x better.  
Now I just need to find better font to make it more readable.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/6/963f0454f492960f491e13dccdfa3dbbf70f270c.png)

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 9, 2024, 7:00am UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255/16 "2024-05-09T07:00:49Z")

</div>

Pretty good, I think 😁

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/b/0b51389af62987eec494f68efa9232cabe3bb62c.png)

Thanks again! @Himaladin

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 9, 2024, 7:03am UTC](https://community.glideapps.com/t/create-light-mode-and-dark-mode-for-an-application/63255/17 "2024-05-09T07:03:23Z")

</div>

You’re welcome. Feel free to ask if you have any more questions.