kiwix/kiwix-tools

kiwix-serve dark ui theme?

Opened this issue · 9 comments

TutanotaDeletedMyEmail commented

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 commented

There is no easy way to change the css.

  • 😕2
mayur-samrutwar commented

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 commented

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

  • 👍1
  • 😕1
Lucent commented

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

  • 👍2
juuz0 commented

@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 commented

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

  • 👍1
  • 😕1
Lucent commented

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 commented

@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 commented

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.