Fix invisible scroll bar on light themes - #4845
Conversation
There was a problem hiding this comment.
Pull request overview
This PR addresses a UI usability issue where the scrollbar becomes effectively invisible when using the Book Reader’s light (“White” and “Paper”) themes, by introducing explicit theme-level scrollbar color variables and applying them in the reader container styling.
Changes:
- Add
--primary-color-scrollbarand--default-state-scrollbarCSS variables to the White theme. - Add
--primary-color-scrollbarand--default-state-scrollbarCSS variables to the Paper theme. - Apply Firefox
scrollbar-colorstyling for the Book Reader scroll container using the scrollbar CSS variables.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| UI/Web/src/app/book-reader/_models/book-white-theme.ts | Defines scrollbar CSS variables for the White book-reader theme to ensure contrast on light backgrounds. |
| UI/Web/src/app/book-reader/_models/book-paper-theme.ts | Defines scrollbar CSS variables for the Paper book-reader theme to ensure contrast on light backgrounds. |
| UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.scss | Applies scrollbar-color (Firefox) using the theme-provided variables so scrollbars remain visible. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| .reader-container { | ||
| scrollbar-color: var(--primary-color-scrollbar) transparent; | ||
|
|
There was a problem hiding this comment.
As far as I know, there is no way to specify a separate hover color for scrollbars on Firefox, so I chose to use the primary color there as a compromise. Of course, this leads to a small inconsistency, but I think most Firefox-browsers make the scrollbar thin when not hovered, instead of having a separate hover color. Therefore, I think this is the best option
|
I need to do some testing with this. I recall one of our users explicitly wanting invisible scrollbars for his eink on white mode. I can't recall if a user theme will allow that or not. |
Fixed