Avid Reader Theme

:warning: If you installed the theme before June 7, 2023, you will need to reinstall it using the new repository link on GitHub.

:discourse2: Summary Avid Reader is a theme focused on readability, inspired by the look of Pocket.
:hammer_and_wrench: Repository Link https://github.com/discourse/avid-reader
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme

Features

We implemented bigger font sizes, more contrast in size between different headings, more space in between lines and a neutral background color for a better reading experience. And there are a few custom icons as well.

Screenshots

Theme Components

The theme includes the following theme-components:

For Versatile Banner, we are using only a few features to have a simple welcome message with a description only at the homepage. You can check the screenshot below to replicate our settings for it:

See complete settings for Versatile Banner

And here is the code we used for our welcome message + description:

<h2 class="x-title">
  Your Welcome Message
</h2>
<div class="description">
  <p>
    A brief description of what your Discourse is all about
  </p>
</div>

Our Recommendations

If you want to have your Discourse to look just like the live preview, besides implementing the setting for Versatile Banner above, these were our choices for some of the Admin settings.

Category style

We prefer the category style to be bar instead of the default bullet. This can be changed in:

Admin > Settings > Basic Setup > category style > bar

Desktop category page style

We opted to use the ‘boxes’ option for the Categories page. This can be changes in:

Admin > Settings > Basic Setup > desktop category page style > boxes with subcategories

Category colors

We made a color palette for category colors that we feel works nicely with the rest of the theme.

See HEX Color Values
#8ECEA0
#20A9AB
#946F96
#CF9D2B
#366B80
#F69A9B
#9FD8DF
#00917C
#F27072
#C1CEBF
#6B7AA1
#F4D6A2
#F0C928
#C6B4CE
#65516B
#C56183

You can add these HEX values in:

Admin > Settings > Basic Setup > category colors

Remove user card background setting

The theme does have one setting which might be a bit controversial. It is called ‘hide user card background’ and what it does is make it so that user card backgrounds are just white. We feel like even with the strong overlay Discourse uses by default, user cards backgrounds sometimes are a bit noisy.
hide user card background setting

But this does limit an aspect of user self expression. We opted to leave it as a setting, up to the Admin to decide.


This is our very first theme and really the first real thing we do coding wise. We hope you enjoy it and we are more than happy to hear any feedback the community has. Thanks to Discourse for supporting this work!


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

Last edited by @JammyDodger 2024-06-17T11:27:41Z

Check documentPerform check on document:
26 „Gefällt mir“

nice theme, easy on the eyes.

2 „Gefällt mir“

Topics don’t change color to something else, like grayish, when opened. When everything is same black it is difficult to find right away unread topics. Matter of CSS?

2 „Gefällt mir“

@Jagster thanks for pointing this out. We had tested this in Safari and Chrome while logged out and it worked fine.


But I just cleaned the browsers history to test it and it doesnt work, topics don’t change colors after visiting them. Will look into this later today or early tomorrow, thanks!

1 „Gefällt mir“

We just updated the CSS, should work now. It was an old CSS rule that we wrote at the beginning and forgot about, ha.

2 „Gefällt mir“

Wow, I like it!

We’ll try it as the default theme in https://bunqueer.jaquerespeis.org/

The logo doesn’t look good now, we’ll change it later.

Thanks @zavorio and @senioritapolyester <3

1 „Gefällt mir“

Is there a dark mode?

1 „Gefällt mir“

@CamilleRoux we might make one later one but first we’d like to do a variation on the current color scheme for a slightly darker version of the theme. But its not something you would call Dark mode. Something more along the lines of the Titanium theme for Standard Notes:

I find most common Light/Dark UIs to be too hard contrast for my eyes. As @P2W expressed above, our goal was to make something easy on the eyes. A traditional dark mode might be too much. But hey, we might change our minds :cowboy_hat_face:

2 „Gefällt mir“

Has there been any progress on this color scheme? It’s really quite perfect!

1 „Gefällt mir“

Hey! Not really, but will be out before the end of the year. We’ve been a bit busy :sweat_smile:

2 „Gefällt mir“

Ich liebe dieses Theme, aber meine Instanz hat gerade die neue Seitenleistenfunktion hinzugefügt und das Benachrichtigungsmenü ist kaputt gegangen. Hat jemand anderes dieses Problem gehabt oder bin ich es nur?

Das liegt an diesem CSS:

.widget-component-connector {
    display: none;
}

Ich weiß nicht, was der ursprüngliche Zweck dieser Regel in diesem Theme ist.

2 „Gefällt mir“

Und das Chat-Symbol fehlt. Ich habe dieses Theme früher verwendet, es aber wieder verworfen, da es auch andere Probleme gab – Entschuldigung, ich erinnere mich nicht mehr, was. Aber ich sehe, dass dieses Theme kaputt ist.

Nach dem, was ich im Code von Discourse gesehen habe, glaube ich, dass die Ursache dieselbe ist wie in meiner obigen Nachricht.

2 „Gefällt mir“

@zavorio es gibt ein paar PRs auf Github für dich. Bitte genehmige sie, um das Theme zu reparieren.

Würdest du in Erwägung ziehen, dieses Theme in Zukunft weiter zu aktualisieren, oder würdest du es lieber hinter dir lassen?

1 „Gefällt mir“

Das Theme wurde in unsere Organisation auf GitHub verschoben und wurde behoben.

Wenn Sie das Theme vor dem 7. Juni 2023 installiert haben, müssen Sie es mit dem neuen Repository-Link auf GitHub neu installieren.

(OP aktualisiert)

3 „Gefällt mir“