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
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.
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.
2 Likes
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…
2 Likes
so apparently the Glide app can take the mode set by the user’s phone 
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…
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.
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.
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.
1 Like
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.
What kind of block text do you want to change?
It kind of starts like this:
"!DOCTYPE html>
<h1 style="font-family: 'Playfair Display'; font-size: 26px;" HIPT&T Privacy Policy"
Copy this code into the richtext component.
<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>
2 Likes
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
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.
<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>
4 Likes
You’re welcome. Feel free to ask if you have any more questions.
1 Like