fix: repaint canvas layers on colorMode changes

gka · gka · commit 293306209924 · 2025-05-27T08:32:30.000+02:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -13,23 +13,13 @@
     "[svelte]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
-    "eslint.validate": [
-        "javascript",
-        "javascriptreact",
-        "typescript",
-        "typescriptreact",
-        "svelte"
-    ],
+    "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "svelte"],
     "prettier.useTabs": false,
     "prettier.singleQuote": true,
     "prettier.tabWidth": 4,
     "prettier.trailingComma": "none",
     "prettier.printWidth": 100,
     "svelte.plugin.svelte.format.enable": false,
-    "eslint.probe": [
-        "javascript",
-        "typescript",
-        "svelte"
-    ],
+    "eslint.probe": ["javascript", "typescript", "svelte"],
     "eslint.experimental.useFlatConfig": true
 }
diff --git a/src/lib/marks/helpers/CanvasLayer.svelte b/src/lib/marks/helpers/CanvasLayer.svelte
@@ -2,6 +2,27 @@
     import { getContext } from 'svelte';
     import type { PlotContext } from 'svelteplot/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>
