btpf / Alexandria

A minimalistic cross-platform eBook reader built with Tauri, Epub.js, and Typescript
GNU General Public License v3.0
2.18k stars 49 forks source link

Book Sidebar Background Color Static #36

Closed ddewett closed 9 months ago

ddewett commented 10 months ago

Issue: Book "sidebar" sections keep background color when switching between light/dark themes

Platform: Linux

Settings:

Default Dark theme and Default Light theme

Steps:

  1. Find a book with a sidebar section (this one has a grey background).
  2. Switch between themes that change the font color (i.e., Default Dark/Default Light)

Suggested Correction

When switching modes, change the background of this element. (Perhaps inverse(1) or allowing for custom color setting when designing themes).

Screenshot with a more "expected" representation. Screenshot from 2024-01-14 15-49-22

btpf commented 10 months ago

Book theming when it comes to sections like this is tricky. Themes work by injecting catch-all CSS. But because some epubs create divs with arbitrary classnames, dom structure, and styling, there is a lot of surface area for these kinds of issues.

https://github.com/btpf/Alexandria/commit/493e7752c7ebbff80012184ac6a755bcc9c9985d In this commit, which will be in the next release, I now override all background-color and color properties with !important. It is destructive because in some books it can make it appear as if this section doesn't exist, but I think this gives a better general UX since it prevents cases like this.

Inversion wont work because I wouldn't know what elements to apply it to.

Also maybe a more 'involved' solution would be to loop through all elements and find the ones with a background-color explicitly set. But this isn't sure to work either because a book could have multiple differently colored sections.

So regarding theming, I'm open to any suggestions.

Also as just a general suggestion, If you have an outlier book which is not styling nicely, you can open it in calibre and edit it to be more compatible with Alexandria.