# "Reader Mode" theme component feedback

**URL:** https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314
**Category:** Feature
**Tags:** feedback, completed, reader-mode
**Created:** [April 17, 2024, 1:55pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314 "2024-04-17T13:55:07Z")
**Posts on this page:** 7
**Page:** 3

<div class="post-metadata">

### Author: ![Tris20](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tris20/32/264639_2.png) [@Tris20](https://meta.discourse.org/u/Tris20)
#### Post date: [April 30, 2024, 6:33am UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/41 "2024-04-30T06:33:01Z")

</div>

Thank you Jordan 🙂

Your commit also made it easy to identify the css for controlling this. I played around with both full colour, and fully hidden avatars, and after speaking with a few colleagues we’ve decided to go with fully hidden.

For anyone who wants to make changes to go full colour or fully hidden avatar, just add the following as a [theme component](https://meta.discourse.org/t/make-css-changes-on-your-site/168101#where-do-i-add-my-css-5):

#### Fully Hide Avatars

```plaintext
.reader-mode {
    .topic-avatar img,
    .topic-avatar .avatar-flair {
    opacity: 0;
    transition: opacity 0.3s;
    filter: none;
  }
}

```

#### Show Avatars full colour

```plaintext
.reader-mode {
    .topic-avatar img,
    .topic-avatar .avatar-flair {
    opacity: 1;
    transition: opacity 0.3s;
    filter: none;
  }
}

```

### Font size is not persistent in settings slider

One Colleague also found that when we click out of the font-size settings, and then go back to it, the slider’s setting is not persistent.

Not a major issue, but worth noting if it hasn’t been seen yet.

p.s. when showing them the font style dropdown, the response was “wow, no comic sans 😤” 😂

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [April 30, 2024, 6:56am UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/42 "2024-04-30T06:56:47Z")

</div>

Oh this advanced option is so cool, small one I noticed there when setting my text to an age appropriate size.

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/3/8/838f5bbb581894cc7837304e6469cefaf8e3f5a1.png)

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 30, 2024, 2:30pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/43 "2024-04-30T14:30:22Z")

</div>

> [@Tris20](#):
>
> One Colleague also found that when we click out of the font-size settings, and then go back to it, the slider’s setting is not persistent.

Ah yes, I need to save the state here on change. Will make this update 👍

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [May 1, 2024, 9:40pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/44 "2024-05-01T21:40:59Z")

</div>

I have a working branch with a huge update I will release this week.

- exported all code that changes the look & feel to a `@service`
- state is now tracked across topics using that same `@service`
- simplified the menu
- simplified font options

Just a few kinks I need to iron out. But here it is in action.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [May 1, 2024, 10:05pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/45 "2024-05-01T22:05:16Z")

</div>

This looks absolutely amazing!

The UI is simple and clean; this is gorgeous. :chefs_kiss:

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [May 14, 2024, 3:27pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/46 "2024-05-14T15:27:12Z")

</div>

The component has been released 😄

Thanks for the feedback & suggestions everyone!

[Reader Mode 👓](https://meta.discourse.org/t/reader-mode/307916)

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [May 14, 2024, 3:27pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/47 "2024-05-14T15:27:22Z")

</div>



[Previous page](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314.md?page=2)
