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.

101 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Jean Nassar shared this idea  ·   ·  Admin →

    10 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • 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

      • Dante commented  · 

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

      Feedback and Knowledge Base