[2.1.55+] UI breakage due to force-applied styles

Apparently, Anki now comes with pre-defined styling, which is a terrible decision, and it should be reverted. Buttons, checkboxes, tables and input fields are affected the most. There’s now border radius around every element which is apparently impossible to disable.

It’s not the app’s job to style itself. Qt themes and GTK themes exist for that.

2.1.54:

2.1.55:

Here I have a QTableWidget with no styling applied to it, and a few rows added. On 2.1.55 it looks broken. The QPushButtons on the screenshots have some custom styling. They look as expected on 2.1.54 but on 2.1.55 they are forced into a completely different shape.

I tried to fix the issue with row heights by setting self.verticalHeader().setMinimumSectionSize() on the QTableWidget, but unfortunately even that doesn’t work until I set it really high (38px is the point where the text stops being clipped).

when setMinimumSectionSize = 30

screenshot-2022-12-21-01-42-22

when setMinimumSectionSize = 38

screenshot-2022-12-21-01-47-47

The QPushButtons don’t react to any attempts to shrink them. Even when I call

button.setFixedSize(QSize(32, 32))
button.setMaximumSize(QSize(32, 32))

They’re still 89 pixels wide.

Another example of the broken UI. If you press tab to select a button, it gets highlighted, but only partially.

screenshot-2022-12-21-03-47-56

The new scrollbar doesn’t even fit with the rest of the elements.

screenshot

I’ve also noticed that my desktop theme is not applied anymore. In the previous version you could use kvantum manager and set QT_QPA_PLATFORMTHEME=qt6ct but not anymore.

2.1.55 uses custom Qt stylesheets to improve the look of the Fusion theme on Windows and Linux systems.

I apologize if this has led to frustration in your particular use case. I reckon you’re developing add-ons with custom widgets?

Instead of reverting the stylesheets (which are months worth of work), I suggest we add a command for add-on developers to disable the custom stylesheets on their windows if they desire. Or we can go further and only apply the stylesheets to the native windows or even narrow it down to particular widgets. After all, I don’t know what people might want to do with the native layout.

I’m sure we can come up with a solution that satisfies everyone.

2 Likes

Is it possible to wrap a certain function that designs the widgets?

Thanks for noticing this thread. Probably my biggest concern is that if I release an add-on with any Qwidgets in it, they might be unusable on other systems even if they use default stylesheets. It appears that applying custom CSS to widgets can’t guarantee to fix them, like with the Qtablewidget example I posted.

2.1.55 uses custom Qt stylesheets to improve the look of the Fusion theme on Windows and Linux systems.

If the user has applied a GTK or Qt theme, I would assume that they wouldn’t like Anki to ignore it. Qbittorrent is an example of a Qt6 program that honors system settings despite having some custom widgets. Maybe it is wise to check if the user has no theme set up, and only then inject custom stylesheets. The new forced theme Anki ships with is rather controversial, some users I talked to dislike it. Also, it doesn’t appear to be polished and consistent.

Instead of reverting the stylesheets (which are months worth of work), I suggest we add a command for add-on developers to disable the custom stylesheets on their windows if they desire.

Rather all users would benefit from an option to respect their system settings or at least an option to disable custom stylesheets. However, I expect that most users use the defaults, and then they would run into the problem with unusable add-ons I mentioned before. The solution is to improve the default theme so that it doesn’t cause breakage.

I guess someone who designs addons could subscribe to style_did_init and simply remove all styles (return an empty string back).

aqt/theme.py:

# allow addons to modify the styling
buf = gui_hooks.style_did_init(buf)

Doing so is the only way to ensure consistent look of an addon (assuming other addons don’t subscribe to the same hook).

That would have an effect on the whole app, though. Altough it would fix the add-on, it might dissatisfy users who prefer the custom Qt stylesheets over what they had on 2.1.54 and below. I’d rather invest more time to create a less destructive solution to your problem after Christmas.

Of course you’re free to do whatever you want in your add-on in the meantime, but maybe add a disclaimer that native styles need to be removed to make your widgets work.

1 Like

I’m a bit torn on that. If only a third of the userbase (macOS) has a good native theme and all the other ones look like Windows 2000, I’d rather have a unified style and full control over the look of each widget. As someone who works on web applications most of the time, I’m used to having a single design for all platforms. The stylesheets are meant to bridge the gap until we translated all screens to web components, at which point most of the UI will look the same on all platforms anyway.

But I see your point and I’m open to change my mind if there are good alternatives to make Anki look better on Windows and Linux.

2 Likes

