UI not respecting user/OS color theme

[Boruch-Baum]

The linux appimage for kiwix 2.0-rc4 does not respect the user's choice of theme (eg. gtk/qt)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

[kelson42]

I confirm that on Ubuntu 20.04. Just changing the the default color theme has no impact on Kiwix, it should.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

[asashnov]

Seems we need to include some Qt style plugin into our AppImage:

https://wiki.archlinux.org/index.php/Uniform_look_for_Qt_and_GTK_applications#QGtkStyle

[kelson42]

@asashnov I don't believe this is a problem (only) with appimage. This is a general problem (with self-compiled, deb packages, flatak), right?

[wengxt]

kiwix-desktop/src/kiwixapp.cpp

Line 70 in cb5cfdc

setStyle(QStyleFactory::create("Windows"));

This is the part of the code that causing problem on Linux.

1. It forces the "Windows" qt widget style on Linux, while normally this is configured by desktop
2. The next few lines set an custom stylesheet, this overrides the widget background color, but it does not set the text color.
   

   kiwix-desktop/resources/css/style.css

   Line 2 in cb5cfdc

   background-color: #EAECF0;

   
   here's my suggestion:
3. only set widget style for windows system.
4. As for color:
   • Only set style related to color on windows
   • Or set the widget text color in stylesheet to totally override system color (but I guess people still going to complain like this issue)
   • Or have an option: "Use system color", if disabled, apply the color related css.

Here's a screenshot under KDE's Breeze dark after I tried to remove the setStyle and all color related settings in css.

[wengxt]

Another option is only set stylesheet against kiwix's main window (still if you want to use the same css, the text color need to be set otherwise it still use the system text color which may conflict with the background), instead of applying to QApplication.

[kelson42]

@wengxt Thank you for your in-depth analysis.

The ticket does not really details how Kiwix is expected to work:

• First it should have a night/day theme depending how the OS is configured. Not sure this option exists on both windows/linux. Not sure either if it fundamentaly differs from have a custom theme.
• We have a UI theme for Kiwix, as far as possible it should be used.
• If the user as a custom theme (I think in particular to people have extra large fonts because being visually impaired), then it should be as much as possible respected.

It might be possible that, to some extend, these requirements are conflicting.

What I fear a bit, if we are fully using the user theme, is that we get an ugly rendering (I know current rendering is not always convincing either, but at least we have a plan), in particular per default (for people not having customized there desktop).

As far as I understand the problem can not be only the text color, this all works together (pictures, text size/font/color, background colors). So we should apply the same approach for all these properties right?

Would that be a good approach to:

• Have a builtin day/dark mode and apply accordingly?
• Have an option to activate/deactivate our theme (and in place fully use the default Desktop theme)?

[asashnov]

It could be a three-state setting:

• Use Kiwix white theme
• Use Kiwix dark theme
• Use system default theme

[wengxt]

From readability point of view, if you apply custom background, then you should also apply the custom color setting to text, this is a bug and should be fixed. Easiest way is to set a color for the text.

As for whether to use "system" or "kiwix" custom theme, I can only say that there are many linux users who prefer to use their own theme for the whole system level consistency, while as for windows it is not that possible to have the same level of customization on linux, so I guess window user does not care that too much.

For example:
Chrome on linux has its "blue frame" theme, but it also provides an option: "using system color and title".
Another counter example, telegram-desktop only option for its own themes (dark / light).

So it is really up to developer to decide what works best for themselves.

