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 #4728] [CLOSED] Add dark/light theme switching functionality #4328

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

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf/pull/4728
Author: @farhanisrakalvy
Created: 10/8/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

Implement Dynamic Theme Switching (Dark/Light Mode)

This commit introduces a comprehensive theme system that allows users to seamlessly
switch between dark and light modes throughout the application.

🌟 Key Features:
• Toggle between dark and light themes with smooth transitions
• Automatic theme persistence using localStorage
• System preference detection for initial theme selection
• Comprehensive CSS variable system for consistent theming
• Theme-aware utility classes for easy component integration

🎨 What's Included:
• Theme Vuex store for state management and theme logic
• Complete CSS variable definitions for both light and dark modes
• Smooth 0.3s transitions for all theme-related properties
• Proper contrast ratios ensuring accessibility in both themes
• Support for all UI components including buttons, inputs, icons, and dropdowns

🚀 Developer Experience:
• Easy-to-use utility classes (.text-themed, .bg-primary, etc.)
• Centralized theme management through Vuex store
• Automatic document class updates (html.dark / html.light)
• No breaking changes to existing components

This enhancement significantly improves user experience by providing
visual comfort options and follows modern UI/UX best practices.

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

🔄 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/4728 **Author:** [@farhanisrakalvy](https://github.com/farhanisrakalvy) **Created:** 10/8/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 Implement Dynamic Theme Switching (Dark/Light Mode) This commit introduces a comprehensive theme system that allows users to seamlessly switch between dark and light modes throughout the application. 🌟 Key Features: • Toggle between dark and light themes with smooth transitions • Automatic theme persistence using localStorage • System preference detection for initial theme selection • Comprehensive CSS variable system for consistent theming • Theme-aware utility classes for easy component integration 🎨 What's Included: • Theme Vuex store for state management and theme logic • Complete CSS variable definitions for both light and dark modes • Smooth 0.3s transitions for all theme-related properties • Proper contrast ratios ensuring accessibility in both themes • Support for all UI components including buttons, inputs, icons, and dropdowns 🚀 Developer Experience: • Easy-to-use utility classes (.text-themed, .bg-primary, etc.) • Centralized theme management through Vuex store • Automatic document class updates (html.dark / html.light) • No breaking changes to existing components This enhancement significantly improves user experience by providing visual comfort options and follows modern UI/UX best practices. <img width="1913" height="887" alt="Screenshot 2025-10-08 212847" src="https://github.com/user-attachments/assets/ee379879-d625-420b-814d-02af8da67526" /> <img width="1912" height="887" alt="Screenshot 2025-10-08 212825" src="https://github.com/user-attachments/assets/ba63dc25-5266-4c0f-85e9-1672f1ea54d8" /> --- <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:18 +02:00
adam closed this issue 2026-04-25 00:19:18 +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#4328
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?