Refactor theme detection

background.js

@@ -29,6 +29,7 @@ let collapseWhitespace = false;
 let TurndownService = null;
 let userTheme = 'auto';
 let currentTheme = 'light';
+let detectSystemTheme;
 
 function normalizeRules(rules) {
     return Array.isArray(rules) ? rules.map(r => {
@@ -50,24 +51,6 @@ function iconPaths(name) {
     };
 }
 
-async function detectSystemTheme() {
-    try {
-        const t = await browser.theme.getCurrent();
-        const scheme = t?.properties?.color_scheme;
-        if (scheme === 'dark' || scheme === 'light') {
-            return scheme;
-        }
-        const color = t?.colors?.frame || t?.colors?.toolbar;
-        if (color && /^#/.test(color)) {
-            const r = parseInt(color.slice(1, 3), 16);
-            const g = parseInt(color.slice(3, 5), 16);
-            const b = parseInt(color.slice(5, 7), 16);
-            const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-            return lum < 0.5 ? 'dark' : 'light';
-        }
-    } catch {}
-    return 'light';
-}
 
 const ICONS = {
     logo: () => 'resources/img/logo.png',
@@ -298,6 +281,7 @@ async function clearCacheForMessages(idsInput) {
 
 (async () => {
     logger = await import(browser.runtime.getURL("logger.js"));
+    ({ detectSystemTheme } = await import(browser.runtime.getURL('modules/themeUtils.js')));
     try {
         AiClassifier = await import(browser.runtime.getURL("modules/AiClassifier.js"));
         logger.aiLog("AiClassifier imported", { debug: true });

details.js

@@ -1,8 +1,9 @@
 const aiLog = (await import(browser.runtime.getURL("logger.js"))).aiLog;
 const storage = (globalThis.messenger ?? browser).storage;
+const { detectSystemTheme } = await import(browser.runtime.getURL('modules/themeUtils.js'));
 const { theme } = await storage.local.get('theme');
 const mode = (theme || 'auto') === 'auto'
-  ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+  ? await detectSystemTheme()
   : theme;
 document.documentElement.dataset.theme = mode;
 

modules/themeUtils.js

@@ -0,0 +1,20 @@
+"use strict";
+
+export async function detectSystemTheme() {
+    try {
+        const t = await browser.theme.getCurrent();
+        const scheme = t?.properties?.color_scheme;
+        if (scheme === 'dark' || scheme === 'light') {
+            return scheme;
+        }
+        const color = t?.colors?.frame || t?.colors?.toolbar;
+        if (color && /^#/.test(color)) {
+            const r = parseInt(color.slice(1, 3), 16);
+            const g = parseInt(color.slice(3, 5), 16);
+            const b = parseInt(color.slice(5, 7), 16);
+            const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+            return lum < 0.5 ? 'dark' : 'light';
+        }
+    } catch {}
+    return 'light';
+}

options/options.js

@@ -3,6 +3,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     const logger = await import(browser.runtime.getURL('logger.js'));
     const AiClassifier = await import(browser.runtime.getURL('modules/AiClassifier.js'));
     const dataTransfer = await import(browser.runtime.getURL('options/dataTransfer.js'));
+    const { detectSystemTheme } = await import(browser.runtime.getURL('modules/themeUtils.js'));
     const defaults = await storage.local.get([
         'endpoint',
         'templateName',
@@ -42,10 +43,6 @@ document.addEventListener('DOMContentLoaded', async () => {
     const themeSelect = document.getElementById('theme-select');
     themeSelect.value = defaults.theme || 'auto';
 
-    function systemTheme() {
-        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    }
-
     function updateIcons(theme) {
         document.querySelectorAll('img[data-icon]').forEach(img => {
             const name = img.dataset.icon;
@@ -58,16 +55,16 @@ document.addEventListener('DOMContentLoaded', async () => {
         });
     }
 
-    function applyTheme(setting) {
+    async function applyTheme(setting) {
-        const mode = setting === 'auto' ? systemTheme() : setting;
+        const mode = setting === 'auto' ? await detectSystemTheme() : setting;
         document.documentElement.dataset.theme = mode;
         updateIcons(mode);
     }
 
-    applyTheme(themeSelect.value);
+    await applyTheme(themeSelect.value);
-    themeSelect.addEventListener('change', () => {
+    themeSelect.addEventListener('change', async () => {
         markDirty();
-        applyTheme(themeSelect.value);
+        await applyTheme(themeSelect.value);
     });
     const DEFAULT_AI_PARAMS = {
         max_tokens: 4096,
@@ -486,7 +483,7 @@ document.addEventListener('DOMContentLoaded', async () => {
         const collapseWhitespace = collapseWhitespaceToggle.checked;
         const theme = themeSelect.value;
         await storage.local.set({ endpoint, templateName, customTemplate: customTemplateText, customSystemPrompt, aiParams: aiParamsSave, debugLogging, htmlToMarkdown, stripUrlParams, altTextImages, collapseWhitespace, aiRules: rules, theme });
-        applyTheme(theme);
+        await applyTheme(theme);
         try {
             await AiClassifier.setConfig({ endpoint, templateName, customTemplate: customTemplateText, customSystemPrompt, aiParams: aiParamsSave, debugLogging });
             logger.setDebug(debugLogging);