SVG keep white background in dark mode on mobile apps?-CodePudding

Is there a way to prevent dark mode inverting the colors (B/W)? I have a QRCode reader that cannot process inverted qr code and I'd like to keep the background white even in dark mode.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 53" shape-rendering="crispEdges">
<path stroke="#000000" d="M2 2.5h7m2 0h2m1 0h1m5 0h1m11 0h2m1 0h1m1 0h2m3 0h1m1 0h7M2 3.5h1m5 0h1m3 0h1m1 0h3m2 0h2m2 0h1m1 0h3m1 0h1m1 0h2m5 0h5m1 0h1m5 0h1M2 4.5h1m1 0h3m1 0h1m1 0h1m1 0h6m1 0h3m2 0h7m1 0h3m2 0h1m3 0h2m1 0h1m1 0h3m1 0h1M2 5.5h1m1 0h3m1 0h1m1 0h2m2 0h1m2 0h2m2 0h1m1 0h1m2 0h3m2 0h1m5 0h2m2 0h1m2 0h1m1 0h3m1 0h1M2 6.5h1m1 0h3m1 0h1m1 0h2m2 0h2m2 0h1m1 0h1m2 0h11m3 0h3m4 0h1m1 0h3m1 0h1M2 7.5h1m5 0h1m1 0h1m2 0h5m1 0h1m1 0h1m2 0h1m3 0h4m1 0h4m2 0h2m3 0h1m5 0h1M2 8.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M10 9.5h2m1 0h2m2 0h4m3 0h1m3 0h2m1 0h4m2 0h2m2 0h1M2 10.5h1m1 0h5m2 0h1m2 0h1m1 0h1m3 0h1m1 0h7m2 0h2m4 0h6m1 0h5M2 11.5h1m2 0h2m3 0h3m2 0h1m4 0h2m1 0h4m2 0h1m1 0h2m1 0h2m2 0h2m3 0h3m1 0h1m2 0h1M2 12.5h3m1 0h3m2 0h6m1 0h3m5 0h3m5 0h1m1 0h1m1 0h1m1 0h1m1 0h1m2 0h1m1 0h1m1 0h2M5 13.5h1m1 0h1m1 0h1m3 0h1m1 0h1m1 0h1m1 0h2m1 0h1m2 0h1m1 0h1m1 0h2m4 0h1m1 0h1m4 0h3M2 14.5h1m5 0h2m1 0h1m2 0h2m4 0h1m3 0h1m1 0h1m1 0h1m2 0h3m2 0h1m1 0h2m2 0h2m1 0h1m1 0h1m1 0h1M4 15.5h1m1 0h1m2 0h2m2 0h1m1 0h1m2 0h2m1 0h2m1 0h1m2 0h1m4 0h3m2 0h1m3 0h1m1 0h3m3 0h1M3 16.5h2m1 0h3m2 0h2m2 0h1m1 0h2m3 0h3m2 0h2m2 0h1m3 0h1m1 0h4m2 0h2m5 0h1M2 17.5h1m3 0h2m1 0h3m1 0h2m1 0h3m2 0h2m1 0h1m1 0h1m1 0h2m1 0h1m4 0h1m1 0h3m3 0h3m2 0h2M2 18.5h1m1 0h2m2 0h2m3 0h1m2 0h8m1 0h3m2 0h1m2 0h5m1 0h2m1 0h1m2 0h1m3 0h2M5 19.5h1m1 0h1m2 0h3m2 0h2m1 0h1m1 0h1m2 0h1m1 0h1m1 0h1m1 0h3m2 0h1m1 0h1m6 0h2m1 0h2M2 20.5h1m1 0h2m2 0h2m2 0h4m2 0h1m1 0h2m1 0h2m1 0h2m2 0h1m1 0h4m1 0h1m2 0h2m1 0h1m2 0h5M5 21.5h1m3 0h6m1 0h1m4 0h1m3 0h8m3 0h2m2 0h4m6 0h1M2 22.5h1m1 0h2m1 0h3m1 0h6m4 0h2m2 0h2m1 0h1m2 0h3m4 0h1m3 0h1m1 0h2m1 0h1M2 23.5h1m6 0h1m2 0h3m1 0h1m2 0h1m1 0h1m1 0h1m2 0h3m2 0h3m3 0h1m1 0h1m1 0h1m2 0h1m2 0h3M2 24.5h1m1 0h1m1 0h6m3 0h1m1 0h2m2 0h1m2 0h7m2 0h2m2 0h1m2 0h8m2 0h1M3 25.5h1m1 0h2m3 0h1m1 0h2m5 0h4m1 0h1m3 0h3m3 0h4m1 0h1m1 0h2m3 0h1m2 0h2M4 26.5h1m1 0h1m1 0h1m1 0h1m3 0h2m2 0h2m1 0h1m1 0h2m1 0h1m1 0h1m2 0h3m1 0h1m2 0h2m1 0h2m1 0h1m1 0h1m3 0h1M5 27.5h2m3 0h2m2 0h2m2 0h2m1 0h1m2 0h1m3 0h3m1 0h1m4 0h1m1 0h1m2 0h1m3 0h3M6 28.5h5m2 0h1m4 0h2m1 0h2m1 0h5m2 0h1m2 0h1m1 0h11m1 0h3M2 29.5h1m6 0h1m2 0h3m2 0h4m1 0h2m2 0h1m3 0h1m2 0h4m8 0h1m4 0h1M2 30.5h1m1 0h1m1 0h1m1 0h1m3 0h1m2 0h3m1 0h1m1 0h1m2 0h1m1 0h1m2 0h1m2 0h2m3 0h2m1 0h3m1 0h3M2 31.5h2m1 0h2m5 0h2m1 0h2m2 0h2m2 0h1m1 0h1m4 0h1m1 0h2m3 0h2m4 0h1m3 0h1m1 0h2M2 32.5h3m2 0h2m1 0h3m5 0h1m1 0h2m9 0h1m3 0h1m1 0h4m1 0h3m3 0h3M6 33.5h1m2 0h1m4 0h1m1 0h2m5 0h3m1 0h2m3 0h2m1 0h1m2 0h1m1 0h3m1 0h2m1 0h1m2 0h1M3 34.5h1m2 0h1m1 0h2m4 0h2m1 0h3m1 0h3m2 0h2m1 0h1m1 0h2m5 0h9m1 0h1m1 0h1M2 35.5h1m1 0h1m1 0h2m2 0h1m1 0h1m3 0h1m1 0h1m1 0h2m1 0h4m5 0h2m1 0h1m5 0h2m2 0h1m4 0h1M4 36.5h2m2 0h5m5 0h6m2 0h1m2 0h1m1 0h2m5 0h7m1 0h5M4 37.5h2m3 0h1m1 0h1m1 0h2m1 0h1m3 0h2m1 0h4m1 0h3m1 0h1m2 0h1m3 0h1m1 0h2m6 0h2M3 38.5h2m2 0h2m2 0h3m1 0h1m7 0h1m2 0h2m5 0h1m1 0h1m1 0h3m1 0h1m1 0h3m2 0h1M3 39.5h2m1 0h1m2 0h1m3 0h1m7 0h1m1 0h4m1 0h5m2 0h1m3 0h1m1 0h3m1 0h1m3 0h2M3 40.5h1m3 0h2m1 0h3m1 0h1m1 0h2m3 0h2m2 0h1m1 0h1m1 0h4m3 0h1m1 0h1m1 0h5m1 0h2m1 0h2M3 41.5h3m4 0h2m1 0h4m4 0h1m3 0h1m2 0h1m1 0h1m1 0h2m1 0h1m1 0h3m1 0h2m1 0h1m1 0h1m3 0h1M2 42.5h3m3 0h5m1 0h1m5 0h1m1 0h8m1 0h3m1 0h1m1 0h3m1 0h6m3 0h1M10 43.5h2m1 0h2m1 0h2m1 0h1m3 0h2m3 0h1m2 0h3m3 0h3m2 0h1m3 0h2m2 0h1M2 44.5h7m3 0h5m1 0h1m1 0h5m1 0h1m1 0h1m2 0h2m1 0h1m5 0h1m1 0h1m1 0h1m1 0h2m1 0h2M2 45.5h1m5 0h1m1 0h1m3 0h3m3 0h1m1 0h3m3 0h1m1 0h10m1 0h2m3 0h1m2 0h2M2 46.5h1m1 0h3m1 0h1m1 0h2m3 0h2m1 0h2m3 0h6m2 0h3m1 0h4m1 0h1m1 0h5M2 47.5h1m1 0h3m1 0h1m1 0h2m1 0h2m4 0h1m1 0h2m1 0h2m4 0h5m4 0h1m1 0h3m2 0h2m2 0h1M2 48.5h1m1 0h3m1 0h1m1 0h1m1 0h7m1 0h1m1 0h2m1 0h3m10 0h1m1 0h1m2 0h1m1 0h1m2 0h1M2 49.5h1m5 0h1m2 0h2m1 0h4m1 0h1m1 0h2m1 0h2m3 0h1m1 0h1m4 0h2m4 0h5m3 0h1M2 50.5h7m1 0h1m1 0h2m3 0h6m3 0h2m2 0h1m2 0h4m1 0h1m1 0h1m1 0h2m3 0h1m1 0h2"/></svg>

