plotly.js: ensure that it uses whatever theme we ask OpenCOR to use

package.json

@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "0.20251203.2",
+  "version": "0.20251203.3",
   "scripts": {
     "archive:web": "bun src/renderer/scripts/archive.web.js",
     "build": "electron-vite build",

src/renderer/package.json

@@ -39,7 +39,7 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "0.20251203.2",
+  "version": "0.20251203.3",
   "scripts": {
     "build": "vite build",
     "build:lib": "vite build --config vite.lib.config.ts && cp index.d.ts dist/index.d.ts",

src/renderer/src/common/vueCommon.ts

@@ -8,39 +8,48 @@ import type { Theme } from '../../index.js';
 
 export const activeInstanceUid = vueusecore.createGlobalState(() => vue.ref<string | null>(null));
 
-// Theme composable to know whether OpenCOR uses light mode or dark mode.
+// Theme composable to know whether OpenCOR uses light mode, dark mode, or system mode.
 
-export function useTheme() {
+export const useTheme = vueusecore.createGlobalState(() => {
   const prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)');
   const isLightMode = vue.ref(prefersColorScheme.matches);
   const isDarkMode = vue.ref(!prefersColorScheme.matches);
-  let theme: Theme = 'system';
+  const _theme = vue.ref<Theme>('system');
 
-  function onChange(event) {
-    if (theme === 'system') {
-      isLightMode.value = event.matches;
-      isDarkMode.value = !event.matches;
-    }
+  function updateLightAndDarkModes(prefersColorScheme: MediaQueryList | MediaQueryListEvent) {
+    isLightMode.value = prefersColorScheme.matches;
+    isDarkMode.value = !prefersColorScheme.matches;
   }
 
-  vue.onMounted(() => {
-    prefersColorScheme.addEventListener('change', onChange);
-  });
+  function updateDocumentClasses() {
+    document.documentElement.classList.toggle('opencor-dark-mode', isDarkMode.value);
+  }
 
-  vue.onUnmounted(() => {
-    prefersColorScheme.removeEventListener('change', onChange);
+  prefersColorScheme.addEventListener('change', (event) => {
+    if (_theme.value === 'system') {
+      updateLightAndDarkModes(event);
+      updateDocumentClasses();
+    }
   });
 
-  function setTheme(newTheme: Theme) {
-    theme = newTheme;
+  function theme(): Theme {
+    return _theme.value;
+  }
+
+  function setTheme(newTheme: Theme | undefined) {
+    _theme.value = newTheme === undefined ? 'system' : newTheme;
 
-    if (theme === 'light') {
+    if (_theme.value === 'light') {
       isLightMode.value = true;
       isDarkMode.value = false;
-    } else if (theme === 'dark') {
+    } else if (_theme.value === 'dark') {
       isLightMode.value = false;
       isDarkMode.value = true;
+    } else {
+      updateLightAndDarkModes(prefersColorScheme);
     }
+
+    updateDocumentClasses();
   }
 
   function useLightMode(): boolean {
@@ -52,11 +61,12 @@ export function useTheme() {
   }
 
   return {
+    theme,
     setTheme,
     useLightMode,
     useDarkMode
   };
-}
+});
 
 // A method to retrieve the name of a tracked CSS variable.
 

src/renderer/src/components/OpenCOR.vue

@@ -185,25 +185,12 @@ if (crtInstance !== null) {
   const app = crtInstance.appContext.app;
 
   if (app.config.globalProperties.$primevue === undefined) {
-    let options = {};
-
-    if (props.theme === 'light') {
-      options = {
-        darkModeSelector: false
-      };
-    } else if (props.theme === 'dark') {
-      document.documentElement.classList.add('opencor-dark-mode');
-      document.body.classList.add('opencor-dark-mode');
-
-      options = {
-        darkModeSelector: '.opencor-dark-mode'
-      };
-    }
-
     app.use(primeVueConfig as unknown as vue.Plugin, {
       theme: {
         preset: primeVueAuraTheme,
-        options: options
+        options: {
+          darkModeSelector: '.opencor-dark-mode'
+        }
       }
     });
   }
@@ -217,9 +204,7 @@ if (crtInstance !== null) {
   }
 }
 
-if (props.theme !== undefined) {
-  vueCommon.useTheme().setTheme(props.theme);
-}
+vueCommon.useTheme().setTheme(props.theme);
 
 const toast = useToast();