[Enhancement] Improve visibility of Local/Direct text #556

New Issue

2026-04-24T23:28:39+02:00

adam commented

2026-04-24 23:28:39 +02:00

Originally created by @davothegeek on GitHub (May 16, 2023).

A minor issue, but when listening to some audiobooks with lighter coloured covers it is difficult to see the Local/Direct text at the top of the app (while on the full listening screen) as the background colour changes with the audiobook cover colour.

This is an example where the audiobook cover for the book being listened to creates a much lighter app background (this is Underlord by Will Wight for reference) - the LOCAL green text is barely visible:

Most other audiobooks it is easier to read (this example is Dreadgod by Will Wight, though most audiobook covers seem to cause darker colours):

The easiest solution, in my opinion, would be to put the text in a badge, so it wouldn't matter what the background colour was for the text, as the badge colour would stay the same. Also, while tweaking this section, it would be preferred to vertically centre the text in line with the other icons in this section (the down caret, chromecast icon and 3 dot menu).

This is an example of a 'badge' in this context (bootstrap terminology and example):

Using the badge example above, something like the Light or Dark badge would work regardless of the app background colour for the listening 'page' (which changes based on cover art of the playing audiobook).

Alternative solutions could be using icons instead to represent local/direct play, or moving the location of this info (as it is the top of the app where the colour changes are most pronounced).

While it is possible to change the background colour behaviour to improve/resolve this, that would be more complex of a change and possibly have even more impacts.

Originally created by @davothegeek on GitHub (May 16, 2023). A minor issue, but when listening to some audiobooks with lighter coloured covers it is difficult to see the Local/Direct text at the top of the app (while on the full listening screen) as the background colour changes with the audiobook cover colour. This is an example where the audiobook cover for the book being listened to creates a much lighter app background (this is Underlord by Will Wight for reference) - the LOCAL green text is barely visible: <img src="https://github.com/advplyr/audiobookshelf-app/assets/27533751/bc6597fc-a521-43fe-bf37-b87ffb4045b8" width="400"> Most other audiobooks it is easier to read (this example is Dreadgod by Will Wight, though most audiobook covers seem to cause darker colours): <img src="https://github.com/advplyr/audiobookshelf-app/assets/27533751/dabf6d25-98d2-40b1-b329-2d137d59d3e7" width="400"> The easiest solution, in my opinion, would be to put the text in a badge, so it wouldn't matter what the background colour was for the text, as the badge colour would stay the same. Also, while tweaking this section, it would be preferred to vertically centre the text in line with the other icons in this section (the down caret, chromecast icon and 3 dot menu). This is an example of a 'badge' in this context ([bootstrap terminology](https://getbootstrap.com/docs/5.3/examples/badges/) and example): <img src="https://github.com/advplyr/audiobookshelf-app/assets/27533751/154f6096-3d3f-4387-b2c0-5366285fd3f0" width="500"> <img src="https://github.com/advplyr/audiobookshelf-app/assets/27533751/b8b90d4f-2ec1-4567-a132-b3b23627ee98" width="500"> Using the badge example above, something like the Light or Dark badge would work regardless of the app background colour for the listening 'page' (which changes based on cover art of the playing audiobook). Alternative solutions could be using icons instead to represent local/direct play, or moving the location of this info (as it is the top of the app where the colour changes are most pronounced). While it is possible to change the background colour behaviour to improve/resolve this, that would be more complex of a change and possibly have even more impacts.

adam added the enhancement label 2026-04-24 23:28:39 +02:00

adam closed this issue

2026-04-24 23:28:39 +02:00

adam commented

2026-04-24 23:28:40 +02:00

@Dr-Blank commented on GitHub (May 17, 2023):

Another possible fix could be to change the text color based on the background to provide maximum contrast, similar to what material you does with generating a color pallette from the image.

@Dr-Blank commented on GitHub (May 17, 2023): Another possible fix could be to change the text color based on the background to provide maximum contrast, similar to what `material you` does with generating a color pallette from the image.

adam commented

2026-04-24 23:28:41 +02:00

@advplyr commented on GitHub (May 18, 2023):

I like the badge idea but I thought this should be more discrete since many users won't care. I ended up switching this so it is the color of everything else at the top of the audio player. Either white for dark backgrounds and black for light backgrounds.

@advplyr commented on GitHub (May 18, 2023): I like the badge idea but I thought this should be more discrete since many users won't care. I ended up switching this so it is the color of everything else at the top of the audio player. Either white for dark backgrounds and black for light backgrounds.

adam commented

2026-04-24 23:28:42 +02:00

@advplyr commented on GitHub (May 23, 2023):

Updated in v0.9.64-beta

@advplyr commented on GitHub (May 23, 2023): Updated in [v0.9.64-beta](https://github.com/advplyr/audiobookshelf-app/releases/tag/v0.9.64-beta)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/audiobookshelf-app#556