That would have an effect on the whole app, though.

Yep, it’s kind of a quickfix. An addon could check Anki’s version and only apply it when it is equal to 2.1.55. And it doesn’t solve the other problems, mainly that Anki doesn’t obey GTK/Qt theme set by the user.

The ugliest parts of the interface are implemented using webview and aren’t that easy to fix. Ideally, webview should only be used by the reviewer (and previewer) to show cards. But today the entire browser window, the main screen, deck settings use webview. Who came up with this idea? Qbittorrent relies on standard widgets for the entire UI.

This is how qBittorrent looks on my system:

It is one of the only apps I cannot use because it’s trying so hard to match my system theme, but fails miserably at it. I wouldn’t use it as an example for good UI design choices by any stretch of the imagination.

Take VSCode or other major Electron apps. They are guaranteed to look the same everywhere and consist fully of webviews.

2 Likes

If only a third of the userbase (macOS) has a good native theme and all the other ones look like Windows 2000

It’s really a question of taste rather than anything else. Today macOS has a very ugly interface. Maybe some people prefer Windows 2000’s look. My current theme is set to Adapta.

There are thousands GTK and Qt themes. Some look modern, some not. What is actually important is for Anki to style itself according to the set system theme. Some GTK themes copy macOS, but many do not.

I’m guessing Windows doesn’t have a way for the user to change how windows look. In this case some default styles could be applied to Anki on Windows, as long as it is safe. But most GNU/Linux distros come with a set theme (Ubuntu tends to paint windows in orange and gray colors, for example).

As someone who works on web applications most of the time, I’m used to having a single design for all platforms.

Then it won’t look consistent with the rest of the system. E.g, if I open Thunar and Anki side by side, they will look like apps from two different operating systems, which is not pretty.

On a side note, Anki is not a web application (and shouldn’t be turned into one). Web technologies exist to work in browsers. Whenever people try to use the web stack to make desktop apps, it leads to terrible outcomes. For example, most Electron-based apps are unusable on systems with less than 64GiB of RAM :sweat_smile: and tend to be noticeably slower than native GTK and Qt apps.

translated all screens to web components

Don’t kill it. There should be a move in the opposite direction, really.

Like I said in the beginning, I’m sure we can find a solution that makes everyone happy.

We could for example let Linux users choose whether they want their GTK/Qt theme or the native Anki theme. I don’t have concrete numbers, but I got a hunch that such cases are the minority, because most of the userbase consists of Mac and Windows users who neither have the choice nor the desire to change their system theme.

Regarding the transition to web components, I need to refer you to @dae and @hengiesel. I can only say that I’m looking forward to a time when Qt is a thing of the past - but the trajectory Anki is heading in isn’t mine to decide.

2 Likes

This is how qBittorrent looks on my system

Exactly. It looks like you ask it to look. Your example is rather unfortunate, and no one would like that, but at the same time you can fix it in a matter of seconds by restarting with a different theme.

E.g., when I run:

QT_QPA_PLATFORMTHEME="" qbittorrent

Then it uses the default theme instead of the system theme.

Thanks for that tip. Even though it’s as easy as that, we do not want to risk something like that happening to users who got no idea what’s going on. It should be an option to apply the GTK theme, not the default.

Edit: I know it’s frustrating when you’re on a OS that offers such a high level of freedom and customizability and other operating systems seem to be holding you back. I feel that everytime I need to add a some Qt (or CSS) special casing for macOS. But in the end, we need to go the way that leads to the least amount of issues for our users.

2 Likes

We could for example let Linux users choose whether they want their GTK/Qt theme or the native Anki theme.

That’s a good idea. Though I doubt it will truly have a consistent look considering that some major parts of the UI has been translated to webview.

but I got a hunch that such cases are the minority

Every popular GNU/Linux distro comes with its own brand/theme. Additionally, GTK requires you to install at least one theme (it depends on adwaita). So virtually all GNU/Linux desktops follow some theme.

the userbase consists of Mac and Windows users

As far as I know, MacOS applies a uniform look across all applications without developers having to do anything. So you’re left with Windows only. I think it’s okay to ship a default theme for Windows users, but currently they don’t get a working theme. You get the artifacts I posted in the beginning of the thread.

Regarding the transition to web components

This is a no-brainer. The UI can be made with Qt (QML maybe?), and the use of Webview can be limited to the Reviewer. This way a custom theme can still be applied if needed, but the codebase will be much smaller, and it will be easier to maintain.

Currently Windows users can’t disable the new look either, right? Maybe they would like to, especially if Windows gets a different UI.