kiwix-serve dark ui theme?

[TutanotaDeletedMyEmail]

I noticed that Kiwix for firefox has a dark theme, but prefer the kiwix-serve method of interacting with kiwix. I was wondering if there was an easy way to modify the css that kiwix-serve uses or if an option for a dark theme could be implemented. Thank you.

[kelson42]

There is no easy way to change the css.

[mayur-samrutwar]

There is no easy way to change the CSS.

If I want to change the CSS code for the home page i.e., "https://library.kiwix.org", from where I can do it? I really wanted to work on this idea to create a dark theme toggler.

[kelson42]

I'm not in favour of implementing this feature now, this is complex and we are not ready I believe.

[Lucent]

I'm interested in paying a bounty to have this implemented.

[juuz0]

@kelson42 Do you have different plans on this issue now? A use of css variables can maybe get this to work while being not so complex? Like here:
https://opensource.com/article/21/10/dark-themes-websites
https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8

[kelson42]

@juuz0 This is a pretty complex topic IMO as part of the problem has to be fixed in ZIM file themselves.

[Lucent]

My makeshift solution is to edit mwoffliner/res/inserted_style.css and add the following rules:

#content, #mw-mf-page-center, .hatnote { background-color: unset; }
body { color: unset !important; background: unset !important; }
a { color: revert !important; }
.sidebar { background: #770 !important; }

I then set document.style.colorScheme and let the dark browser theme show through. It's not perfect, but could be a starting point.

[kelson42]

@Lucent I'm a bit short of time right know to dive in (again) in the topic. But I agree, if such a small patch can help to improve the situation, even temporarly, then we should consider it. Would you be able to amke a PR for openzim/mwoffliner?

[Lucent]

I know very little of the underlying structure of kiwix vs. mwoffliner--which provides the styles and which just overrides? I know some colors are embedded in the wiki itself, for example the theme colors of chemical elements pages, and those are not overriden by the Wikipedia app's dark mode.

I think the best place to attack this would be find what is specifying default colors and scrubbing that out rather than later overriding. There's no need to set backgrounds as white and text as black, or set link colors at all, yet those are repeated everywhere.