Make icons react to color-scheme properly.

Note that due to https://bugzilla.mozilla.org/show_bug.cgi?id=1779457 /
https://github.com/w3c/csswg-drafts/issues/7213, prefers-color-scheme
works fine even if the user has an explicitly light theme or so.

This fixes #2583 entirely.

src/img/multiaccountcontainer-16-dark.svg

@@ -1,9 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. --><svg data-name="Flat (For Export)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <style>rect,path {fill: rgba(249, 249, 250, 0.8);}</style>
-  <rect x="1" y="1" width="6" height="6" rx="1"/>
-  <path d="M14.75 3H13V1.25A0.25 0.25 0 0 0 12.75 1h-1.5A0.25 0.25 0 0 0 11 1.25V3H9.25A0.25 0.25 0 0 0 9 3.25v1.5A0.25 0.25 0 0 0 9.25 5H11v1.75A0.25 0.25 0 0 0 11.25 7h1.5A0.25 0.25 0 0 0 13 6.75V5h1.75A0.25 0.25 0 0 0 15 4.75v-1.5A0.25 0.25 0 0 0 14.75 3z" fill-rule="evenodd"/>
-  <rect x="1" y="9" width="6" height="6" rx="1"/>
-  <rect x="9" y="9" width="6" height="6" rx="1"/>
-</svg>

src/img/multiaccountcontainer-16.svg

@@ -1,5 +1,11 @@
 <svg data-name="Flat (For Export)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <style>rect,path {fill: rgba(24, 25, 26, 01);}</style>
+  <style>
+    :root { color-scheme: light dark; }
+    rect, path { fill: rgb(24, 25, 26); }
+    @media (prefers-color-scheme: dark) {
+      rect, path { fill: rgba(249, 249, 250, 0.8); }
+    }
+  </style>
   <rect x="1" y="1" width="6" height="6" rx="1"/>
   <path d="M14.75 3H13V1.25A0.25 0.25 0 0 0 12.75 1h-1.5A0.25 0.25 0 0 0 11 1.25V3H9.25A0.25 0.25 0 0 0 9 3.25v1.5A0.25 0.25 0 0 0 9.25 5H11v1.75A0.25 0.25 0 0 0 11.25 7h1.5A0.25 0.25 0 0 0 13 6.75V5h1.75A0.25 0.25 0 0 0 15 4.75v-1.5A0.25 0.25 0 0 0 14.75 3z" fill-rule="evenodd"/>
   <rect x="1" y="9" width="6" height="6" rx="1"/>

src/js/content-script.js

@@ -24,11 +24,12 @@ async function addMessage(message) {
   divElement.innerText = message.text;
 
   const imageElement = document.createElement("img");
-  const imagePath = browser.runtime.getURL("/img/container-site-d-24.png");
+  const imagePath = browser.runtime.getURL("/img/multiaccountcontainer-16.svg");
   const response = await fetch(imagePath);
   const blob = await response.blob();
   const objectUrl = URL.createObjectURL(blob);
   imageElement.src = objectUrl;
+  imageElement.width = imageElement.height = 24;
   divElement.prepend(imageElement);
 
   document.body.appendChild(divElement);

src/manifest.json

@@ -5,8 +5,8 @@
   "incognito": "not_allowed",
   "description": "__MSG_extensionDescription__",
   "icons": {
-    "48": "img/container-site-d-48.png",
+    "48": "img/multiaccountcontainer-16.svg",
-    "96": "img/container-site-d-96.png"
+    "96": "img/multiaccountcontainer-16.svg"
   },
   "homepage_url": "https://github.com/mozilla/multi-account-containers#readme",
   "permissions": [
@@ -118,7 +118,7 @@
     "default_popup": "popup.html",
     "theme_icons": [
       {
-        "light": "img/multiaccountcontainer-16-dark.svg",
+        "light": "img/multiaccountcontainer-16.svg",
         "dark": "img/multiaccountcontainer-16.svg",
         "size": 32
       }
@@ -151,7 +151,7 @@
   ],
   "default_locale": "en",
   "web_accessible_resources": [
-    "/img/container-site-d-24.png"
+    "/img/multiaccountcontainer-16.svg"
   ],
   "options_ui": {
     "page": "options.html",