svelteplot 0.2.7 → 0.2.8

package/dist/marks/ColorLegend.svelte

@@ -129,7 +129,7 @@
                 marginBottom={20}
                 height={38}
                 inset={0}
-                x={{ domain, tickSpacing, tickFormat }}>
+                x={{ domain, tickSpacing: 30, tickFormat }}>
                 <defs>
                     <linearGradient id="gradient-{randId}" x2="1">
                         {#each ticks as t (t)}

package/dist/marks/helpers/CanvasLayer.svelte

@@ -2,6 +2,27 @@
     import { getContext } from 'svelte';
     import type { PlotContext } from '../../types';
     import { devicePixelRatio } from 'svelte/reactivity/window';
+    import { MediaQuery } from 'svelte/reactivity';
+    import type { Attachment } from 'svelte/attachments';
+
+    const darkMode = new MediaQuery('prefers-color-scheme: dark');
+    let colorScheme = $state();
+
+    /**
+     * we need to repaint on dark mode changes in case the user
+     * is using any css variables or currentColor that changes
+     * with the color scheme
+     */
+    const watchColorScheme: Attachment = (element: Element) => {
+        const htmlElement = element.ownerDocument.documentElement;
+        const observer = new MutationObserver(() => {
+            colorScheme = getComputedStyle(htmlElement).colorScheme;
+        });
+        observer.observe(htmlElement, { attributes: true });
+        return () => {
+            observer.disconnect();
+        };
+    };
 
     let restProps: {} = $props();
 
@@ -14,14 +35,15 @@
     canvas element inside a foreignObject for use in a plot and takes care of 
     scaling it to the device pixel ratio.
 -->
-
-<foreignObject x="0" y="0" width={plot.width} height={plot.height}>
-    <canvas
-        xmlns="http://www.w3.org/1999/xhtml"
-        {...restProps}
-        width={plot.width * (devicePixelRatio.current ?? 1)}
-        height={plot.height * (devicePixelRatio.current ?? 1)}
-        style="width: {plot.width}px; height: {plot.height}px;"></canvas>
+<foreignObject x="0" y="0" {@attach watchColorScheme} width={plot.width} height={plot.height}>
+    {#key [colorScheme, darkMode.current]}
+        <canvas
+            xmlns="http://www.w3.org/1999/xhtml"
+            {...restProps}
+            width={plot.width * (devicePixelRatio.current ?? 1)}
+            height={plot.height * (devicePixelRatio.current ?? 1)}
+            style="width: {plot.width}px; height: {plot.height}px;"></canvas>
+    {/key}
 </foreignObject>
 
 <style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelteplot",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "license": "ISC",
   "author": {
     "name": "Gregor Aisch",