How can I change Color Theme?

Ask for Help
1

On most mobile apps, user can change color theme as user wants in settings.
Now I want to switch color theme using toggle.
How can do it?

1 Like
2

There’s no built-in option to do this as yet in Glide.

1 Like
3

Is there anyway to do this - using css and so on?

1 Like
4

CSS, as it is right now, can’t tie to a variable in your database easily.

You might be able to have a workaround by injecting different components into all screens, that are visible based on variables, and adjust your CSS based on :has(), but I feel it’s too much to maintain and never explored it.

1 Like
5

Using this method, can I change header color when I switch toggle?

1 Like
6

I assume by header, you mean header text (h1, h2 or h3). You can assign class names to it, and run the workaround I mentioned above.

It’s still difficult to maintain, and you can imagine doing that for everything in the app to make it work as a “theme” that allows users to choose, so I don’t recommend it at all.

1 Like
7

I dont mean header text
For example:

image
image1907Ă—491 57 KB

Similar with this part
If there is any approach that can do this, I want to do even it is so complex
Please help me

1 Like
8

Then this is the way to go, but you can only offer a limited set of colors.

Say you want to offer a black and a white background on that part. Write the choice to a user profiles column called “theme”.

Add two rich text components to every screen in your app, one called black-theme, one called white-theme. Make them visible based on the “theme” value above.

In your CSS, use :has() to check the root level. If it contains black-theme, apply something, if it contains white-theme, apply something else.

1 Like
9

Could you tell me how I can use :has()?
I already have “theme” column in user profile

1 Like
10

In that case, I have to make two headers? (light mode header and dark mode header)
How can make header?

1 Like
11

The idea is you adjust the existing header (assuming you’re talking about the top bar in Glide), not creating your own headers.

But with that approach, you can basically adjust anything as long as you have the rich text components on every screen.

You can check how we’re using :has() here for another use case.

1 Like
12

Thanks

1 Like