I suggest you...

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.

184 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Jean Nassar shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    12 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      Signed in as (Sign out)
      Submitting...
      • Tonyo commented  ·   ·  Flag as inappropriate

        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  ·   ·  Flag as inappropriate

        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  ·   ·  Flag as inappropriate

        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  ·   ·  Flag as inappropriate

        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  ·   ·  Flag as inappropriate

        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  ·   ·  Flag as inappropriate

        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  ·   ·  Flag as inappropriate

        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  ·   ·  Flag as inappropriate

        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  ·   ·  Flag as inappropriate

        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  ·   ·  Flag as inappropriate

        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

      • Dante commented  ·   ·  Flag as inappropriate

        Depending on your svg rendering engine, this should be an easy fix.

      Feedback and Knowledge Base