@opencor/opencor 0.20250813.0 → 0.20250814.1

package/dist/{quill-BGLY3Ud3.js → quill-BlwByE3W.js}

@@ -1,4 +1,4 @@
-import { c as ce, g as gl } from "./index-BxzyBYAw.js";
+import { c as ce, g as gl } from "./index-Bwy89M_M.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.20250813.0",
+  "version": "0.20250814.1",
   "peerDependencies": {
     "vue": "^3.0.0"
   },

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

@@ -57,6 +57,8 @@ import primeVueToastService from 'primevue/toastservice'
 import { useToast } from 'primevue/usetoast'
 import * as vue from 'vue'
 
+import type { IOpenCORProps } from '../../index'
+
 import '../assets/app.css'
 import * as common from '../common/common'
 import { SHORT_DELAY, TOAST_LIFE } from '../common/constants'
@@ -66,9 +68,7 @@ import * as vueCommon from '../common/vueCommon'
 import IContentsComponent from '../components/ContentsComponent.vue'
 import * as locApi from '../libopencor/locApi'
 
-const props = defineProps<{
-  omex?: string
-}>()
+const props = defineProps<IOpenCORProps>()
 
 // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
 const contents = vue.ref<InstanceType<typeof IContentsComponent> | null>(null)
@@ -80,19 +80,38 @@ const getCurrentInstance = vue.getCurrentInstance()
 
 if (getCurrentInstance !== null) {
   const app = getCurrentInstance.appContext.app
+  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
+      preset: primeVueAuraTheme,
+      options: options
     }
   })
   app.use(primeVueConfirmationService as unknown as vue.Plugin)
   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,