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

[Docpage Enhancement]: Auto-Theme detection #2655

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

Originally created by @LaptopDev on GitHub (Mar 12, 2025).

Type of Enhancement

Documentation

Describe the Feature/Enhancement

Automatically recognize system theme in documentation page; not sure if this is associated closely with the main web app.

More Details

I can't code and don't know the project structure or code. You may justifiably not want to see ChatGPT's recommendation, so I have spoilered it for spam below:

Click to expand suggested Markdown 
````markdown
### To make the webpage use the system theme by default on Linux (or any OS with system-wide dark/light mode settings), modify the CSS to respect the user's preferred color scheme.

#### Steps:
1. **Use `prefers-color-scheme` in CSS**  
   Add the following CSS to detect the system theme and apply a light or dark theme accordingly:

   ````css
   @media (prefers-color-scheme: dark) {
       body {
           background-color: #1e1e1e;
           color: #ffffff;
       }
       a {
           color: #bb86fc;
       }
   }

   @media (prefers-color-scheme: light) {
       body {
           background-color: #ffffff;
           color: #000000;
       }
       a {
           color: #1a0dab;
       }
   }
   ````

2. **Ensure TailwindCSS or other frameworks respect this setting**  
   If you're using TailwindCSS (which is included in your HTML), you can enable dark mode in `tailwind.config.js`:

   ````js
   module.exports = {
       darkMode: 'media', // Automatically use system theme
       theme: {
           extend: {},
       },
       plugins: [],
   }
   ````

3. **Modify the `<html>` tag dynamically using JavaScript (Optional, for manual overrides)**  
   If the site allows users to toggle themes manually but should default to the system setting, use:

   ````js
   if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
       document.documentElement.classList.add('dark');
   } else {
       document.documentElement.classList.remove('dark');
   }
   ````
   
This ensures your theme defaults to the system preference without requiring manual selection.
````

Why would this be helpful?

My eyes

Future Implementation (Screenshot)

Image

Audiobookshelf Server Version

Any

Current Implementation (Screenshot)

No response

Originally created by @LaptopDev on GitHub (Mar 12, 2025). ### Type of Enhancement Documentation ### Describe the Feature/Enhancement Automatically recognize system theme in [documentation page](https://www.audiobookshelf.org/docs); not sure if this is associated closely with the main web app. <details> <summary>More Details</summary> I can't code and don't know the project structure or code. You may justifiably not want to see ChatGPT's recommendation, so I have spoilered it for spam below: <details> <summary>Click to expand suggested Markdown</summary> ````markdown ### To make the webpage use the system theme by default on Linux (or any OS with system-wide dark/light mode settings), modify the CSS to respect the user's preferred color scheme. #### Steps: 1. **Use `prefers-color-scheme` in CSS** Add the following CSS to detect the system theme and apply a light or dark theme accordingly: ````css @media (prefers-color-scheme: dark) { body { background-color: #1e1e1e; color: #ffffff; } a { color: #bb86fc; } } @media (prefers-color-scheme: light) { body { background-color: #ffffff; color: #000000; } a { color: #1a0dab; } } ```` 2. **Ensure TailwindCSS or other frameworks respect this setting** If you're using TailwindCSS (which is included in your HTML), you can enable dark mode in `tailwind.config.js`: ````js module.exports = { darkMode: 'media', // Automatically use system theme theme: { extend: {}, }, plugins: [], } ```` 3. **Modify the `<html>` tag dynamically using JavaScript (Optional, for manual overrides)** If the site allows users to toggle themes manually but should default to the system setting, use: ````js if (window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } ```` This ensures your theme defaults to the system preference without requiring manual selection. ```` </details> </details> ### Why would this be helpful? My eyes ### Future Implementation (Screenshot) ![Image](https://github.com/user-attachments/assets/7203ed90-f3cf-4a68-b05b-2441e47e4bb6) ### Audiobookshelf Server Version Any ### Current Implementation (Screenshot) _No response_
adam added the enhancement label 2026-04-25 00:09:20 +02:00
adam closed this issue 2026-04-25 00:09:20 +02:00
adam commented 2026-04-25 00:09:21 +02:00
Author
Owner
Copy Link
Copy Source

@nichwall commented on GitHub (Mar 12, 2025):

The website is in https://github.com/audiobookshelf/audiobookshelf-web

@nichwall commented on GitHub (Mar 12, 2025): The website is in https://github.com/audiobookshelf/audiobookshelf-web
adam commented 2026-04-25 00:09:21 +02:00
Author
Owner
Copy Link
Copy Source

@LaptopDev commented on GitHub (Mar 12, 2025):

The website is in audiobookshelf/audiobookshelf-web

woops; this issue can be deleted @advplyr . I mirrored it to the correct repo

@LaptopDev commented on GitHub (Mar 12, 2025): > The website is in [audiobookshelf/audiobookshelf-web](https://github.com/audiobookshelf/audiobookshelf-web) woops; this issue can be deleted @advplyr . I [mirrored it](https://github.com/audiobookshelf/audiobookshelf-web/issues/130) to the correct repo
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 enhancement
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#2655
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?