# Avid Reader Theme

**URL:** https://meta.discourse.org/t/avid-reader-theme/202156
**Category:** Theme
**Tags:** official, avid-reader-theme
**Created:** [August 30, 2021, 6:54pm UTC](https://meta.discourse.org/t/avid-reader-theme/202156 "2021-08-30T18:54:40Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [August 30, 2021, 6:54pm UTC](https://meta.discourse.org/t/avid-reader-theme/202156/1 "2021-08-30T18:54:40Z")

</div>

> ⚠ 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](https://getpocket.com/). |
| 🛠 | **Repository Link** | [https://github.com/discourse/avid-reader](https://github.com/discourse/avid-reader) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme

> [@](#):
>
> :discourse2: As this is an #official theme maintained by the Discourse team, #Support issues, #Contribute > Bug reports, #Contribute > UX suggestions, and requests for #Development advice can be made in the respective categories here on Meta, and tagged with the appropriate theme tag. Click on a link below to get one started. 👍
> 
> [❓&nbsp; **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=avid-reader-theme "Ask for support on configuring and using the Avid Reader Theme") [🐛&nbsp; **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=avid-reader-theme "A bug report means something is broken, preventing normal/typical use of the theme") [👀&nbsp; **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=avid-reader-theme "Discussion about the user interface of the Avid Reader Theme, and how features are presented (including language and UI elements)") [🧑‍🎨&nbsp; **Dev**](https://meta.discourse.org/new-topic?category_id=7&tags=avid-reader-theme "Advice on how to customise this theme for your site")

### 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

 ![Home](https://global.discourse-cdn.com/meta/original/3X/e/a/ea90479d886d26759bdb2404669a952653bf9294.png) ![Top](https://global.discourse-cdn.com/meta/original/3X/2/5/25315c369c5fc41539944e4bc424b739fb747f81.png)

 ![Topic-Sample](https://global.discourse-cdn.com/meta/original/3X/9/c/9ca011e769947a087c5970129378f81c65e88c80.jpeg)

# Theme Components

The theme includes the following theme-components:

- [Discourse Clickable Topic Component](https://github.com/discourse/discourse-clickable-topic)
- [Versatile Banner](https://github.com/tshenry/discourse-versatile-banner.git) by @tshenry

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**
>
> ![versatile banner settings](https://global.discourse-cdn.com/meta/original/3X/a/0/a0a0f65bb0b096ffb6b7cf965247e529e50f05f1.png)

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

```plaintext
<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.

 ![Categories](https://global.discourse-cdn.com/meta/original/3X/7/5/750320e61c2cd60f06139221ed0f28e1b3ce417e.png)

> **See HEX Color Values**
>
> ```plaintext
> #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](https://global.discourse-cdn.com/meta/original/3X/e/5/e5467e58406239453513939639eb254fb6247519.png)

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

 ![without hide bg](https://global.discourse-cdn.com/meta/original/3X/d/6/d68b9fab2e829b650a0281385fc03b8d968d9982.jpeg) ![with hide bg](https://global.discourse-cdn.com/meta/original/3X/c/b/cba57cae3d83517ada6bcfad4ddfce13e393fe48.png)

* * *

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 document**
> >
> > Perform check on document:

---

<div class="post-metadata">

### Author: ![P2W](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/p2w/32/304345_2.png) [@P2W](https://meta.discourse.org/u/P2W)
#### Post date: [September 2, 2021, 4:28pm UTC](https://meta.discourse.org/t/avid-reader-theme/202156/2 "2021-09-02T16:28:42Z")

</div>

nice theme, easy on the eyes.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [September 2, 2021, 4:58pm UTC](https://meta.discourse.org/t/avid-reader-theme/202156/3 "2021-09-02T16:58:54Z")

</div>

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?

 ![kuva](https://global.discourse-cdn.com/meta/original/3X/0/3/030b1345a85dffc783369798d28c3ca097184a72.png)

---

<div class="post-metadata">

### Author: ![zavorio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zavorio/32/225332_2.png) [@zavorio](https://meta.discourse.org/u/zavorio)
#### Post date: [September 2, 2021, 5:19pm UTC](https://meta.discourse.org/t/avid-reader-theme/202156/4 "2021-09-02T17:19:26Z")

</div>

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

 ![CleanShot 2021-09-02 at 11.09.20](https://global.discourse-cdn.com/meta/original/3X/4/0/402a5d52615488de6934ccf9356456bcfa22ebe6.png)  
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!

---

<div class="post-metadata">

### Author: ![zavorio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zavorio/32/225332_2.png) [@zavorio](https://meta.discourse.org/u/zavorio)
#### Post date: [September 3, 2021, 9:16pm UTC](https://meta.discourse.org/t/avid-reader-theme/202156/5 "2021-09-03T21:16:30Z")

</div>

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

---

<div class="post-metadata">

### Author: ![elopio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/elopio/32/218413_2.png) [@elopio](https://meta.discourse.org/u/elopio)
#### Post date: [September 7, 2021, 1:23am UTC](https://meta.discourse.org/t/avid-reader-theme/202156/6 "2021-09-07T01:23:19Z")

</div>

Wow, I like it!

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

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

Thanks @zavorio and @senioritapolyester \<3

---

<div class="post-metadata">

### Author: ![CamilleRoux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/camilleroux/32/119575_2.png) [@CamilleRoux](https://meta.discourse.org/u/CamilleRoux)
#### Post date: [September 8, 2021, 2:04pm UTC](https://meta.discourse.org/t/avid-reader-theme/202156/7 "2021-09-08T14:04:38Z")

</div>

Is there a dark mode?

---

<div class="post-metadata">

### Author: ![zavorio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zavorio/32/225332_2.png) [@zavorio](https://meta.discourse.org/u/zavorio)
#### Post date: [September 8, 2021, 3:19pm UTC](https://meta.discourse.org/t/avid-reader-theme/202156/8 "2021-09-08T15:19:14Z")

</div>

@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:

 ![CleanShot 2021-09-08 at 08.41.25](https://global.discourse-cdn.com/meta/original/3X/6/3/638c7a16949e1d59adffb18aeb52322408d87333.jpeg)

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 🤠

---

<div class="post-metadata">

### Author: ![Zup](https://avatars.discourse-cdn.com/v4/letter/z/c37758/32.png) [@Zup](https://meta.discourse.org/u/Zup)
#### Post date: [October 20, 2021, 7:54pm UTC](https://meta.discourse.org/t/avid-reader-theme/202156/9 "2021-10-20T19:54:28Z")

</div>

> [@zavorio](#):
>
> Something more along the lines of the Titanium theme for Standard Notes:
> 
> ![CleanShot 2021-09-08 at 08.41.25](https://global.discourse-cdn.com/meta/original/3X/6/3/638c7a16949e1d59adffb18aeb52322408d87333.jpeg)

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

---

<div class="post-metadata">

### Author: ![zavorio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zavorio/32/225332_2.png) [@zavorio](https://meta.discourse.org/u/zavorio)
#### Post date: [October 21, 2021, 12:13am UTC](https://meta.discourse.org/t/avid-reader-theme/202156/10 "2021-10-21T00:13:32Z")

</div>

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

---

<div class="post-metadata">

### Author: ![stuwest](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stuwest/32/192400_2.png) [@stuwest](https://meta.discourse.org/u/stuwest)
#### Post date: [October 18, 2022, 5:45pm UTC](https://meta.discourse.org/t/avid-reader-theme/202156/11 "2022-10-18T17:45:43Z")

</div>

I’m loving this theme, but my instance just added the new sidebar feature and the notifications menu broke. Has anyone else had that issue or is it just me?

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [April 29, 2023, 1:59pm UTC](https://meta.discourse.org/t/avid-reader-theme/202156/12 "2023-04-29T13:59:32Z")

</div>

It’s because of this CSS:

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

```

I don’t know what is the original purpose of this rule in this theme.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [April 29, 2023, 3:04pm UTC](https://meta.discourse.org/t/avid-reader-theme/202156/13 "2023-04-29T15:04:29Z")

</div>

And chat icon missing. I used this theme earlier, but I dumped it because there was other issues too — sorry, can’t remember anymore what. But I see this theme broken one.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [April 29, 2023, 6:52pm UTC](https://meta.discourse.org/t/avid-reader-theme/202156/14 "2023-04-29T18:52:39Z")

</div>

> [@Jagster](#):
>
> And chat icon missing.

From what I saw from Discourse’s code, I believe the cause is the same as my message above.

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [May 2, 2023, 11:11am UTC](https://meta.discourse.org/t/avid-reader-theme/202156/15 "2023-05-02T11:11:28Z")

</div>

@zavorio there are a couple of PR on Github for you. Please approve them to fix the theme.

Would you consider continuing to update this theme in the future, or would you prefer to move on from it?

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [June 7, 2023, 3:54pm UTC](https://meta.discourse.org/t/avid-reader-theme/202156/21 "2023-06-07T15:54:11Z")

</div>

The theme has been moved to our organization on GitHub and has been fixed.

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

(OP updated)
