fix(canvas): React to theme changes (#9283)

The Sparkline canvas widget does not update its colors when the global application theme changes (e.g., to dark mode) because the theme config is only passed on initial registration, but updateConfig in the worker does not handle it dynamically.

Updated updateConfig in src/canvas/Sparkline.mjs to apply theme changes and trigger a redraw.

Evaluated theme inline inside afterSetOffscreenRegistered in src/component/Sparkline.mjs to ensure the correct string is passed.

Author: tobiu

src/canvas/Sparkline.mjs

@@ -307,6 +307,7 @@ class Sparkline extends Base {
      * Updates the configuration for a specific canvas.
      * @param {Object} data
      * @param {String} data.canvasId
+     * @param {String} [data.theme]
      * @param {Boolean} [data.usePulse]
      * @param {Boolean} [data.useTransition]
      */
@@ -315,6 +316,10 @@ class Sparkline extends Base {
             item = me.items.get(data.canvasId);
 
         if (item) {
+            if (data.theme !== undefined) {
+                item.theme = data.theme;
+                me.draw(item)
+            }
             if (data.usePulse !== undefined) {
                 item.usePulse = data.usePulse
             }
@@ -359,7 +364,7 @@ class Sparkline extends Base {
                 if (!item.isTransitioning) {
                     item.isTransitioning = true;
                     me.activeItems.add(item);
-                    
+
                     if (!me.animationId) {
                         me.renderLoop()
                     }

src/component/Sparkline.mjs

@@ -78,9 +78,11 @@ class Sparkline extends Canvas {
      * @param {Boolean} oldValue
      */
     afterSetUsePulse(value, oldValue) {
-        if (this.offscreenRegistered && value !== undefined) {
-            this.renderer?.updateConfig({
-                canvasId: this.id,
+        let me = this;
+
+        if (me.offscreenRegistered && value !== undefined) {
+            me.renderer?.updateConfig({
+                canvasId: me.id,
                 usePulse: value
             })
         }
@@ -92,14 +94,37 @@ class Sparkline extends Canvas {
      * @param {Boolean} oldValue
      */
     afterSetUseTransition(value, oldValue) {
-        if (this.offscreenRegistered && value !== undefined) {
-            this.renderer?.updateConfig({
-                canvasId     : this.id,
+        let me = this;
+
+        if (me.offscreenRegistered && value !== undefined) {
+            me.renderer?.updateConfig({
+                canvasId     : me.id,
                 useTransition: value
             })
         }
     }
 
+    /**
+     * Triggered after the theme config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetTheme(value, oldValue) {
+        super.afterSetTheme(value, oldValue);
+
+        let me = this;
+
+        if (me.offscreenRegistered && value) {
+            let theme = value.includes('dark') ? 'dark' : 'light';
+
+            me.renderer?.updateConfig({
+                canvasId: me.id,
+                theme
+            })
+        }
+    }
+
     /**
      * @param {Number[]|null} value
      * @param {Number[]|null} oldValue
@@ -119,9 +144,11 @@ class Sparkline extends Canvas {
      * @param {...*} args
      */
     destroy(...args) {
-        if (this.offscreenRegistered) {
-            this.renderer?.unregister({
-                canvasId: this.id
+        let me = this;
+
+        if (me.offscreenRegistered) {
+            me.renderer?.unregister({
+                canvasId: me.id
             })
         }
 
@@ -160,7 +187,7 @@ class Sparkline extends Canvas {
             await me.renderer?.register({
                 canvasId        : me.id,
                 devicePixelRatio: Neo.config.devicePixelRatio,
-                theme           : me.theme || 'light',
+                theme           : me.theme?.includes('dark') ? 'dark' : 'light',
                 usePulse        : me.usePulse,
                 useTransition   : me.useTransition,
                 windowId        : me.windowId