# Change theme color

**URL:** https://community.glideapps.com/t/change-theme-color/27170
**Category:** Ask for Help
**Created:** [May 24, 2021, 4:22pm UTC](https://community.glideapps.com/t/change-theme-color/27170 "2021-05-24T16:22:11Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Roshan\_Abrew](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roshan_abrew/32/26773_2.png) [@Roshan\_Abrew](https://community.glideapps.com/u/Roshan_Abrew)
#### Post date: [May 24, 2021, 4:22pm UTC](https://community.glideapps.com/t/change-theme-color/27170/1 "2021-05-24T16:22:11Z")

</div>

Hi, can we change theme color for app? only available white and black…

---

<div class="post-metadata">

### Author: ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)
#### Post date: [May 24, 2021, 4:34pm UTC](https://community.glideapps.com/t/change-theme-color/27170/2 "2021-05-24T16:34:49Z")

</div>

Hi @Roshan_Abrew welcome to the community

Here is a recent post about background colour.

Have a look, any questions just ask

> [@Background color change](https://community.glideapps.com/t/background-color-change/26764):
>
> I wanted to know that is there any way in which we can set bg color which isn’t themed

> [@Background color change](https://community.glideapps.com/t/background-color-change/26764/11):
>
> To put CSS into a glide screen you need to add a Rich Text component to the screen or tab. In that component, you paste in the CSS code. For instance, if I put this into a Rich Text component, the CSS will remove the top bar and the tabs at the bottom of the screen: \<pre\>\<span\>\<style\> [id="tabBar"]{ display: none; } [data-test="glide-app-bar"] :nth-child(1) { display: none; } #app-root div[opacity='1'] { color: transparent; }

---

<div class="post-metadata">

### Author: ![Roshan\_Abrew](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roshan_abrew/32/26773_2.png) [@Roshan\_Abrew](https://community.glideapps.com/u/Roshan_Abrew)
#### Post date: [May 24, 2021, 4:48pm UTC](https://community.glideapps.com/t/change-theme-color/27170/3 "2021-05-24T16:48:21Z")

</div>

Thanks, how to put CSS code to screen? do you have screen shot or video for this?

---

<div class="post-metadata">

### Author: ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)
#### Post date: [May 24, 2021, 5:06pm UTC](https://community.glideapps.com/t/change-theme-color/27170/4 "2021-05-24T17:06:26Z")

</div>

See the post below, you need to add rich text.

> [@Background color change](https://community.glideapps.com/t/background-color-change/26764/11):
>
> To put CSS into a glide screen you need to add a Rich Text component to the screen or tab. In that component, you paste in the CSS code. For instance, if I put this into a Rich Text component, the CSS will remove the top bar and the tabs at the bottom of the screen: \<pre\>\<span\>\<style\> [id="tabBar"]{ display: none; } [data-test="glide-app-bar"] :nth-child(1) { display: none; } #app-root div[opacity='1'] { color: transparent; }

Here is the glide documentation to enter rich text

> **[Glide Docs](https://www.glideapps.com/docs)**
>
> Welcome to Glide Docs, a steadily growing collection of articles and videos on how to use Glide. We can’t wait to see what you build!

A friendly caution, custom css is not really supported, so use at your own discretion

---

<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 24, 2021, 5:18pm UTC](https://community.glideapps.com/t/change-theme-color/27170/5 "2021-05-24T17:18:14Z")

</div>

Just to be clear. Are you trying to change the background color or the theme color?

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

---

<div class="post-metadata">

### Author: ![Roshan\_Abrew](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roshan_abrew/32/26773_2.png) [@Roshan\_Abrew](https://community.glideapps.com/u/Roshan_Abrew)
#### Post date: [May 24, 2021, 5:44pm UTC](https://community.glideapps.com/t/change-theme-color/27170/6 "2021-05-24T17:44:13Z")

</div>

theme color, only available black and white…!

---

<div class="post-metadata">

### Author: ![Roshan\_Abrew](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roshan_abrew/32/26773_2.png) [@Roshan\_Abrew](https://community.glideapps.com/u/Roshan_Abrew)
#### Post date: [May 24, 2021, 6:48pm UTC](https://community.glideapps.com/t/change-theme-color/27170/7 "2021-05-24T18:48:35Z")

</div>

send me CSS code sample to change theme color…

---

<div class="post-metadata">

### Author: ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)
#### Post date: [May 24, 2021, 6:52pm UTC](https://community.glideapps.com/t/change-theme-color/27170/8 "2021-05-24T18:52:37Z")

</div>

> **[Code BOOK](https://code-book.glideapp.io/dl/ewAiAHQAIgA6ADIALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AYwBvAGQAZQBzACIALAAiAHIAIgA6ACIAWQBKADgAdQBSAGoAWAB6AFMAagA2AEIANgBvAGUAOQBWAFIAQwBZAC4AUQAiACwAIgBuACIAOgAiAEMAUwBTACAAYwBvAGQAZQAiAH0A)**
>
> share cool codes, scripts and links

---

<div class="post-metadata">

### Author: ![Roshan\_Abrew](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roshan_abrew/32/26773_2.png) [@Roshan\_Abrew](https://community.glideapps.com/u/Roshan_Abrew)
#### Post date: [May 24, 2021, 7:05pm UTC](https://community.glideapps.com/t/change-theme-color/27170/9 "2021-05-24T19:05:19Z")

</div>

thank u very much i found it and worked perfectly. can we change tab color also?

---

<div class="post-metadata">

### Author: ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)
#### Post date: [May 24, 2021, 7:12pm UTC](https://community.glideapps.com/t/change-theme-color/27170/10 "2021-05-24T19:12:46Z")

</div>

Not sure on that, sorry

Check out the app I sent you

> **[Code BOOK](https://code-book.glideapp.io/)**
>
> share cool codes, scripts and links

---

<div class="post-metadata">

### Author: ![Roshan\_Abrew](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roshan_abrew/32/26773_2.png) [@Roshan\_Abrew](https://community.glideapps.com/u/Roshan_Abrew)
#### Post date: [May 25, 2021, 4:28am UTC](https://community.glideapps.com/t/change-theme-color/27170/11 "2021-05-25T04:28:02Z")

</div>

I changed the background color, it was success, but display code in back button, how to remove it? see below image

 ![background](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/a/da08b2ca89fa6ad762049f6b44090a4434abca1d.jpeg)

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [May 25, 2021, 4:54am UTC](https://community.glideapps.com/t/change-theme-color/27170/12 "2021-05-25T04:54:15Z")

</div>

Looks like you are missing the `<style>` tag from your rich text component.

It should start with `<pre><span><style>`

---

<div class="post-metadata">

### Author: ![Roshan\_Abrew](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roshan_abrew/32/26773_2.png) [@Roshan\_Abrew](https://community.glideapps.com/u/Roshan_Abrew)
#### Post date: [May 25, 2021, 4:56am UTC](https://community.glideapps.com/t/change-theme-color/27170/13 "2021-05-25T04:56:34Z")

</div>

I used below code: can you correct code for me?

![code](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/4/94b69f78c082e8b53b2782ad79235e41acb94dac.jpeg)

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [May 25, 2021, 5:04am UTC](https://community.glideapps.com/t/change-theme-color/27170/14 "2021-05-25T05:04:11Z")

</div>

Move the `<style>` tag in front of the `<div>` tag, like this:

```auto
<pre><span><style><div class=....

```

---

<div class="post-metadata">

### Author: ![Roshan\_Abrew](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roshan_abrew/32/26773_2.png) [@Roshan\_Abrew](https://community.glideapps.com/u/Roshan_Abrew)
#### Post date: [May 25, 2021, 5:16am UTC](https://community.glideapps.com/t/change-theme-color/27170/15 "2021-05-25T05:16:32Z")

</div>

Not working see below image and code, Pls help for this

 ![app2](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/b/7bf2d0671be75c6897d68a931671a5e0bf2e3ae2.jpeg)

---

<div class="post-metadata">

### Author: ![Roshan\_Abrew](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roshan_abrew/32/26773_2.png) [@Roshan\_Abrew](https://community.glideapps.com/u/Roshan_Abrew)
#### Post date: [May 25, 2021, 5:17am UTC](https://community.glideapps.com/t/change-theme-color/27170/16 "2021-05-25T05:17:10Z")

</div>

![code 2](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/1/61400ce443b6dd73794bf55200455dfbfadbecad.jpeg)

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [May 25, 2021, 5:19am UTC](https://community.glideapps.com/t/change-theme-color/27170/17 "2021-05-25T05:19:33Z")

</div>

Sorry, I don’t know enough about CSS to be able to help you debug this further. The structure looks okay, other than that I’m not sure.

@ThinhDinh might be able to help.

---

<div class="post-metadata">

### 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: [May 25, 2021, 5:45am UTC](https://community.glideapps.com/t/change-theme-color/27170/18 "2021-05-25T05:45:11Z")

</div>

What exact end result are you looking for here?

---

<div class="post-metadata">

### Author: ![Roshan\_Abrew](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roshan_abrew/32/26773_2.png) [@Roshan\_Abrew](https://community.glideapps.com/u/Roshan_Abrew)
#### Post date: [May 25, 2021, 5:56am UTC](https://community.glideapps.com/t/change-theme-color/27170/19 "2021-05-25T05:56:14Z")

</div>

I want to change background color, I put code to rich text component, it was success, however rich text component text was appeared into BACK button on app, see below image, how to remove these text? Pls help on this ?,

 ![background](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/a/da08b2ca89fa6ad762049f6b44090a4434abca1d.jpeg)

---

<div class="post-metadata">

### Author: ![Roshan\_Abrew](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roshan_abrew/32/26773_2.png) [@Roshan\_Abrew](https://community.glideapps.com/u/Roshan_Abrew)
#### Post date: [May 25, 2021, 6:00am UTC](https://community.glideapps.com/t/change-theme-color/27170/20 "2021-05-25T06:00:50Z")

</div>

I used below code to change background color,

 ![code](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/4/94b69f78c082e8b53b2782ad79235e41acb94dac.jpeg)

[Next page](https://community.glideapps.com/t/change-theme-color/27170.md?page=2)