Please note that these QRcodes are generated at runtime and I cannot use another static SVG. The string must remain in this format. I think I can of course add classes and styles to it but I cannot change the path.

This emulates a darkmode option for Android/iOS (this SVG will be rendered inside a mobile app).

CodePudding user response：

Simply put, there is no way to achieve exactly what you want.

OK, I use Opera, my OS is set to dark mode, and this trickles through accordingly. There is also an option "force dark mode" - this is a breaking option. It doesn't allow really light background colours, opting to convert them if they are lighter than #ffabff. Even worse for "foreground" colours, where it converts them to lighter variants up to about #008000.

I recall dark mode options on mobile browsers are typically rather similar - we've had notorious problems trying to prevent browsers and email clients from breaking our emails with dark mode.

Even when using !important and @media (prefers-color-scheme: dark) these colour restrictions and inversions are still forced.

For the interest of testing where these boundaries are, I opted to only adjust the green property as it has the majority of affect on perceived brightness.

Edit - I lie, you can achieve what you want, but it requires more changes.

Alternativly, invert the QR code, and colour in the white patches and add a white border on a dark background. This complies with dark mode principles, and there's never a "force light more" option.

This works because normal light mode and dark mode listen to your CSS - if you have defined them, and forced dark mode only darkens backgrounds (your background would be black already) and lightens foregrounds (your stroke would be white already).

