# Add custom CSS to change font color

**URL:** <https://community.glideapps.com/t/add-custom-css-to-change-font-color/70411>\
**Category:** Ask for Help\
**Created:** [February 2, 2024, 11:03am UTC](https://community.glideapps.com/t/add-custom-css-to-change-font-color/70411 "2024-02-02T11:03:14Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![paul3463](https://avatars.discourse-cdn.com/v4/letter/p/8c91f0/32.png) [@paul3463](https://community.glideapps.com/u/paul3463)\
**Post date:** [February 2, 2024, 11:03am UTC](https://community.glideapps.com/t/add-custom-css-to-change-font-color/70411/1 "2024-02-02T11:03:14Z")

</div>

Hi:  
I am working with the new (not classic) phone app style. I would like to change all the text color to black (not the grey that is the default for body text). I have a business account so can add custom css but cannot work out the correct way to do this.  
I would be grateful for any help.  
Thanks  
Paul

---

<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:** [February 2, 2024, 1:05pm UTC](https://community.glideapps.com/t/add-custom-css-to-change-font-color/70411/2 "2024-02-02T13:05:10Z")

</div>

Try these. Obviously you can tell that based on the names, they affect the different font sizes Glide offers. You can also adjust the font family, size etc for each and it will apply to all text components across your app so you dont have to add them into each component’s CSS field.

```auto
.headlineXLarge {
color: #000;
}

.headlineLarge {
color: #000;
}

.headlineMedium {
color: #000;
}

.headlineSmall {
color: #000;
}

.headlineXSmall {
color: #000;
}

.large {
color: #000;
}

.regular {
color: #000;
}

.small {
color: #000;
}

.footnote {
color: #000;
}

```

---

<div class="post-metadata">

**Author:** ![paul3463](https://avatars.discourse-cdn.com/v4/letter/p/8c91f0/32.png) [@paul3463](https://community.glideapps.com/u/paul3463)\
**Post date:** [February 2, 2024, 6:38pm UTC](https://community.glideapps.com/t/add-custom-css-to-change-font-color/70411/3 "2024-02-02T18:38:52Z")

</div>

Thanks. The ".regular’ works for the normal text and labels that I wanted to change. The only text that is still grey as the text within a rich text component. If I use a normal text component it is the correct (black color) - if I use a rich text compnent (which I want to do because of markdown formatting) it is still grey.

Have you any idea why?  
Thanks

---

<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:** [February 2, 2024, 11:52pm UTC](https://community.glideapps.com/t/add-custom-css-to-change-font-color/70411/4 "2024-02-02T23:52:25Z")

</div>

Please try this:

```auto
[data-test="app-markdown-view"] p {
color: #000;
}

```

---

<div class="post-metadata">

**Author:** ![paul3463](https://avatars.discourse-cdn.com/v4/letter/p/8c91f0/32.png) [@paul3463](https://community.glideapps.com/u/paul3463)\
**Post date:** [February 3, 2024, 10:26am UTC](https://community.glideapps.com/t/add-custom-css-to-change-font-color/70411/5 "2024-02-03T10:26:12Z")

</div>

Thanks. I have tried that and it works well - nearly all issues resolved! With one exception: when I have a list of items in the rich text component it still appears in the grey shade. Normal text no problem (black) - as soon as I start typing a numbered list the list item changes to grey. Do you know how to select this?  
Thanks anyway.

Paul

---

<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:** [February 3, 2024, 3:00pm UTC](https://community.glideapps.com/t/add-custom-css-to-change-font-color/70411/6 "2024-02-03T15:00:10Z")

</div>

You can try this.

```auto
[data-test="app-markdown-view"] p, [data-test="app-markdown-view"] li {
color: #000;
}

```

---

<div class="post-metadata">

**Author:** ![paul3463](https://avatars.discourse-cdn.com/v4/letter/p/8c91f0/32.png) [@paul3463](https://community.glideapps.com/u/paul3463)\
**Post date:** [February 4, 2024, 8:07am UTC](https://community.glideapps.com/t/add-custom-css-to-change-font-color/70411/7 "2024-02-04T08:07:48Z")

</div>

That works perfectly. Thanks.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [February 11, 2024, 8:08am UTC](https://community.glideapps.com/t/add-custom-css-to-change-font-color/70411/8 "2024-02-11T08:08:34Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.