Dark Color Palette - Scrollbar slider CSS

[Comfy.n]

In trying out the Dark Color Palette, I noticed two elements that have low contrast display, in my setting:



Is there some CSS hack I could apply to them? It seems to me both the search dropdown and the scrollbar slider would be more distinguished if they had a lighter color...

This is what I would like to customise:
https://developer.mozilla.org/en-US/...bkit-scrollbar
::-webkit-scrollbar-thumb — the draggable scrolling handle.

[BetterRed]

I suspect that's a Qt on Windows issue, Sigil is the same in dark mode. Not sure if its the same on other platforms.

MS Office had the same problem with Dark, which they fixed; so maybe it's a 'generic' issue.

BR

[kovidgoyal]

It is a Qt limitation.

[Comfy.n]

Bummer :\

[Comfy.n]

What about this:
https://forum.qt.io/topic/59351/qscr...ine-when-moved
https://stackoverflow.com/questions/...t-doesnt-apply

I recall being able to customise some QT or maybe GTK based program on Windows... though only vaguely.

[Comfy.n]

I just saw there's some environment variable called QT_STYLE_OVERRIDE...

You can also set the style for all Qt applications by setting the QT_STYLE_OVERRIDE environment variable.



In https://doc.qt.io/qt-6/qapplication.html

[kovidgoyal]

stylesheets tend to break things, unless used in a very limited way. you are welcome to play with them if you like, you could probably get something hackish that works for you

[Comfy.n]

Originally Posted by kovidgoyal

stylesheets tend to break things, unless used in a very limited way. you are welcome to play with them if you like, you could probably get something hackish that works for you

thanks, I wonder how to play with them in Windows.. (without having to fiddle with calibre main code or build from source hopefully, as I have little knowledge/resources)

I recall vaguely some GTK editor that was very user-friendly as it worked mostly like a wysiwyg editor... But it seems there's no similar Qt alternative.

BTW, in Goldendict, for instance, there's a file called qt-style.css. I'm able to style most objects colors in it, except that ::-webkit-scrollbar-thumb thing...

Wondering too how that QT_STYLE_OVERRIDE would be useful...

[kovidgoyal]

You do need to run calibre from source, but doing so does nto involve any building. https://manual.calibre-ebook.com/develop.html

Look in gui2/__init__.py

where QApplication is constructed and pass it the path to stylesheet with -stylesheet.

[Comfy.n]

Originally Posted by kovidgoyal

You do need to run calibre from source, but doing so does nto involve any building. https://manual.calibre-ebook.com/develop.html

Look in gui2/__init__.py

where QApplication is constructed and pass it the path to stylesheet with -stylesheet.

WHEEEEEEEEEEEEEEEEEE
feels awesome to run Calibre from source!
I'm feeling devilish with my new calibre-dev shortcut, ha.

already can see the new "adjust width" item in context menu:


But still can't barely see that darn scrollbar handle, as I'll have to figure out that pass it the path to stylesheet with -stylesheet bit.

[Comfy.n]

Originally Posted by kovidgoyal

Look in gui2/__init__.py

where QApplication is constructed and pass it the path to stylesheet with -stylesheet.

Well.. I see I need to use this:
https://doc.qt.io/qt-6/qapplication....tyleSheet-prop

Now how/where would I insert the path to a stylesheet in gui2/__init__.py?
In trying to guess, I found this in line 1090:

class Application(QApplication):

    shutdown_signal_received = pyqtSignal()
    palette_changed = pyqtSignal()

    def __init__(self, args=(), force_calibre_style=False, override_program_name=None, headless=False, color_prefs=gprefs, windows_app_uid=None):

then I tried this:

[...]color_prefs=gprefs, windows_app_uid=None, stylesheet=c:\x.qss):

Program wouldn't load... Then tried running "calibre.exe -stylesheet c:\x.qss", no good either

Also, looking in https://doc.qt.io/qt-6/stylesheet-syntax.html I'm not sure if the file should have .qss or .css extension. First thing I'd like to test is using a wildcard as in:

* -webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

(reference: https://www.digitalocean.com/communi...css-scrollbars

[kovidgoyal]

Just before the call to QApplication.__init__(self, args) you do

args += ['-stylesheet', 'path/to/stylesheet.qss']

[Comfy.n]

it seems I'm getting warmer!!

[Comfy.n]

Welp. I managed to make the scrollbar handle more distinctive, but my test.qss does work only when setting Calibre User interface style to System Default, in Look and Feel preferences.



That white on green handle was achieved using this qss styling. (corresponding attached file: test1.qss)



Then, after seeing this thread, I merged the previous scrollbar styling with the custom dark theme mentioned.
That's almost exactly what I needed to achieve, but some elements in this custom dark theme, like padding and border sizes don't fit Calibre UI as perfectly as the built-in dark color palette. (corresponding attached file: test.qss)



If I set Calibre Interface settings in Look and feel to "calibre style", the external qss gets overriden. So I end up in the same situation as before, as seen above. :\

Notes on what I had to to, running Calibre from source:

- location of qss file: one level above the /src directory
- code placement in gui2/__init__.py:

    def __init__(self, args=(), force_calibre_style=False, override_program_name=None, headless=False, color_prefs=gprefs, windows_app_uid=None):
        if not args:
            args = sys.argv[:1]
        args += ['-stylesheet', 'test.qss']

I also looked in palette.py to see if I could make Calibre not override my qss file when using the built-in dark theme, so that I could get the result seen in the second pic but wasn't able to figure that out.

[Comfy.n]

On another note, there's an undesirable styling of the details scrollbar too, when using that test.qss:



it would be nice to have that one styled independently...