SVG在移動應用程式上將白色背景保持在暗模式？

有沒有辦法防止暗模式反轉顏色（B/W）？我有一個無法處理倒置二維碼的二維碼閱讀器，我希望即使在暗模式下也能保持背景為白色。

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

請注意，這些二維碼是在運行時生成的，我不能使用另一個靜態 SVG。字串必須保持這種格式。我想我當然可以向它添加類和樣式，但我不能改變路徑。

這模擬了 Android/iOS 的暗模式選項（此 SVG 將在移動應用程式中呈現）。

uj5u.com熱心網友回復：

簡單地說，沒有辦法完全達到你想要的。

好的，我使用 Opera，我的作業系統設定為暗模式，這會相應地流過。還有一個選項“強制暗模式” - 這是一個破壞選項。它不允許非常淺的背景顏色，如果它們比#ffabff. 更糟糕的是“前景”顏色，它將它們轉換為較淺的變體，最高可達#008000.

我記得移動瀏覽器上的暗模式選項通常非常相似——我們在試圖阻止瀏覽器和電子郵件客戶端使用暗模式破壞我們的電子郵件時遇到了臭名昭著的問題。

即使在使用時!important，@media (prefers-color-scheme: dark)這些顏色限制和反轉仍然是強制的。

為了測驗這些邊界在哪里，我選擇只調整綠色屬性，因為它對感知亮度有很大影響。

編輯 - 我撒謊，你可以實作你想要的，但它需要更多的改變。

或者，反轉 QR 碼，并在白色補丁中著色，并在深色背景上添加白色邊框。這符合暗模式原則，并且從來沒有“強制點亮更多”選項。

這是因為正常的光模式和暗模式會聽你的 CSS - 如果你已經定義了它們，并且強制暗模式只會使背景變暗（你的背景已經是黑色）并且使前景變亮（你的筆劃已經是白色的）。

uj5u.com熱心網友回復：

在這個例子中，我有對于prefers-color-scheme的媒體查詢。我希望 QR 碼的背景在暗光模式下保持白色。

@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 class="qrcode" 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>

標籤：

上一篇：SVG中的“深度”影片

下一篇：如何在HTML中顯示SVG檔案中的特定路徑元素？