keepassxreboot · varjolintu · May 27, 2024 · Mar 19, 2024 · Mar 30, 2024
diff --git a/.eslintrc b/.eslintrc
@@ -159,6 +159,7 @@
         "Pixels": true,
         "PREDEFINED_SITELIST": true,
         "RED_BUTTON": true,
+        "retrieveColorScheme": true,
         "sendMessage": true,
         "showNotification": true,
         "siteMatch": true,

diff --git a/dist/manifest_chromium.json b/dist/manifest_chromium.json
@@ -143,6 +143,7 @@
         "cookies",
         "nativeMessaging",
         "notifications",
+        "offscreen",
         "storage",
         "tabs",
         "webNavigation",

diff --git a/keepassxc-browser/background/background_service.js b/keepassxc-browser/background/background_service.js
@@ -10,6 +10,7 @@ try {
         'client.js',
         'keepass.js',
         'httpauth.js',
+        'offscreen.js',
         'browserAction.js',
         'page.js',
         'event.js',

diff --git a/keepassxc-browser/background/browserAction.js b/keepassxc-browser/background/browserAction.js
@@ -83,7 +83,7 @@ browserAction.generateIconName = async function(iconType) {
     let style = 'colored';
     if (page.settings.useMonochromeToolbarIcon) {
         if (page.settings.colorTheme === 'system') {
-            style = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            style = await retrieveColorScheme();
         } else {
             style = page.settings.colorTheme;
         }

diff --git a/keepassxc-browser/background/offscreen.js b/keepassxc-browser/background/offscreen.js
@@ -0,0 +1,31 @@
+'use strict';
+
+async function retrieveColorScheme() {
+    if (typeof window !== 'undefined') {
+        // Firefox does not support the offscreen API but its background script still has a window (so far)
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    const offscreenUrl = browser.runtime.getURL('offscreen/offscreen.html');
+    const existingContexts = await browser.runtime.getContexts({
+        contextTypes: [ 'OFFSCREEN_DOCUMENT' ],
+        documentUrls: [ offscreenUrl ],
+    });
+    if (existingContexts.length === 0) {
+        await browser.offscreen.createDocument({
+            url: offscreenUrl,
+            reasons: [ 'MATCH_MEDIA' ],
+            justification: 'Retrieve color scheme',
+        });
+    }
+
+    const style = await browser.runtime.sendMessage({
+        target: 'offscreen',
+        action: 'retrieve_color_scheme',
+    });
+    if (!style) {
+        // if messaging fails then use "light" icon
+        return 'light';
+    }
+    return style;
+}
diff --git a/keepassxc-browser/offscreen/offscreen.html b/keepassxc-browser/offscreen/offscreen.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="offscreen.js"></script>
+  </head>
+  <body></body>
+</html>
diff --git a/keepassxc-browser/offscreen/offscreen.js b/keepassxc-browser/offscreen/offscreen.js
@@ -0,0 +1,9 @@
+chrome.runtime.onMessage.addListener(({ target, action }, sender, sendResponse) => {
+    if (target !== 'offscreen') {
+        return;
+    }
+    if (action === 'retrieve_color_scheme') {
+        const style = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        sendResponse(style);
+    }
+});