# Dark theme header text and icon contrast

**URL:** https://meta.discourse.org/t/dark-theme-header-text-and-icon-contrast/71102
**Category:** UX
**Tags:** dark-theme
**Created:** [30 سبتمبر 2017، 11:40م UTC](https://meta.discourse.org/t/dark-theme-header-text-and-icon-contrast/71102 "2017-09-30T23:40:06Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [30 سبتمبر 2017، 11:40م UTC](https://meta.discourse.org/t/dark-theme-header-text-and-icon-contrast/71102/1 "2017-09-30T23:40:06Z")

</div>

On the latest Discourse with the dark theme enabled, there is very little contrast between the header text and icon colors (`#333`) and the header background (`#111`). On older screens it can be hard to read. The dark theme on meta sets these colors to `#ddd`, that works well.

 ![alt_2](https://global.discourse-cdn.com/meta/original/3X/a/9/a9271cfcfc81a7f4bb22aff225ba46c9e27a2e3b.png)

---

<div class="post-metadata">

### Author: ![wiliamjoaquim](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wiliamjoaquim/32/71571_2.png) [@wiliamjoaquim](https://meta.discourse.org/u/wiliamjoaquim)
#### Post date: [30 سبتمبر 2017، 11:43م UTC](https://meta.discourse.org/t/dark-theme-header-text-and-icon-contrast/71102/2 "2017-09-30T23:43:06Z")

</div>

You can set a font of the font you want in Custom

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [30 سبتمبر 2017، 11:45م UTC](https://meta.discourse.org/t/dark-theme-header-text-and-icon-contrast/71102/3 "2017-09-30T23:45:45Z")

</div>

Yes, it’s easy to fix, but the default should be something that works.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [30 سبتمبر 2017، 11:52م UTC](https://meta.discourse.org/t/dark-theme-header-text-and-icon-contrast/71102/4 "2017-09-30T23:52:14Z")

</div>

Any thoughts on this @eviltrout perhaps this is a regression?

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2 أكتوبر 2017، 6:29م UTC](https://meta.discourse.org/t/dark-theme-header-text-and-icon-contrast/71102/5 "2017-10-02T18:29:04Z")

</div>

This is weird - I picked Dark Theme and my header is quite readable:

 ![25 PM](https://global.discourse-cdn.com/meta/original/3X/b/7/b7dcf06cfbe1bb64ef5f84db1912f54de814ac8f.jpg)

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [3 أكتوبر 2017، 12:30ص UTC](https://meta.discourse.org/t/dark-theme-header-text-and-icon-contrast/71102/6 "2017-10-03T00:30:33Z")

</div>

It’s set correctly on meta, but it looks like the default value of the header\_primary color for the dark theme is `#333333`.

 ![dark_color_scheme](https://global.discourse-cdn.com/meta/original/3X/5/d/5dbcf677127e874c15492ef2cd2cdfc1092e8519.png)

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [3 أكتوبر 2017، 5:02م UTC](https://meta.discourse.org/t/dark-theme-header-text-and-icon-contrast/71102/7 "2017-10-03T17:02:20Z")

</div>

Weird – it’s been set to that dark color for ~6 months so I’m not sure why it’s showing up now. It’s possible during the clean up of our CSS/HTML we removed a rule that shouldn’t have existed that was overwriting it. Here is a fix:

[https://github.com/discourse/discourse/commit/4fbe4218c42b91774518cfbe20b169b2f503348a](https://github.com/discourse/discourse/commit/4fbe4218c42b91774518cfbe20b169b2f503348a)