As for the problem that exposed in my screenshot: the icon is not very readable, I would suggest if you could try to use the QIcon::fromTheme and use system icon (E.g. "the plus sign icon with QIcon::fromTheme("list-add") instead. On KDE the symbolic color from theme could be automatically changed color based on system theme. A guide for using fromTheme to support on non-Linux platform: https://openapplibrary.org/dev-tutorials/qt-icon-themes

[kelson42]

From readability point of view, if you apply custom background, then you should also apply the custom color setting to text, this is a bug and should be fixed. Easiest way is to set a color for the text.

Agree, I have open a ticket for that, see #592

[kelson42]

As for the problem that exposed in my screenshot: the icon is not very readable, I would suggest if you could try to use the QIcon::fromTheme and use system icon (E.g. "the plus sign icon with QIcon::fromTheme("list-add") instead. On KDE the symbolic color from theme could be automatically changed color based on system theme. A guide for using fromTheme to support on non-Linux platform: https://openapplibrary.org/dev-tutorials/qt-icon-themes

Thank you for the suggestion, but this is only one small part of the problem. All the other icons have exactly the same problem. We should find a solution working for all of them.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

[Jonta]

@kelson42 Should this remain open? :)

[kelson42]

@Jonta Yes, we probably need to develop a night mode... but not sure we should not better open another ticket for that.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

[Jonta]

• "night" gives 0 results in GitHub's search for code
• "dark" only gives 1, which doesn't seem relevant enough
• Therefore: I think this should remain open

[Jaifroid]

Just to say that it's very easy to implement an "inversion" dark mode as a simple CSS file inserted in (i.e. linked form) the HTML of any article. Just add inversion CSS rules:

html,
img,
video {
    filter: invert(1) hue-rotate(180deg);
}

There are some subtleties that can be added for known sites such as Wikipedia. See https://github.com/kiwix/kiwix-js/blob/master/www/css/kiwixJS_mwInvert.css for how we did it in Kiwix JS.

[Jaifroid]

PS The reason I posted this now is because on the Reddit feature request there is mention of Dark Mode, though I think that user wants it for Kiwix Serve. The same principle would apply: need to inject the CSS. This could/should be part of the JS API in the ZIM.

[ghost]

+1 for request to use my system theme.

[Jaifroid]

do you really want users to switch to the browser-extension?

He, he, why not use both?! (Full disclosure, I developed the dark theme for the browser extension versions...)

[SuperDuperDeou]

I think it should work like this (I'm talking for the UI, not the rendered page):

Windows

There should be 3 configuration options:

• Use Light theme
• Use Dark theme
• Use system Dark Mode setting

The last one chooses between the Light and Dark theme according to the system settings and should be the default.

GNU/LInux

There should be 4 configuration options:

• Use Kiwix Light theme
• Use Kiwix Dark theme
• Use system Dark Mode setting
• Use system theme

The first 3 options work exactly the same as on Windows.
The last one uses the system's QT theme, allowing Kiwix's UI to be consistent with the rest of the desktop. This should be the default.

[Jaifroid]

We found (over at Kiwix JS) that there is really very little use for a dark-themed UI if the content is not also dark-themed. Obviously, it's a start to provide dark UI, but it's very garish (and a bit unsettling) to have dark skin, and then the ZIM contents glaring white.

[ghost]

We found (over at Kiwix JS) that there is really very little use for a dark-themed UI if the content is not also dark-themed. Obviously, it's a start to provide dark UI, but it's very garish (and a bit unsettling) to have dark skin, and then the ZIM contents glaring white.

If we could get Kiwix to use a default css file (similar to Mozilla's userContent.css) that could alleviate the problem.

[dzwdev]

is there any solution for this?
i often use offline Wikipedia in kiwix and with the light theme i get hurt in my eyes
i hope that there is a solution for that so as i can use it in dark mode

[Jaifroid]

I think there's some confusion over whether this issue is about the Kiwix Desktop UI only, or also about the content displayed in the webview. Those are clearly two somewhat different issues, even though developing a dark theme for one doesn't make sense without developing a dark theme for the other.

Personally, I would say that the most urgent thing is actually the contents. The UI should be easy. I think the main line of thought for the contents is that there should be an API in each scraper (and especially in mwOffliner, where some work was started). While that would be the "ideal" solution, it would take so long to implement an API in each scraper, that I think it's unfortunately somewhat unrealistic. The only practical option (especially with upcoming support of Zimit 2.0 files, for which there is unlikely to be a standardized dark-theme API), is to provide support for dark-themed content in each reader. This is the solution adopted in Kiwix JS and Kiwix PWA.

FWIW, here is my experience wrt contents. There are two main options:

• either use a simple inversion CSS like the one used in Kiwix JS (which ensures that images and video are re-inverted);
• or else use a plugin like darkreader.js (offered as an experimental option in the PWA) - this is open source and MIT licensed.

I found darkreader was needed especially for Zimit-based ZIMs, where simple inversion often produces poor results. Darkreader was surprisingly easy to configure and with default settings supports pretty much all ZIMs (including Zimit). We have an open issue to backport it to the Browser Extension (which currently only offers inversion, since up to now the darkreader feature was considered experimental).

[dzwdev]

kiwix-desktop/src/kiwixapp.cpp

Line 70 in cb5cfdc

setStyle(QStyleFactory::create("Windows"));

This is the part of the code that causing problem on Linux.

1. It forces the "Windows" qt widget style on Linux, while normally this is configured by desktop

2. The next few lines set an custom stylesheet, this overrides the widget background color, but it does not set the text color.
   https://github.com/kiwix/kiwix-desktop/blob/cb5cfdceaf7840c456de67814e7395a7dd6c75a5/resources/css/style.css#L2
   
   here's my suggestion:

3. only set widget style for windows system.

4. As for color:
   
   * Only set style related to color on windows
   * Or set the widget text color in stylesheet to totally override system color (but I guess people still going to complain like this issue)
   * Or have an option: "Use system color", if disabled, apply the color related css.

Here's a screenshot under KDE's Breeze dark after I tried to remove the setStyle and all color related settings in css.

i removed this line: setStyleSheet(parseStyleFromFile(":/css/style.css") from this file: kiwixapp.cpp and now the main windows is dark. thank you.
but the content is still in white theme, so is there any other edit i can do to make the content in dark mode?

[Boruch-Baum]

Thanks for looking into the code for this, dzwdev. Developers, I hope that dzwdev's observation can be useful in nudging this issue along.

…

On 2023-12-03 23:25, dzwdev wrote: [1]https://github.com/kiwix/kiwix-desktop/blob/cb5cfdceaf7840c456de6 7814e7395a7dd6c75a5/src/kiwixapp.cpp#L70 This is the part of the code that causing problem on Linux. 1. It forces the "Windows" qt widget style on Linux, while normally this is conf igured by desktop 2. The next few lines set an custom stylesheet, this overrides the widget backgr ound color, but it does not set the text color. https://github.com/kiwix/kiwix-desktop/blob/cb5cfdceaf7840c456de67814e7395a7d d6c75a5/resources/css/style.css#L2 here's my suggestion: 3. only set widget style for windows system. 4. As for color: * Only set style related to color on windows * Or set the widget text color in stylesheet to totally override system color (but I guess people still going to complain like this issue) * Or have an option: "Use system color", if disabled, apply the color related css. Here's a screenshot under KDE's Breeze dark after I tried to remove the setStyle and all color related settings in css. [2]图片 i removed this line: setStyleSheet(parseStyleFromFile(":/css/style.css") from this file: kiwixapp.cpp and now the main windows is dark. thank you. but the content is still in white theme, so is there any other edit i can do to make the content in dark mode? — Reply to this email directly, [3]view it on GitHub, or [4]unsubscribe. You are receiving this because you authored the thread. Message ID: ***@***.***> References 1. https://github.com/kiwix/kiwix-desktop/blob/cb5cfdceaf7840c456de67814e7395a7dd6c75a5/src/kiwixapp.cpp#L70 2. https://user-images.githubusercontent.com/259684/106376095-b4f8d900-6346-11eb-82c6-5def500a6bec.png 3. #320 (comment) 4. https://github.com/notifications/unsubscribe-auth/AAOE3KG6BLT4YYJUXDX2E6LYHV3GHAVCNFSM4JTYVV4KU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBTG44TONRUHE3A

-- hkp://keys.gnupg.net CA45 09B5 5351 7C11 A9D1 7286 0036 9E45 1595 8BC0

[obj-obj]

Wikipedia itself also has dark mode, maybe you can yoink the css (at least for Wikipedia pages)

[Giger22]

Any update?

[kelson42]

No, and this is not an easy topic. There is no plan to implement is in a near future although this is clear this is something we will do at some point.

[slrgt]

I would also love a dark mode

[nPHYN1T3]

Pretty useless without dark mode or even follow the system Qt settings. It is brutal on the eyes never mind potential accessibility issues. As I used to say about white UI. If you want to stare at a lightbulb all day, go buy a lamp.