Visual bugs with Dark theme in Molecule / Layers lists

ghutchis · February 10, 2025, 10:29pm

I’m unsure if this is a Mac bug, or more systematic…

A student uses Dark theme on a Mac. While most of the text is correctly white-text on black background, the molecule / filename list is not…

And also, the icons in the Layer panel are dark-on-dark:

So I guess the first question is whether the black-on-black text in the molecule lit happens on other systems?

Secondly, it would be great to have alternatives for light / dark versions (in SVG?) of the layer icons, e.g.

I know there are some good open source icon sets - I tried some image search and couldn’t find the original versions.

lock
lock open
“…” dots
eye icon
black X to close a layer
(maybe also the red X for “close” in the molecule list?)

matterhorn103 · February 10, 2025, 11:09pm

Yes, the same occurs on Linux:

The icons in the menus and the “file” toolbar are sourced from the OS theme and – on Linux with KDE at least – change to match my icon theme, giving it a native look and feel. For example, on my system:

Looking at avogadroapp/avogadro/mainwindow.cpp it looks like this is achieved by using QIcon::fromTheme("document-save-as") etc.

Can we do the same for the icons in those panes?

ghutchis · February 10, 2025, 11:33pm

Maybe, but I’d guess on Mac and Windows, we still need the “fallback” icons. Looks like someone posted the list for Linux:

gist.github.com

https://gist.github.com/peteristhegreat/c0ca6e1a57e5d4b9cd0bb1d7b3be1d6a

freedesktop.org_icons_with_descriptions.txt

# https://specifications.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html, aggregate list from each section
address-book-new	The icon used for the action to create a new address book.
application-exit	The icon used for exiting an application. Typically this is seen in the application's menus as File->Quit.
appointment-new	The icon used for the action to create a new appointment in a calendaring application.
call-start	The icon used for initiating or accepting a call. Should be similar to the standard cellular call pickup icon, a green handset with ear and mouth pieces facing upward.
call-stop	The icon used for stopping a current call. Should be similar to the standard cellular call hangup icon, a red handset with ear and mouth pieces facing downward.
contact-new	The icon used for the action to create a new contact in an address book application.
document-new	The icon used for the action to create a new document.
document-open	The icon used for the action to open a document.
document-open-recent	The icon used for the action to open a document that was recently opened.

This file has been truncated. show original

icon_list.txt

# List of icons in gnome theme, sample found by looking in /usr/share/icons/gnome/16x16, ignoring symlinks
# find /usr/share/icons/gnome/16x16/ -mindepth 2 ! -type l
./apps/im-yahoo.png
./apps/window.png
./apps/help-browser.png
./apps/utilities-system-monitor.png
./apps/preferences-desktop-theme.png
./apps/im-jabber.png
./apps/user-info.png
./apps/preferences-desktop-font.png

This file has been truncated. show original

qt_standard_icons.txt

# from http://doc.qt.io/qt-5/qstyle.html#StandardPixmap-enum
QStyle::SP_TitleBarMinButton	1	Minimize button on title bars (e.g., in QMdiSubWindow).
QStyle::SP_TitleBarMenuButton	0	Menu button on a title bar.
QStyle::SP_TitleBarMaxButton	2	Maximize button on title bars.
QStyle::SP_TitleBarCloseButton	3	Close button on title bars.
QStyle::SP_TitleBarNormalButton	4	Normal (restore) button on title bars.
QStyle::SP_TitleBarShadeButton	5	Shade button on title bars.
QStyle::SP_TitleBarUnshadeButton	6	Unshade button on title bars.
QStyle::SP_TitleBarContextHelpButton	7	The Context help button on title bars.
QStyle::SP_MessageBoxInformation	9	The "information" icon.

This file has been truncated. show original

So we probably can re-use Close, but I think we need something for other icons, e.g.

Or Feather Icons

matterhorn103 · February 10, 2025, 11:57pm

