layerchart 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -39,12 +39,14 @@
|
|
|
39
39
|
import { onMount, onDestroy } from 'svelte';
|
|
40
40
|
import { cls } from '@layerstack/tailwind';
|
|
41
41
|
import { Logger, localPoint } from '@layerstack/utils';
|
|
42
|
+
import { darkColorScheme } from '@layerstack/svelte-stores';
|
|
42
43
|
|
|
43
44
|
import { setRenderContext } from '../Chart.svelte';
|
|
44
45
|
import { chartContext } from '../ChartContext.svelte';
|
|
45
46
|
import { transformContext } from '../TransformContext.svelte';
|
|
46
47
|
import { getPixelColor, scaleCanvas, type ComputedStylesOptions } from '../../utils/canvas.js';
|
|
47
48
|
import { getColorStr, rgbColorGenerator } from '../../utils/color.js';
|
|
49
|
+
|
|
48
50
|
const { width, height, containerWidth, containerHeight, padding } = chartContext();
|
|
49
51
|
|
|
50
52
|
/** The `<canvas>` tag. Useful for bindings. */
|
|
@@ -153,6 +155,24 @@
|
|
|
153
155
|
hitCanvasContext = hitCanvasElement?.getContext('2d', {
|
|
154
156
|
willReadFrequently: false, // Explicitly set to `false` to resolve pixel artifacts between fill and stroke with the same color (issue #372)
|
|
155
157
|
}) as CanvasRenderingContext2D;
|
|
158
|
+
|
|
159
|
+
// Invalidate/redraw if color scheme changes, either via browser `prefers-color-scheme` (including emulation) or by changing `<html class="dark">` or `<html data-theme="...">`
|
|
160
|
+
darkColorScheme.subscribe(() => {
|
|
161
|
+
canvasContext.invalidate();
|
|
162
|
+
});
|
|
163
|
+
|
|
164
|
+
const observer = new MutationObserver(() => {
|
|
165
|
+
canvasContext.invalidate();
|
|
166
|
+
});
|
|
167
|
+
|
|
168
|
+
observer.observe(document.documentElement, {
|
|
169
|
+
attributes: true,
|
|
170
|
+
attributeFilter: ['class', 'data-theme'],
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
return () => {
|
|
174
|
+
observer.disconnect();
|
|
175
|
+
};
|
|
156
176
|
});
|
|
157
177
|
|
|
158
178
|
onDestroy(() => {
|