Feat: dark mode (#3652)

* feat(react/svelte): add dark mode defaults * refactor(darkmode): minimap, edges, edge labels * chore(style): edge label color * feat(colorMode): add colorMode prop light/dark/system * chore(examples): cleanup * test(colorMode): add tests * chore(base.css): add dark base * chore(examples): cleanup
2023-11-23 12:15:36 +01:00
parent 74c82272aa
commit ab5eef220f
38 changed files with 474 additions and 83 deletions
@@ -0,0 +1,32 @@
+import type { ColorMode, ColorModeClass } from '@xyflow/system';
+import { readable, type Readable } from 'svelte/store';
+
+function getMediaQuery() {
+  if (typeof window === 'undefined' || !window.matchMedia) {
+    return null;
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)');
+}
+
+export function useColorModeClass(colorMode: ColorMode = 'light'): Readable<ColorModeClass> {
+  const colorModeClass = readable<ColorModeClass>('light', (set) => {
+    if (colorMode !== 'system') {
+      set(colorMode);
+
+      return;
+    }
+
+    const mediaQuery = getMediaQuery();
+    const updateColorModeClass = () => set(mediaQuery?.matches ? 'dark' : 'light');
+
+    set(mediaQuery?.matches ? 'dark' : 'light');
+    mediaQuery?.addEventListener('change', updateColorModeClass);
+
+    return () => {
+      mediaQuery?.removeEventListener('change', updateColorModeClass);
+    };
+  });
+
+  return colorModeClass;
+}