# How can I change Color Theme? **URL:** \ **Category:** Ask for Help\ **Tags:** custom-code\ **Created:** [June 30, 2025, 8:37am UTC](https://community.glideapps.com/t/how-can-i-change-color-theme/82830 "2025-06-30T08:37:44Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![Oksana\_Partyka](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/oksana_partyka/32/89591_2.png) [@Oksana\_Partyka](https://community.glideapps.com/u/Oksana_Partyka)\ **Post date:** [June 30, 2025, 8:37am UTC](https://community.glideapps.com/t/how-can-i-change-color-theme/82830/1 "2025-06-30T08:37:44Z")
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? ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [June 30, 2025, 9:52am UTC](https://community.glideapps.com/t/how-can-i-change-color-theme/82830/2 "2025-06-30T09:52:18Z")
There’s no built-in option to do this as yet in Glide. ---
**Author:** ![Oksana\_Partyka](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/oksana_partyka/32/89591_2.png) [@Oksana\_Partyka](https://community.glideapps.com/u/Oksana_Partyka)\ **Post date:** [June 30, 2025, 12:12pm UTC](https://community.glideapps.com/t/how-can-i-change-color-theme/82830/3 "2025-06-30T12:12:17Z")
Is there anyway to do this - using css and so on? ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [June 30, 2025, 12:17pm UTC](https://community.glideapps.com/t/how-can-i-change-color-theme/82830/4 "2025-06-30T12:17:13Z")
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. ---
**Author:** ![Oksana\_Partyka](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/oksana_partyka/32/89591_2.png) [@Oksana\_Partyka](https://community.glideapps.com/u/Oksana_Partyka)\ **Post date:** [June 30, 2025, 12:19pm UTC](https://community.glideapps.com/t/how-can-i-change-color-theme/82830/5 "2025-06-30T12:19:06Z")
Using this method, can I change header color when I switch toggle? ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [June 30, 2025, 12:23pm UTC](https://community.glideapps.com/t/how-can-i-change-color-theme/82830/6 "2025-06-30T12:23:20Z")
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. ---
**Author:** ![Oksana\_Partyka](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/oksana_partyka/32/89591_2.png) [@Oksana\_Partyka](https://community.glideapps.com/u/Oksana_Partyka)\ **Post date:** [June 30, 2025, 12:41pm UTC](https://community.glideapps.com/t/how-can-i-change-color-theme/82830/7 "2025-06-30T12:41:54Z")
I dont mean header text For example: ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/0/b0d6e23cd6ce654c27f6bd23a16ea62c7ed0e3bd.png) 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 ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [June 30, 2025, 12:46pm UTC](https://community.glideapps.com/t/how-can-i-change-color-theme/82830/8 "2025-06-30T12:46:13Z")
> [@ThinhDinh](#): > > 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. 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. ---
**Author:** ![Oksana\_Partyka](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/oksana_partyka/32/89591_2.png) [@Oksana\_Partyka](https://community.glideapps.com/u/Oksana_Partyka)\ **Post date:** [June 30, 2025, 12:48pm UTC](https://community.glideapps.com/t/how-can-i-change-color-theme/82830/9 "2025-06-30T12:48:01Z")
Could you tell me how I can use `:has()`? I already have “theme” column in user profile ---
**Author:** ![Oksana\_Partyka](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/oksana_partyka/32/89591_2.png) [@Oksana\_Partyka](https://community.glideapps.com/u/Oksana_Partyka)\ **Post date:** [June 30, 2025, 12:50pm UTC](https://community.glideapps.com/t/how-can-i-change-color-theme/82830/10 "2025-06-30T12:50:13Z")
In that case, I have to make two headers? (light mode header and dark mode header) How can make header? ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [June 30, 2025, 12:55pm UTC](https://community.glideapps.com/t/how-can-i-change-color-theme/82830/11 "2025-06-30T12:55:55Z")
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. > **[CSS Library by LowCode Agency](https://css-library.glide.page/dl/library/s/8836b3/r/cHWeka3sTnCGRzWzqz7g5A)** You can check how we’re using `:has()` here for another use case. ---
**Author:** ![Oksana\_Partyka](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/oksana_partyka/32/89591_2.png) [@Oksana\_Partyka](https://community.glideapps.com/u/Oksana_Partyka)\ **Post date:** [June 30, 2025, 12:56pm UTC](https://community.glideapps.com/t/how-can-i-change-color-theme/82830/12 "2025-06-30T12:56:38Z")
> [@ThinhDinh](#): > > with that approach, you can basically adjust anything as long as you have the rich Thanks