[PR #1822] Text tint for ereader #1709

New Issue

2026-04-25T00:00:46+02:00

adam commented

2026-04-25 00:00:46 +02:00

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf-app/pull/1822
Author: @abouthillier
Created: 3/12/2026
Status: 🔄 Open

Base: master ← Head: Text-Tint-for-ereader

📝 Commits (3)

ea1482d Added tint slider for ereader
0c6c786 changed range from 10 to 100
aa4c23d ensures tint is only applied in dark and black themes

📊 Changes

3 files changed (+36 additions, -3 deletions)

View changed files

📝 components/readers/EpubReader.vue (+26 -1)
📝 components/readers/Reader.vue (+7 -0)
📝 strings/en-us.json (+3 -2)

📄 Description

Brief summary

Added a tint slider to the ereader settings to further augment the theme controls in dark and black themes. This is intended to increase viewing comfort at lower light levels, beyond what phone defaults are capable of achieving. Google Play Books uses a toggle for this, which is fine, but I thought a slider would be a more aesthetic UX choice.

Which issue is fixed?

Addresses Issue #1821

Pull Request Type

I have only tested this on Android, but it should work for iOS as well. This is a front-end change, and can easily be implemented in both the current web app, as well as the upcoming React front-end.

In-depth Description

I've added a input element to the reader component, and modified the themeRules() in the epubReader component to read and parse the new setting. The tint input data is added to ereaderSettings alongside theme, font, etc. and is save to localStorage appropriately.

In themeRules(), I've added tintBaseColor and tintFullColor variables that are then lerped between based on the percentage passed from the input slider.

Once the tinted color is decided upon from the lerp, it is used to define the fontColor, as long as theme is set to dark or black.

How have you tested this?

I have built the project on Windows and tested this in Android Studio, as well as on my Samsung Galaxy S20 FE

Screenshots

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/advplyr/audiobookshelf-app/pull/1822 **Author:** [@abouthillier](https://github.com/abouthillier) **Created:** 3/12/2026 **Status:** 🔄 Open **Base:** `master` ← **Head:** `Text-Tint-for-ereader` --- ### 📝 Commits (3) - [`ea1482d`](https://github.com/advplyr/audiobookshelf-app/commit/ea1482dc168554e12aaf1a8c08ed03a21f04ca61) Added tint slider for ereader - [`0c6c786`](https://github.com/advplyr/audiobookshelf-app/commit/0c6c7861be7199a914d449c84383bf3f6a635164) changed range from 10 to 100 - [`aa4c23d`](https://github.com/advplyr/audiobookshelf-app/commit/aa4c23d756d0536d4ce90602576c540e1feac4a3) ensures tint is only applied in dark and black themes ### 📊 Changes **3 files changed** (+36 additions, -3 deletions) <details> <summary>View changed files</summary> 📝 `components/readers/EpubReader.vue` (+26 -1) 📝 `components/readers/Reader.vue` (+7 -0) 📝 `strings/en-us.json` (+3 -2) </details> ### 📄 Description ## Brief summary Added a tint slider to the ereader settings to further augment the theme controls in dark and black themes. This is intended to increase viewing comfort at lower light levels, beyond what phone defaults are capable of achieving. Google Play Books uses a toggle for this, which is fine, but I thought a slider would be a more aesthetic UX choice. ## Which issue is fixed? Addresses Issue #1821 ## Pull Request Type I have only tested this on Android, but it should work for iOS as well. This is a front-end change, and can easily be implemented in both the current web app, as well as the upcoming React front-end. ## In-depth Description I've added a input element to the reader component, and modified the themeRules() in the epubReader component to read and parse the new setting. The tint input data is added to ereaderSettings alongside theme, font, etc. and is save to localStorage appropriately. In themeRules(), I've added tintBaseColor and tintFullColor variables that are then lerped between based on the percentage passed from the input slider. Once the tinted color is decided upon from the lerp, it is used to define the fontColor, as long as theme is set to dark or black. ## How have you tested this? I have built the project on Windows and tested this in Android Studio, as well as on my Samsung Galaxy S20 FE ## Screenshots <img width="355" height="776" alt="studio64_CSoiOXeiHr" src="https://github.com/user-attachments/assets/9e30b759-8c57-440a-bfcd-eb3ba5cd6f54" /> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

adam added the pull-request label 2026-04-25 00:00:46 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/audiobookshelf-app#1709