Reader Mode

AI-generated summary

The official Reader Mode theme component for Discourse has been released to provide a focused reading experience by fading UI elements and offering customization for fonts, text size, and background colors. Tris20 welcomed the official release but noted a limitation where the Reader Mode icon fails to appear on topics using the Discourse TOC plugin if no replies exist, a behavior confirmed by putty and resolved by switching themes. JammyDodger subsequently ensured the component was added to all themes.

Users have expressed strong interest in mobile support, with Jagster, Arnold, and hoangphuctran93 highlighting the lack of mobile functionality and guest access. Additionally, StefanoCecere reported a conflict where Reader Mode and DiscoTOC cannot function simultaneously. A request to match the platform’s font list was raised by Tris20, and a translation issue regarding the button text was addressed by Moin, who merged a pull request to make the component translatable, a fix confirmed by Rhod.

:discourse2: Summary Reader Mode enables a focused reader experience within Discourse topics
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository https://github.com/discourse/reader-mode
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

This theme component adds a “reader mode” button to the topic timeline. “Reader mode” places the emphasis on the written word and lets the other UI elements fade into the background for a more focused reading experience. Users also have the option to choose from various fonts, adjust text size and reading width, and change to their preferred background colour

Settings

Name Descriptions
svg icons

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-13T23:03:38Z

Check documentPerform check on document:
25 Likes

I really love option to change font size :smiling_face_with_three_hearts:

Bummer that component is not for mobiles.

6 Likes

Happy to see this officially released :slight_smile: :tada:

Is it possible to match the fonts in reader mode to the font-list of the platform? For example, we’re using Open Sans, but that’s not an option on the font dropdown for Reader Mode. Would be a nice touch to have the same list of fonts to choose from. :slight_smile:


Edit: I’m also noticing that topics which use Discourse TOC, but do not have a reply are not showing the Reader Mode Icon.

You can see an example here:

However as soon as there is at least one reply, the Timeline, ToC and Reader Mode seem to appear as expected.

3 Likes

Am I crazy? I don’t see the icon that is included in the topics’s screenshot:

Probably not!

Just try a different theme (I would recommend default, meta branded or air)

3 Likes

Ah, yep, that solved it. Thank you :slight_smile:

1 Like

I’ve added it to all the themes now. :+1: Not sure if it was missed off some on purpose but I’ll wait for the complaints to roll in to find out. :slight_smile:

2 Likes

Could you add the function for guests too? Currently it’s only for registered and logged in Users.

An implementetion for mobile also would be great.

Thanks for this great component :slight_smile:

Yes, I also hope that in the next updates this theme component will support user options on the phone.

Reader Mode conflics with Disco TOC

it seems we can’t have both the Table of Content (by DiscoTOC, mandatory for big documents) and Reader Mode (also mandatory for big documents)

4 Likes

Is it possible to translate this text?
Screenshot - 23_06_2025 , 09_26_26 a. m.

2 Likes

I suggested a change to make it translatable:

https://github.com/discourse/reader-mode/pull/50

Edit: Merged :tada: So once you update the component, you should be able to translate the button on its configuration page.

4 Likes

Perfect!!!
Thank you so much!!!

2 Likes