@opencor/opencor 0.20250814.0 → 0.20250814.4

package/dist/{quill-CL4ccaRT.js → quill-DZsCWNRW.js}

@@ -1,4 +1,4 @@
-import { c as ce, g as gl } from "./index-DnnuRqyP.js";
+import { c as ce, g as gl } from "./index-tP7x8zIn.js";
 var pl = typeof global == "object" && global && global.Object === Object && global, yo = typeof self == "object" && self && self.Object === Object && self, Zt = pl || yo || Function("return this")(), de = Zt.Symbol, ml = Object.prototype, vo = ml.hasOwnProperty, Eo = ml.toString, yr = de ? de.toStringTag : void 0;
 function Ao(n) {
   var t = vo.call(n, yr), e = n[yr];

package/package.json

@@ -42,7 +42,7 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "0.20250814.0",
+  "version": "0.20250814.4",
   "peerDependencies": {
     "vue": "^3.0.0"
   },
@@ -85,6 +85,7 @@
     "format": "prettier --log-level silent --write . && clang-format -i src/libopencor/src/*",
     "format:check": "prettier --check . && clang-format --dry-run -Werror src/libopencor/src/*",
     "lint": "eslint --fix .",
-    "serve": "pnpm build && vite preview"
+    "serve": "pnpm build && vite preview",
+    "version:new": "node scripts/version.js"
   }
 }

package/src/common/vueCommon.ts

@@ -1,17 +1,41 @@
 import * as vue from 'vue'
 
-// Some constants to know whether the operating system uses light mode or dark mode.
+import type { Theme } from '../../index.js'
 
-const prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)')
+// Some constants to know whether the operating system uses light mode or dark mode.
 
-export const isLightMode = vue.ref(prefersColorScheme.matches)
-export const isDarkMode = vue.ref(!prefersColorScheme.matches)
+const _prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)')
+const _isLightMode = vue.ref(_prefersColorScheme.matches)
+const _isDarkMode = vue.ref(!_prefersColorScheme.matches)
+let _theme: Theme = 'system'
 
-prefersColorScheme.addEventListener('change', (event) => {
-  isLightMode.value = event.matches
-  isDarkMode.value = !event.matches
+_prefersColorScheme.addEventListener('change', (event) => {
+  if (_theme === 'system') {
+    _isLightMode.value = event.matches
+    _isDarkMode.value = !event.matches
+  }
 })
 
+export function setTheme(theme: Theme) {
+  _theme = theme
+
+  if (theme === 'light') {
+    _isLightMode.value = true
+    _isDarkMode.value = false
+  } else if (theme === 'dark') {
+    _isLightMode.value = false
+    _isDarkMode.value = true
+  }
+}
+
+export function useLightMode(): boolean {
+  return _isLightMode.value
+}
+
+export function useDarkMode(): boolean {
+  return _isDarkMode.value
+}
+
 // A method to track the height of a given element.
 
 export function trackElementHeight(id: string): void {

package/src/components/OpenCOR.vue

@@ -105,9 +105,13 @@ if (getCurrentInstance !== null) {
   app.use(primeVueToastService as unknown as vue.Plugin)
 }
 
+if (props.theme !== undefined) {
+  vueCommon.setTheme(props.theme)
+}
+
 const toast = useToast()
 
-// Asynchronous initialise our libOpenCOR API.
+// Asynchronously initialise our libOpenCOR API.
 
 const locApiInitialised = vue.ref(false)
 

package/src/components/widgets/GraphPanelWidget.vue

@@ -55,19 +55,19 @@ function themeData() {
 
   function axisThemeData() {
     return {
-      zerolinecolor: vueCommon.isDarkMode.value ? '#71717a' : '#94a3b8', // --p-surface-500 / --p-surface-400
-      gridcolor: vueCommon.isDarkMode.value ? '#3f3f46' : '#e2e8f0', // --p-surface-700 / --p-surface-200
+      zerolinecolor: vueCommon.useLightMode() ? '#94a3b8' : '#71717a', // --p-surface-400 / --p-surface-500
+      gridcolor: vueCommon.useLightMode() ? '#e2e8f0' : '#3f3f46', // --p-surface-200 / --p-surface-700
       minor: {
-        gridcolor: vueCommon.isDarkMode.value ? '#27272a' : '#f1f5f9' // --p-surface-800 / --p-surface-100
+        gridcolor: vueCommon.useLightMode() ? '#f1f5f9' : '#27272a' // --p-surface-100 / --p-surface-800
       }
     }
   }
 
   return {
-    paper_bgcolor: vueCommon.isDarkMode.value ? '#18181b' : '#ffffff', // --p-content-background
-    plot_bgcolor: vueCommon.isDarkMode.value ? '#18181b' : '#ffffff', // --p-content-background
+    paper_bgcolor: vueCommon.useLightMode() ? '#ffffff' : '#18181b', // --p-content-background
+    plot_bgcolor: vueCommon.useLightMode() ? '#ffffff' : '#18181b', // --p-content-background
     font: {
-      color: vueCommon.isDarkMode.value ? '#ffffff' : '#334155' // --p-text-color
+      color: vueCommon.useLightMode() ? '#334155' : '#ffffff' // --p-text-color
     },
     colorway: [
       '#7289ab', // Blue
@@ -84,7 +84,7 @@ function themeData() {
 }
 
 vue.watch(
-  () => [plots, vueCommon.isDarkMode.value],
+  () => [plots, vueCommon.useLightMode()],
   () => {
     Plotly.react(
       mainDiv.value,