CodePudding user response：

In this example I have the media query for prefers-color-scheme. I would expect the background of the QR code to stay white in either dark of light mode.

@media (prefers-color-scheme: dark) {
  body {
    background: #333;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background: #fff;
    color: #000;
  }
}

svg.qrcode {
  background: #fff;
  width: 200px;
}

<p>Text</p>
<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 53" shape-rendering="crispEdges">
  <path stroke="#000000" d="M2 2.5h7m2 0h2m1 0h1m5 0h1m11 0h2m1 0h1m1 0h2m3 0h1m1 0h7M2 3.5h1m5 0h1m3 0h1m1 0h3m2 0h2m2 0h1m1 0h3m1 0h1m1 0h2m5 0h5m1 0h1m5 0h1M2 4.5h1m1 0h3m1 0h1m1 0h1m1 0h6m1 0h3m2 0h7m1 0h3m2 0h1m3 0h2m1 0h1m1 0h3m1 0h1M2 5.5h1m1 0h3m1 0h1m1 0h2m2 0h1m2 0h2m2 0h1m1 0h1m2 0h3m2 0h1m5 0h2m2 0h1m2 0h1m1 0h3m1 0h1M2 6.5h1m1 0h3m1 0h1m1 0h2m2 0h2m2 0h1m1 0h1m2 0h11m3 0h3m4 0h1m1 0h3m1 0h1M2 7.5h1m5 0h1m1 0h1m2 0h5m1 0h1m1 0h1m2 0h1m3 0h4m1 0h4m2 0h2m3 0h1m5 0h1M2 8.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M10 9.5h2m1 0h2m2 0h4m3 0h1m3 0h2m1 0h4m2 0h2m2 0h1M2 10.5h1m1 0h5m2 0h1m2 0h1m1 0h1m3 0h1m1 0h7m2 0h2m4 0h6m1 0h5M2 11.5h1m2 0h2m3 0h3m2 0h1m4 0h2m1 0h4m2 0h1m1 0h2m1 0h2m2 0h2m3 0h3m1 0h1m2 0h1M2 12.5h3m1 0h3m2 0h6m1 0h3m5 0h3m5 0h1m1 0h1m1 0h1m1 0h1m1 0h1m2 0h1m1 0h1m1 0h2M5 13.5h1m1 0h1m1 0h1m3 0h1m1 0h1m1 0h1m1 0h2m1 0h1m2 0h1m1 0h1m1 0h2m4 0h1m1 0h1m4 0h3M2 14.5h1m5 0h2m1 0h1m2 0h2m4 0h1m3 0h1m1 0h1m1 0h1m2 0h3m2 0h1m1 0h2m2 0h2m1 0h1m1 0h1m1 0h1M4 15.5h1m1 0h1m2 0h2m2 0h1m1 0h1m2 0h2m1 0h2m1 0h1m2 0h1m4 0h3m2 0h1m3 0h1m1 0h3m3 0h1M3 16.5h2m1 0h3m2 0h2m2 0h1m1 0h2m3 0h3m2 0h2m2 0h1m3 0h1m1 0h4m2 0h2m5 0h1M2 17.5h1m3 0h2m1 0h3m1 0h2m1 0h3m2 0h2m1 0h1m1 0h1m1 0h2m1 0h1m4 0h1m1 0h3m3 0h3m2 0h2M2 18.5h1m1 0h2m2 0h2m3 0h1m2 0h8m1 0h3m2 0h1m2 0h5m1 0h2m1 0h1m2 0h1m3 0h2M5 19.5h1m1 0h1m2 0h3m2 0h2m1 0h1m1 0h1m2 0h1m1 0h1m1 0h1m1 0h3m2 0h1m1 0h1m6 0h2m1 0h2M2 20.5h1m1 0h2m2 0h2m2 0h4m2 0h1m1 0h2m1 0h2m1 0h2m2 0h1m1 0h4m1 0h1m2 0h2m1 0h1m2 0h5M5 21.5h1m3 0h6m1 0h1m4 0h1m3 0h8m3 0h2m2 0h4m6 0h1M2 22.5h1m1 0h2m1 0h3m1 0h6m4 0h2m2 0h2m1 0h1m2 0h3m4 0h1m3 0h1m1 0h2m1 0h1M2 23.5h1m6 0h1m2 0h3m1 0h1m2 0h1m1 0h1m1 0h1m2 0h3m2 0h3m3 0h1m1 0h1m1 0h1m2 0h1m2 0h3M2 24.5h1m1 0h1m1 0h6m3 0h1m1 0h2m2 0h1m2 0h7m2 0h2m2 0h1m2 0h8m2 0h1M3 25.5h1m1 0h2m3 0h1m1 0h2m5 0h4m1 0h1m3 0h3m3 0h4m1 0h1m1 0h2m3 0h1m2 0h2M4 26.5h1m1 0h1m1 0h1m1 0h1m3 0h2m2 0h2m1 0h1m1 0h2m1 0h1m1 0h1m2 0h3m1 0h1m2 0h2m1 0h2m1 0h1m1 0h1m3 0h1M5 27.5h2m3 0h2m2 0h2m2 0h2m1 0h1m2 0h1m3 0h3m1 0h1m4 0h1m1 0h1m2 0h1m3 0h3M6 28.5h5m2 0h1m4 0h2m1 0h2m1 0h5m2 0h1m2 0h1m1 0h11m1 0h3M2 29.5h1m6 0h1m2 0h3m2 0h4m1 0h2m2 0h1m3 0h1m2 0h4m8 0h1m4 0h1M2 30.5h1m1 0h1m1 0h1m1 0h1m3 0h1m2 0h3m1 0h1m1 0h1m2 0h1m1 0h1m2 0h1m2 0h2m3 0h2m1 0h3m1 0h3M2 31.5h2m1 0h2m5 0h2m1 0h2m2 0h2m2 0h1m1 0h1m4 0h1m1 0h2m3 0h2m4 0h1m3 0h1m1 0h2M2 32.5h3m2 0h2m1 0h3m5 0h1m1 0h2m9 0h1m3 0h1m1 0h4m1 0h3m3 0h3M6 33.5h1m2 0h1m4 0h1m1 0h2m5 0h3m1 0h2m3 0h2m1 0h1m2 0h1m1 0h3m1 0h2m1 0h1m2 0h1M3 34.5h1m2 0h1m1 0h2m4 0h2m1 0h3m1 0h3m2 0h2m1 0h1m1 0h2m5 0h9m1 0h1m1 0h1M2 35.5h1m1 0h1m1 0h2m2 0h1m1 0h1m3 0h1m1 0h1m1 0h2m1 0h4m5 0h2m1 0h1m5 0h2m2 0h1m4 0h1M4 36.5h2m2 0h5m5 0h6m2 0h1m2 0h1m1 0h2m5 0h7m1 0h5M4 37.5h2m3 0h1m1 0h1m1 0h2m1 0h1m3 0h2m1 0h4m1 0h3m1 0h1m2 0h1m3 0h1m1 0h2m6 0h2M3 38.5h2m2 0h2m2 0h3m1 0h1m7 0h1m2 0h2m5 0h1m1 0h1m1 0h3m1 0h1m1 0h3m2 0h1M3 39.5h2m1 0h1m2 0h1m3 0h1m7 0h1m1 0h4m1 0h5m2 0h1m3 0h1m1 0h3m1 0h1m3 0h2M3 40.5h1m3 0h2m1 0h3m1 0h1m1 0h2m3 0h2m2 0h1m1 0h1m1 0h4m3 0h1m1 0h1m1 0h5m1 0h2m1 0h2M3 41.5h3m4 0h2m1 0h4m4 0h1m3 0h1m2 0h1m1 0h1m1 0h2m1 0h1m1 0h3m1 0h2m1 0h1m1 0h1m3 0h1M2 42.5h3m3 0h5m1 0h1m5 0h1m1 0h8m1 0h3m1 0h1m1 0h3m1 0h6m3 0h1M10 43.5h2m1 0h2m1 0h2m1 0h1m3 0h2m3 0h1m2 0h3m3 0h3m2 0h1m3 0h2m2 0h1M2 44.5h7m3 0h5m1 0h1m1 0h5m1 0h1m1 0h1m2 0h2m1 0h1m5 0h1m1 0h1m1 0h1m1 0h2m1 0h2M2 45.5h1m5 0h1m1 0h1m3 0h3m3 0h1m1 0h3m3 0h1m1 0h10m1 0h2m3 0h1m2 0h2M2 46.5h1m1 0h3m1 0h1m1 0h2m3 0h2m1 0h2m3 0h6m2 0h3m1 0h4m1 0h1m1 0h5M2 47.5h1m1 0h3m1 0h1m1 0h2m1 0h2m4 0h1m1 0h2m1 0h2m4 0h5m4 0h1m1 0h3m2 0h2m2 0h1M2 48.5h1m1 0h3m1 0h1m1 0h1m1 0h7m1 0h1m1 0h2m1 0h3m10 0h1m1 0h1m2 0h1m1 0h1m2 0h1M2 49.5h1m5 0h1m2 0h2m1 0h4m1 0h1m1 0h2m1 0h2m3 0h1m1 0h1m4 0h2m4 0h5m3 0h1M2 50.5h7m1 0h1m1 0h2m3 0h6m3 0h2m2 0h1m2 0h4m1 0h1m1 0h1m1 0h2m3 0h1m1 0h2"/></svg>