When on Dark Theme, invert the colour of math text.
As it is, we currently have black text on a dark background, which makes it almost impossible to see equations or variables, and which makes it necessary to switch to the light theme.
-
Franklin Yu commented
Fixed! Excellent.
-
sille commented
You are right! I only happen to have light rendered font because firefox uses the light font color of my system wide dark theme for some reason. Sorry for the confusion. The issue still persists.
-
SitiSchu commented
I just checked https://www.wikiwand.com/en/Schrödinger_equation#/Time-dependent_equation and there's still some dark on dark formulas
-
sille commented
I believe it has happened! I checked a few pages and all the math was light on dark background. Good job!
-
Adit Vishnu commented
I'd appreciate some response here from the Wikiwand team. Guys???
-
Tonyo commented
FYI:
- Stylish is taken down because it was spying on users, an alternative is Stylus (atleast for Chrome).
- Short tutorial for dummies: install Stylus browser addon -> go to wikiwand -> click addon icon and search for something like "create new style" -> copy and paste the latest CSS code from this thread, name it, save it -> enjoy (maybe you should define wikiwand.com as the only domain where the style is applied)
- You really should try this extension because they have a dark theme for every popular site and you can apply them with just a couple of clicks.
- Tampermonkey is another great tool but it is a bit more advanced, with it you can inject your own JavaScript code to the site and achieve the same effect. There are many userscripts for it ready to use on the internet, but be careful, some of them can be harmful ;)
- yeah, it is a shame that it is still not fixed -
Quaeria commented
I came here to suggest this exact thing.
A highly upvoted suggestion from two years ago that takes literally three lines of CSS to fix... and not even a response? Wow, so much for a community.
-
Elijah Perez commented
I'd give the other 7 of my votes to this as it's my only issue with Wikiwand. I don't know how to work the CSS workaround but I'd still like this fixed. My kingdom for white math on dark background!
-
Andy commented
So is this not going to get native support? I'm glad there are fixes but it's kinda ridiculous we need to install another extension for something as basic as being able to read articles on math (which is a massive reason I use wikipedia) with dark theme (which is a massive reason I use wikiwand).
-
sille commented
For some weird reason, inverting the math text on MS Edge (via Tampermonkey userscript) only works for most of the images, but not all of them. A noticeable amount will stay black no matter what. Even more confusing is that some elements will only invert when the browser window isn't maximised. I have seriously no idea what's going on with that.
-
David Schwartz commented
Tanyo's CSS works like a charm if you have the dark theme, but if for some reason you switch back to white, then you can't see the equations again. So I recommend this CSS:
body.dark .mwe-math-fallback-image-inline {
-webkit-filter: invert(1);
filter: invert(1);
} -
Tonyo commented
I found a better way with CSS:
.mwe-math-fallback-image-inline {
-webkit-filter: invert(1);
filter: invert(1);
}This CSS simply inverts the color of math formulas. Looks pretty good.
(Tonyo, not Tokyo :D you are welcome!) -
Shintaro Sasaki commented
Found something about the color of math formula... https://en.wikipedia.org/wiki/Help:Displaying_a_formula#Color -- Looks like the math image is generated at the Authoring time and not at the time of page display ... the "alt" which shows how the formula was rendered is just a remnant of what was used to render... I wonder if I could tell Wikipedia to render the element at the time of page display instead (which might cause Wikipedia to work harder...)
-
Shintaro Sasaki commented
Thank you, Tokyo for the CSS. But I am using a dark theme so I was hoping to change the Formula Text to white instead of changing the background white (but now I can at least see it better with your CSS). I tried flipping the color of text but it seems I need to tell the wikipedia math renderer to render the formula with white color (like Dante said) -- https://en.wikipedia.org/wiki/Wikipedia:Rendering_math -- I cannot figure out what to do there ^^; Do you (or anyone else) have some idea?
-
Tonyo commented
download Stylish and make a theme for wikiwand with these 3 lines:
.mwe-math-fallback-image-inline {
background-color: #FFF;
}#FFF is HEX code for white, you can change this
-
Anonymous commented
Dito!
-
Dante commented
Depending on your svg rendering engine, this should be an easy fix.