starred/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-05-30 23:40:40 +02:00
Code Issues 1.0k Packages Projects Releases 10 Wiki Activity

[PR #4733] [CLOSED] Implement Dynamic Theme Switching (Dark/Light Mode) #4333

New Issue
Closed
opened 2026-04-25 00:19:19 +02:00 by adam · 0 comments
adam commented 2026-04-25 00:19:19 +02:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf/pull/4733
Author: @farhanisrakalvy
Created: 10/9/2025
Status: ❌ Closed

Base: master ← Head: Theme_changing_dark_light_mood

📝 Commits (1)

  • af5ba65 Implement Dynamic Theme Switching (Dark/Light Mode)

📊 Changes

2 files changed (+640 additions, -0 deletions)

View changed files

➕ client/assets/theme.css (+584 -0)
➕ client/store/theme.js (+56 -0)

📄 Description

Description:
The ability for users to switch dynamically between Dark Mode and Light Mode. Users can toggle between the themes instantly without needing to refresh the page, and their preferences will be saved across sessions.

Key Changes:
Added a theme toggle switch in the header/navigation bar (located in the top-right corner).
Implemented styling for both Dark Mode (default) and Light Mode.

Files Edited or Added

Created Files:
     client/assets/theme.css - Theme-specific styling definitions
 client/store/theme.js - Vuex store module for theme state management

Updated Files:
client/layouts/default.vue - Main application layout
client/assets/app.css - Base application styling
client/components/controls/PlaybackSpeedControl.vue - Media playback controls
client/components/tables/UsersTable.vue - User management table
client/components/tables/BackupsTable.vue - System backups table
client/pages/config/users/_id/sessions.vue - User sessions page
client/pages/config/users/_id/index.vue - User profile page
client/pages/config/sessions.vue - Sessions management page
client/components/stats/PreviewIcons.vue - Statistics preview icons
client/pages/config/stats.vue - Statistics configuration page
client/pages/config/rss-feeds.vue - RSS feeds management page

Notes
As a beginner, I have implemented this feature solely for changing the main theme and have not yet integrated it into other parts of the application. I welcome any feedback on whether this approach is a good idea. If it is well-received, I plan to expand and improve this functionality further in the future.

Screenshot 2025-10-08 212825 Screenshot 2025-10-08 212847

🔄 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/pull/4733 **Author:** [@farhanisrakalvy](https://github.com/farhanisrakalvy) **Created:** 10/9/2025 **Status:** ❌ Closed **Base:** `master` ← **Head:** `Theme_changing_dark_light_mood` --- ### 📝 Commits (1) - [`af5ba65`](https://github.com/advplyr/audiobookshelf/commit/af5ba658c3ac9dce00830d95732fa02d4817131c) Implement Dynamic Theme Switching (Dark/Light Mode) ### 📊 Changes **2 files changed** (+640 additions, -0 deletions) <details> <summary>View changed files</summary> ➕ `client/assets/theme.css` (+584 -0) ➕ `client/store/theme.js` (+56 -0) </details> ### 📄 Description Description: The ability for users to switch dynamically between Dark Mode and Light Mode. Users can toggle between the themes instantly without needing to refresh the page, and their preferences will be saved across sessions. Key Changes: Added a theme toggle switch in the header/navigation bar (located in the top-right corner). Implemented styling for both Dark Mode (default) and Light Mode. Files Edited or Added Created Files: client/assets/theme.css - Theme-specific styling definitions client/store/theme.js - Vuex store module for theme state management Updated Files: client/layouts/default.vue - Main application layout client/assets/app.css - Base application styling client/components/controls/PlaybackSpeedControl.vue - Media playback controls client/components/tables/UsersTable.vue - User management table client/components/tables/BackupsTable.vue - System backups table client/pages/config/users/_id/sessions.vue - User sessions page client/pages/config/users/_id/index.vue - User profile page client/pages/config/sessions.vue - Sessions management page client/components/stats/PreviewIcons.vue - Statistics preview icons client/pages/config/stats.vue - Statistics configuration page client/pages/config/rss-feeds.vue - RSS feeds management page Notes As a beginner, I have implemented this feature solely for changing the main theme and have not yet integrated it into other parts of the application. I welcome any feedback on whether this approach is a good idea. If it is well-received, I plan to expand and improve this functionality further in the future. <img width="1912" height="887" alt="Screenshot 2025-10-08 212825" src="https://github.com/user-attachments/assets/97340695-c3f9-47ba-bebd-f112924f63e9" /> <img width="1913" height="887" alt="Screenshot 2025-10-08 212847" src="https://github.com/user-attachments/assets/8eac60ec-5547-445e-937b-77d8aea8007a" /> --- <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:19:19 +02:00
adam closed this issue 2026-04-25 00:19:20 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
authentication
backlog
bug
chapter editor
config-issue
ebooks
encoding/embedding
enhancement
help wanted
listening sessions & progress
planned
possible plugin
progress sync
pull-request
Mirrored from GitHub Pull Request
 sorting/filtering/searching
unable to reproduce
upload
users & permissions
waiting
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam (Adam Melkus)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf#4333
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?