list-add (a plus) and list-remove (a cross) should be definitely fine then since they’re in the Qt list.

The KDE default Breeze icon theme also has, for example, things like:

view-visible, aliased to visibility (an eye)
view-more or overflow-menu (three dots)
lock

As you mentioned there’s font-awesome and feather; some other icon sets that come to my mind or I have bookmarked in the past:

https://pictogrammers.com/ is where Material Design Icons live nowadays
https://phosphoricons.com/ are very nice
Breeze (from KDE Plasma) could be a good open-source source of icons if you wanted
Likewise the GNOME icons of course
There are also some very nice third-party icon themes for KDE, I particularly like using this guy’s themes

If you wanted to use a set like that, I think it’d be best to then use the same theme for all the icons in the interface, as it looks quite jarring if there’s a mixture of visual styles (and we already have at least two sets since we have our own tool icons).

ghutchis · February 11, 2025, 4:29pm

Okay, I’m starting a pull request:

github.com/OpenChemistry/avogadrolibs

Make sure to use default text and document-close icons

master ← ghutchis:fix-dark-mode-bugs

opened 03:52PM - 11 Feb 25 UTC

ghutchis

+12 -6

Developer Certificate of Origin Version 1.1 Copyright (C) 2004, 2006 The Lin…ux Foundation and its contributors. 1 Letterman Drive Suite D4700 San Francisco, CA, 94129 Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. Developer's Certificate of Origin 1.1 By making a contribution to this project, I certify that: (a) The contribution was created in whole or in part by me and I have the right to submit it under the open source license indicated in the file; or (b) The contribution is based upon previous work that, to the best of my knowledge, is covered under an appropriate open source license and I have the right under that license to submit that work with modifications, whether created in whole or in part by me, under the same open source license (unless I am permitted to submit under a different license), as indicated in the file; or (c) The contribution was provided directly to me by some other person who certified (a), (b) or (c) and I have not modified it. (d) I understand and agree that this project and the contribution are public and that a record of the contribution (including all personal information I submit with it, including my sign-off) is maintained indefinitely and may be redistributed consistent with this project or the open source license(s) involved.

My feeling is that as much as possible, we should use the system theme icons. Getting everything from one source is going to be tricky unless we hire someone to do the whole set.

BTW, it seems like your Layer panel has weird column widths. The first column should be the widest.

matterhorn103 · February 11, 2025, 10:57pm

Yes, sure, but my point is that it would still be better to use two sources than three.

The tool icons are cohesive and self-contained in one place, so while it’s not ideal that they are different to everything else, I’m not as worried about them not fitting in with a uniform design.

All the other non-tool icons used in the interface really ought to have the same visual style, though. Consistency is very important in good UI/UX design.

I’d love it if Avogadro used my system icon theme for the icons, but that should only happen if all icons can be sourced from the system theme, otherwise it’s jarring.

matterhorn103 · February 11, 2025, 10:58pm

Yes, I know. That’s just how it looks by default, though, I haven’t changed anything.

ghutchis · February 11, 2025, 11:23pm

With that pull request, it should now use system icons for everything.

matterhorn103 · February 11, 2025, 11:40pm

But your previous point was that not all those icons are universally available from the system theme?

ghutchis · February 12, 2025, 12:31am

It looks pretty complete based on your comments. The pull request will try to pull from the system theme (e.g., visibility or lock) and go to a fallback otherwise.

Take a look if you like. I think it should be set. Certainly it fixes up the text colors.

brockdyer03 · February 14, 2025, 3:32pm

It might be worth mentioning that currently Av2 doesn’t have dark mode on Windows right now. I believe @matterhorn103 indicated that the Qt6 upgrade will fix that, but for now it’s light mode all the way.

ghutchis · February 15, 2025, 3:49am

Okay, I’ll see what I can do to get Windows packages with Qt6. Somehow 1.100 release build left out Open Babel, so it can’t be worse…