'dark mode' for blueksy browser

[awalter-bnl]

I am suggesting adding a 'dark mode' to the bluesky-browser, as they tend to be easier on the eyes. The plan is that this will be hot-swappable with 'light mode' via a drop-down menu item.

An example screenshot (of a different QT GUI) is included below to give an indication of what it will look like.

[mrakitin]

I like the idea, however I am not 100% sure it should be the default mode.

How much code do we need to change the color scheme? I guess it's the background setting and the text color, but may be wrong.

As a side note, I noticed that during a Jupyter workshop's tutorial on Jupyterlab extensions, the dark mode wasn't bright enough (I think it was VSCode IDE), so the presented had to switch the mode to the "light" one to make it better visible when projected to a screen.

[stuartcampbell]

You basically do something like (I think!)

darkmode_palette = QPalette()

darkmode_palette.setColor(QPalette.Window, QColor(53, 53, 53))
darkmode_palette.setColor(QPalette.WindowText, Qt.white)
darkmode_palette.setColor(QPalette.AlternateBase, QColor(53, 53, 53))
darkmode_palette.setColor(QPalette.Base, QColor(25, 25, 25))
darkmode_palette.setColor(QPalette.Text, Qt.white)
darkmode_palette.setColor(QPalette.ToolTipBase, Qt.white)
darkmode_palette.setColor(QPalette.ToolTipText, Qt.white)
darkmode_palette.setColor(QPalette.Button, QColor(53, 53, 53))
darkmode_palette.setColor(QPalette.ButtonText, Qt.white)
darkmode_palette.setColor(QPalette.BrightText, Qt.red)
darkmode_palette.setColor(QPalette.Link, QColor(42, 130, 218))
darkmode_palette.setColor(QPalette.Highlight, QColor(42, 130, 218))
darkmode_palette.setColor(QPalette.HighlightedText, Qt.black)
darkmode_palette.setColor(QPalette.Disabled, QPalette.Text, QtCore.Qt.darkGray)
darkmode_palette.setColor(QPalette.Disabled, QPalette.ButtonText, QtCore.Qt.darkGray)
darkmode_palette.setColor(QPalette.Disabled, QPalette.WindowText, Qt.darkGray)

qApp.setPalette(darkmode_palette)

qApp.setStyleSheet("QToolTip { color: #ffffff; background-color: #2a82da; border: 1px solid white; }")

[klauer]

You could just support stylesheets generically in qss files, as pydm does:

https://github.com/slaclab/pydm/blob/master/pydm/default_stylesheet.qss https://github.com/slaclab/pydm/blob/master/pydm/utilities/stylesheet.py

[awalter-bnl]

I like the idea, however I am not 100% sure it should be the default mode.

@mrakitin I was advocating for making a drop-down menu item to swap between light and dark mode. I also like @danielballan's suggestion (from slack) that this be a configurable item, so a user can decide to change the default in the config file.

I would need to look in more depth at style sheets, thanks for the references @klauer, but at least it appears that they can be applied at the widget level instead of the QApplication layer like the code from @stuartcampbell above (and how I was intending to approach it). So that may be a good positive for using them.

[danielballan]

A big +1 for following PyDM on this

[awalter-bnl]

OK, so after some investigations it appears there are 2 seperate ideas, QStylesheets and QPalettes.

QPalettes are what is shown above by @stuartcampbell, and can be applied to any QStylesheet.

QStylesheets control not just the colours but also the shapes, etc.. of the windows/buttons/... and are employed for the 'alert button' statuses etc in pydm.

some QStylesheets appear to tied to specific OS's. QStylesheets are also far more complicated that QPalettes as they control more items.

From the online reading I have done, in order to add a 'dark mode'/'light mode' option it appears that the preferred approach is to use QPalettes. From what I understand the main arguments to use QPalettes over QStylesheets in this context are: these can be applied to all QStylesheets, they are completely OS independent (as are some but not all QStylesheets) and are tailored to this specific problem (making light/dark visual modes). I am not 100% sure how much this matters in practice, but seems to be the internet consensus on the difference between the two.

I see three options, am looking for feedback on what people think is the best approach:

1. use the pydm QStylesheet approach and import a dark QStylesheet from say here
2. use the pydm QStylesheet approach and create out own dark QStylesheet
3. use a QPalette approach which works across styles, this would be essentially what @stuartcampbell suggested above.

I am interested in what others think, I am not a fan of 2 because, looking at the work in the link from 1, this appears to be very involved. I would lean toward 3 because it is the simplest solution and the one that appears to be the internet consensus but also think 1 is practical.

[klauer]

That QDarkStyleSheet ends up making the dark mode look quite nice, in my opinion. That said, I can see benefits to taking the easy/simple way out (option 3).

CCing @hhslepicka as he may have some input/ideas.

[hhslepicka]

While the stylesheet is a bit more complicated, it offers a more dynamic solution if compared to the QPalettes due to the need to change code to have modifications. There is like @awalter-bnl said the issue with OS specific styles (which affect mainly MacOS) and pushbutton but other than that all looks fine for me. PyDM also opted for QStylesheets to allow users to customize the look and feel without the need to change code and using custom states provided by widgets. If this is an application that you will ship to your customers them QPalettes will do you good but if they have the need to customize the appearence I would recommend that you go with Stylesheets.

[mrakitin]

I like the idea, however I am not 100% sure it should be the default mode.

@mrakitin I was advocating for making a drop-down menu item to swap between light and dark mode. I also like @danielballan's suggestion (from slack) that this be a configurable item, so a user can decide to change the default in the config file.

@awalter-bnl, thanks for the clarification. Our NSLS=II Slack conversation confused me that it's going to be default, even configurable with the drop-down menu :-)

I also support using whatever our lightsource peers have already discovered long time ago!

[mrakitin]

I like https://github.com/ColinDuquesnoy/QDarkStyleSheet, which @teddyrendahl posted, but now I can't see his comment for some reason..

[awalter-bnl]

Thanks @mrakitin, I don’t recall seeing @teddyrendahl’s comment on that, but I independently found it a linked to it in option 1 above ;-).

[mrakitin]

I saw it in an email notification from GH, which I am still receiving.

[teddyrendahl]

Sorry, I deleted it when I saw that @awalter-bnl had already posted it in a hyperlink above. Should have just edited it away :smile: