# "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:** 20
**Page:** 1
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 17, 2024, 1:55pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/1 "2024-04-17T13:55:07Z")
I recently installed a theme component here on Meta that introduces a “reader mode” when viewing a topic.
The button to toggle this feature is located at the top of the topic timeline controls:
Clicking it will put the topic into “reading mode”, covering most of the UI with a slightly opaque cover in order to minimize distraction.
Some other things that happen are a filter applied to all avatars and images, turning them into a greyscale image.
Here is a screen recording of it in use.
* * *
The component is available on the following themes installed here on meta:
- Air Theme
- Default
- Default (Full Width)
- Fully
- Meta Branded
- Redditish
- Sam’s Simple Theme
This is still a WIP and would appreciate any bug reports or feedback be posted here 😄
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [April 17, 2024, 2:09pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/2 "2024-04-17T14:09:03Z")
Very cool!
One thing I noticed is that some of the styling changes cause the layout to ‘jump’ when I click the button. I guess some elements are being `display: none;`'d? Or some font sizes are changing?
Would it be feasible to make the button purely ‘grey out’ (or `visibility: hidden;`) unnecessary elements, without causing any layout shift?
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 17, 2024, 2:10pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/3 "2024-04-17T14:10:39Z")
> [@david](#):
>
> One thing I noticed is that some of the styling changes cause the layout to ‘jump’ when I click the button. I guess some elements are being `display: none;`'d? Or some font sizes are changing?
>
> Would it be feasible to make the button purely ‘grey out’ unnecessary elements, without causing any layout shift?
Yes, this was a pain I encountered.
Ideally, the sidebar would animate closed, as it does when you click the sidebar toggle normally.
Since my component closes the sidebar, but doesnt animate it, it turns out to be a jolt.
I could either:
- animate the sidebar closed
- im unsure how to do this, as I _think_ its done via JS + Css?
- dont close sidebar
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [April 17, 2024, 2:14pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/4 "2024-04-17T14:14:02Z")
How about `visibility: hidden;`? Or `opacity: 0;`? So it’s still there & included in the layout, but invisible? I guess we’d need something to prevent clicks/focus on it as well? Or maybe we make it visible again on hover/focus? 🧐
> [@jordan.vidrine](#):
>
> animate the sidebar closed
>
> - im unsure how to do this, as I _think_ its done via JS + Css?
One relatively safe way would be to mimic the user interaction:
```js
if(document.body.classList.contains("has-sidebar-page")){ // Sidebar is visible
document.querySelector(".btn-sidebar-toggle").click()
}
```
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 17, 2024, 2:16pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/5 "2024-04-17T14:16:00Z")
> [@david](#):
>
> How about `visibility: hidden;`? Or `opacity: 0;`? So it’s still there & included in the layout, but invisible?
Are you speaking of sidebar?
If so, I am actually toggling it closed with my component, so it’s using the same core way like this:
```js
@action
toggleReaderMode() {
if (this.sidebarIsOpen && !this.isActive) {
getOwner(this).lookup("controller:application").set("showSidebar", false);
this.readerModeActive = !this.readerModeActive;
} else {
getOwner(this).lookup("controller:application").set("showSidebar", true);
this.readerModeActive = false;
}
}
```
There is nothing on the page that I am actually removing other than toggling this sidebar closed.
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [April 17, 2024, 2:18pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/6 "2024-04-17T14:18:10Z")
> [@jordan.vidrine](#):
>
> I am actually toggling it closed
Right, but that causes a layout shift. So I’m thinking we could leave it open, but make it invisible?
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 17, 2024, 2:22pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/7 "2024-04-17T14:22:20Z")
> [@david](#):
>
> Right, but that causes a layout shift. So I’m thinking we could leave it open, but make it invisible?
Ok yes, sorry for the confusion. I am understanding you now. Since the reader mode isnt known to be a toggle for sidebar, it could be confusing that it’s toggled, causing the shift when you didnt want that to happen.
I guess I assumed if the sidebar toggle causes a shift, then the reader mode doing the same thing wouldnt matter.
I can try _not_ toggling the sidebar and posting a video here to show you.
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [April 17, 2024, 2:44pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/8 "2024-04-17T14:44:15Z")
When the sidebar is closed before you use the reader mode button, the sidebar opens, and afterwards, the button does not do anything.
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [April 17, 2024, 2:53pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/9 "2024-04-17T14:53:11Z")
I was wondering what the heck that new icon was. Now I know. Thanks.
But.
DiscourseHub, iPad and theme default: all it does is expanding the sidebar.
Edit.
Ok, I have to first open the sidebar. After that the magic happends. Except… I don’t use the sidebar here 😏
---
### Author:  [@bryce](https://meta.discourse.org/u/bryce)
#### Post date: [April 17, 2024, 3:12pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/10 "2024-04-17T15:12:31Z")
Looks great!
Not sure how difficult it would be, but I was thinking it would be nice if the user could hit ESC to exit reader mode. Since the button is considered part of the timeline, if you scroll to the very bottom of the topic, the button can go off screen.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 17, 2024, 3:43pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/11 "2024-04-17T15:43:28Z")
It’s a very cool feature. Excellent job, Jordan! 👍
As David said, I’m wondering if it’s possible not to shift the content.
Also, is there a particular reason for reducing the original width? I might not be aware of some limitations, though.
What I mean is _somewhat_ like this:
---
### Author:  [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [April 17, 2024, 4:02pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/12 "2024-04-17T16:02:33Z")
Functionality, all this appears to do is hide the timeline and notification bar, since the sidebar is already collapsible. I don’t really see the experience being changed or improved sufficiently to have another button in every topic.
It would make more sense if it changed the reading experience in some meaningful way like making it full width in Reader Mode. As it is now, I would probably never use this feature so ironically all it’s doing for me is adding more visual noise to the timeline.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 17, 2024, 5:36pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/13 "2024-04-17T17:36:57Z")
> [@piffy](#):
>
> It would make more sense if it changed the reading experience in some meaningful way like making it full width in Reader Mode. As it is now, I would probably never use this feature so ironically all it’s doing for me is adding more visual noise to the timeline.
I have some longer term goals to add in options for font, text size, width of content, etc. But for now, this is just a small experiment and a WIP.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 17, 2024, 5:40pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/14 "2024-04-17T17:40:48Z")
The latest changes to limit movement & have a better transition have been merged into this component. Thanks for the feedback so far 😄
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [April 17, 2024, 6:49pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/15 "2024-04-17T18:49:47Z")
I like this a lot!
> [@jordan.vidrine](#):
>
> This is still a WIP and would appreciate any bug reports or feedback be posted here 😄
Hiding the topic-map creates a big gap between the OP and the first reply. I wonder what a greyscaled topic map would look like.
I can reply to the OP, or reply directly to posts in Reader Mode. Maybe it should also be possible to reply from the bottom of the topic?
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 17, 2024, 7:04pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/16 "2024-04-17T19:04:40Z")
> [@simon](#):
>
> Hiding the topic-map creates a big gap between the OP and the first reply. I wonder what a greyscaled topic map would look like.
>
> 
Yeah, maybe I can make it a bit transparent as well. I tried hiding it with a smooth transition, but because of the way we render items in our list, sometimes this _isnt_ visible, and trying to hide it becomes a pain.
It’s the same with all of the small post notices & time gaps. The only way I could think is to use an element observer API, but even then, the movement is slightly unpredictable and I was noticing jitteriness randomly happening.
> [@simon](#):
>
> I can reply to the OP, or reply directly to posts in Reader Mode. Maybe it should also be possible to reply from the bottom of the topic?
This makes sense to me 👍
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [April 17, 2024, 11:14pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/17 "2024-04-17T23:14:46Z")
Keyboard shortcut (CTRL-something) to toggle would be awesome here (and we can teach about it when you hover on the button)
Not a fan of black and whiting the images, I feel like I am losing info.
I am pro though removing a lot of chrome like “like counts”, reply button, maybe even avatars.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 18, 2024, 11:33am UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/18 "2024-04-18T11:33:53Z")
Nice improvement, Jordan! It’s a much better experience not to see any movement shift now and some animation to smooth the transition. 👍
I agree with Sam’s suggestions; if we hide non-essential information, having the color back would make a good compromise. That could be an option, though. 🤔
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [April 20, 2024, 6:25am UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/19 "2024-04-20T06:25:04Z")
> [@jordan.vidrine](#):
>
> I have some longer term goals to add in options for font, text size, width of content, etc.
Yes, yes yes!!!
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [April 22, 2024, 9:25pm UTC](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314/20 "2024-04-22T21:25:00Z")
Once you’re in reader mode, you have to click to get to another page, and then, if you want reader mode, you have to click again to turn it back on. Maybe make the other nav links a tiny bit less hidden and let them work and leave it on when we get to the next topic.
Another idea, turn it off automatically when you get to the end of the topic.
Or, automatically navigate to the next topic in the last topic-list you visited!
[Next page](https://meta.discourse.org/t/reader-mode-theme-component-feedback/304314.md?page=2)