starred/audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2026-07-26 22:48:43 +02:00
Code Issues 454 Packages Projects Releases 10 Wiki Activity

[PR #1608] [MERGED] Add: UI Black/OLED theme #1633

New Issue
Closed
opened 2026-04-24 23:59:51 +02:00 by adam · 0 comments
adam commented 2026-04-24 23:59:51 +02:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf-app/pull/1608
Author: @NickSkier
Created: 6/20/2025
Status: ✅ Merged
Merged: 6/20/2025
Merged by: @advplyr

Base: master ← Head: ui_black_theme

📝 Commits (2)

  • 3f21b41 Add: UI Black/OLED theme
  • 616cf90 Fix audio player colors for black theme

📊 Changes

3 files changed (+30 additions, -4 deletions)

View changed files

📝 assets/tailwind.css (+19 -0)
📝 components/app/AudioPlayer.vue (+7 -4)
📝 pages/settings.vue (+4 -0)

📄 Description

Brief summary

Adds a new "Black/OLED" theme option to the UI, providing a true black background for OLED displays.

Which issue is fixed?

Partially resolves #1006

Pull Request Type

This affects both Android and iOS.
This change affects the frontend of the app.

In-depth Description

This PR adds a new Black option to the application's UI. This theme sets the primary background and several other color variables to pure black (rgb(0, 0, 0)), which is highly beneficial for devices with OLED screens.

Changes involve:

  • Adding a new CSS definition html[data-theme='black'] in assets/tailwind.css to define the specific color variables for the black theme.
  • Adding Black as a selectable theme option in the settings page pages/settings.vue.

Note: This PR is focused only on the OLED theme. The system theme following from issue #1006 isn't resolved.

How have you tested this?

  1. Tested using a phone with an OLED display.
  2. Confirmed that the app's background, player, and other UI components switched to a true black theme.
  3. Confirmed text readability against the black background in different light conditions.

Screenshots

Home page overview:
Screenshot_20250620-204942
Item page overview:
Screenshot_20250620-204946
Player UI overview:
Screenshot_20250620-204854
Settings page overview:
Screenshot_20250620-205935

🔄 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/1608 **Author:** [@NickSkier](https://github.com/NickSkier) **Created:** 6/20/2025 **Status:** ✅ Merged **Merged:** 6/20/2025 **Merged by:** [@advplyr](https://github.com/advplyr) **Base:** `master` ← **Head:** `ui_black_theme` --- ### 📝 Commits (2) - [`3f21b41`](https://github.com/advplyr/audiobookshelf-app/commit/3f21b4172ba9c53c40fb138146b2dd21e2fc24fc) Add: UI Black/OLED theme - [`616cf90`](https://github.com/advplyr/audiobookshelf-app/commit/616cf9029dea495bff5a19ccbb76020dcda5ffd2) Fix audio player colors for black theme ### 📊 Changes **3 files changed** (+30 additions, -4 deletions) <details> <summary>View changed files</summary> 📝 `assets/tailwind.css` (+19 -0) 📝 `components/app/AudioPlayer.vue` (+7 -4) 📝 `pages/settings.vue` (+4 -0) </details> ### 📄 Description ## Brief summary <!-- Please provide a brief summary of what your PR attempts to achieve. --> Adds a new "Black/OLED" theme option to the UI, providing a true black background for OLED displays. ## Which issue is fixed? <!-- Which issue number does this PR fix? Ex: "Fixes #1234" --> Partially resolves #1006 ## Pull Request Type <!-- Does this affect only Android, only iOS, or both? Does this change the frontend or the backend of the apps? --> This affects both Android and iOS. This change affects the frontend of the app. ## In-depth Description <!-- Describe your solution in more depth. How does it work? Why is this the best solution? Does it solve a problem that affects multiple users or is this an edge case for your setup? --> This PR adds a new **Black** option to the application's UI. This theme sets the primary background and several other color variables to pure black (`rgb(0, 0, 0)`), which is highly beneficial for devices with OLED screens. Changes involve: * Adding a new CSS definition `html[data-theme='black']` in `assets/tailwind.css` to define the specific color variables for the black theme. * Adding `Black` as a selectable theme option in the settings page `pages/settings.vue`. **Note:** This PR is focused only on the OLED theme. The system theme following from issue #1006 isn't resolved. ## How have you tested this? <!-- Please describe in detail with reproducible steps how you tested your changes. --> 1. Tested using a phone with an OLED display. 2. Confirmed that the app's background, player, and other UI components switched to a true black theme. 3. Confirmed text readability against the black background in different light conditions. ## Screenshots <!-- If your PR includes any changes to the front-end, please include screenshots or a short video from before and after your changes. --> Home page overview: ![Screenshot_20250620-204942](https://github.com/user-attachments/assets/c2b05f59-ebbe-40be-8717-6d28c8165470) Item page overview: ![Screenshot_20250620-204946](https://github.com/user-attachments/assets/070d1d77-bf0b-440c-9e4a-ede92dc8495f) Player UI overview: ![Screenshot_20250620-204854](https://github.com/user-attachments/assets/4e5f73d8-f8f6-4565-b2c4-5ee37352c723) Settings page overview: ![Screenshot_20250620-205935](https://github.com/user-attachments/assets/690dae29-0f03-44b9-8265-7ef37dc08b6c) --- <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-24 23:59:51 +02:00
adam closed this issue 2026-04-24 23:59:51 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
android
android auto
backlog
bug
enhancement
ereader
help wanted
iOS
progress sync
pull-request
Mirrored from GitHub Pull Request
 sleep timer
unable to reproduce
waiting
No labels pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
adam (Adam Melkus)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf-app#1633