feat: Detect firefox darkmode for devtools icon

bfanger · Sep 24, 2023 · 6a6f9bb · 6a6f9bb
1 parent 6da4ed1
commit 6a6f9bb
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/apps/firefox-extension/build.js b/apps/firefox-extension/build.js
@@ -24,7 +24,8 @@ for (const file of [
   "pixi-panel.html",
   "icon.png",
   "[email protected]",
-  "panel-icon.svg",
+  "[email protected]",
+  "[email protected]",
 ]) {
   fs.copyFileSync(path.join(srcDir, file), path.join(outdir, file));
 }

diff --git a/apps/firefox-extension/src/panel-icon.svg → ...firefox-extension/src/[email protected] b/apps/firefox-extension/src/panel-icon.svg → ...firefox-extension/src/[email protected]
diff --git a/apps/firefox-extension/src/[email protected] b/apps/firefox-extension/src/[email protected]
diff --git a/apps/firefox-extension/src/pixi-devtools.ts b/apps/firefox-extension/src/pixi-devtools.ts
@@ -1 +1,13 @@
-browser.devtools.panels.create("PixiJS", "panel-icon.svg", "pixi-panel.html");
+let iconPath = "";
+// Detect darkmode.
+// This only works when devtools uses the same mode as the browser.
+browser.devtools.inspectedWindow
+  .eval("window.matchMedia('(prefers-color-scheme: dark)').matches")
+  .then((result) => {
+    if (Array.isArray(result)) {
+      iconPath = result[0] ? "[email protected]" : "[email protected]";
+    }
+  })
+  .finally(() => {
+    browser.devtools.panels.create("PixiJS", iconPath, "pixi-panel.html");
+  });