diff --git a/.vscode/settings.json b/.vscode/settings.json
index 46d9035f..21800944 100644
--- 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/package.json b/package.json
index a3d2475a..1a977403 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.7",
+    "version": "0.2.8",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
diff --git a/src/lib/marks/ColorLegend.svelte b/src/lib/marks/ColorLegend.svelte
index df69f520..75529dba 100644
--- a/src/lib/marks/ColorLegend.svelte
+++ b/src/lib/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)}
diff --git a/src/lib/marks/helpers/CanvasLayer.svelte b/src/lib/marks/helpers/CanvasLayer.svelte
index 16431f13..9bbaf502 100644
--- 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>
diff --git a/src/routes/transforms/jitter/+page.md b/src/routes/transforms/jitter/+page.md
index d5b4348c..5965679d 100644
--- a/src/routes/transforms/jitter/+page.md
+++ b/src/routes/transforms/jitter/+page.md
@@ -121,7 +121,7 @@ Jittering also works for temporal data. When jittering Date objects, random time
             }))
     );
 
-    let type = $state('uniform');
+    let type = $state('normal');
     let width = $state('1 month');
 
     const timeIntervals = [
@@ -163,6 +163,25 @@ Jittering also works for temporal data. When jittering Date objects, random time
 </Plot>
 ```
 
+```svelte
+<Plot y={{ grid: true }}>
+    <Dot
+        {...jitterX(
+            {
+                data,
+                x: 'year',
+                y: 'bmi'
+            },
+            {
+                type: 'normal',
+                std: '1 month'
+            }
+        )} />
+</Plot>
+```
+
+[fork](https://svelte.dev/playground/6938e854283d4e56893ceca748393f6f?version=5)
+
 This example shows how jittering can be applied to date values in the x-axis, which can be useful when multiple events occur at the same date and would otherwise overlap.
 
 ## Custom random sources
@@ -190,6 +209,8 @@ For reproducible jittering or specialized random distributions, you can provide
 </Plot>
 ```
 
+[fork](https://svelte.dev/playground/ef02e12058354e53a9da72ae249ad359?version=5.30.2)
+
 This is particularly useful for:
 
 - Testing and debugging visualizations

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://github.com/svelteplot/svelteplot/compare/svelteplot:7841ea5...svelteplot:91cd1ce.diff" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://github.com/svelteplot/svelteplot/compare/svelteplot:7841ea5...svelteplot:91cd1ce.diff" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://github.com/svelteplot/svelteplot/compare/svelteplot:7841ea5...svelteplot:91cd1ce.diff" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://github.com/svelteplot/svelteplot/compare/svelteplot:7841ea5...svelteplot:91cd1ce.diff" target="_blank">pFad v4 Proxy</a></p></body>
</html>