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

packages/system/src/styles/init.css

@@ -11,12 +11,43 @@
   --attribution-background-color-default: rgba(255, 255, 255, 0.5);
 
   --minimap-background-color-default: #fff;
+  --minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);
+  --minimap-node-background-color-default: #e2e2e2;
+  --minimap-node-stroke-color-default: transparent;
+  --minimap-node-stroke-width-default: 2;
 
-  --background-pattern-dot-color-default: #91919a;
-  --background-pattern-line-color-default: #eee;
+  --background-color-default: transparent;
+  --background-pattern-dots-color-default: #91919a;
+  --background-pattern-lines-color-default: #eee;
   --background-pattern-cross-color-default: #e2e2e2;
 }
 
+.xy-flow.dark {
+  --edge-stroke-default: #3c3c3c;
+  --edge-stroke-width-default: 1;
+  --edge-stroke-selected-default: #727272;
+
+  --connectionline-stroke-default: #b1b1b7;
+  --connectionline-stroke-width-default: 1;
+
+  --attribution-background-color-default: rgba(150, 150, 150, 0.25);
+
+  --minimap-background-color-default: #141414;
+  --minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);
+  --minimap-node-background-color-default: #2b2b2b;
+  --minimap-node-stroke-color-default: transparent;
+  --minimap-node-stroke-width-default: 2;
+
+  --background-color-default: #141414;
+  --background-pattern-dots-color-default: #777;
+  --background-pattern-lines-color-default: #777;
+  --background-pattern-cross-color-default: #777;
+}
+
+.xy-flow {
+  background-color: var(--background-color-props, var(--background-color-default, 'transparent'));
+}
+
 .xy-flow__container {
   position: absolute;
   width: 100%;
@@ -108,16 +139,11 @@
     pointer-events: all;
   }
 
-  &-textbg {
-    fill: white;
-  }
-
   .xy-flow__edge-text {
     pointer-events: none;
     user-select: none;
   }
 }
-
 .xy-flow__connection {
   pointer-events: none;
 
@@ -268,26 +294,47 @@
 
 .xy-flow__minimap {
   background: var(--minimap-background-color, var(--minimap-background-color-default));
+
+  &-mask {
+    fill: var(
+      --minimap-mask-background-color-props,
+      var(--minimap-mask-background-color, var(--minimap-mask-background-color-default))
+    );
+  }
+
+  &-node {
+    fill: var(
+      --minimap-node-background-color-props,
+      var(--minimap-node-background-color, var(--minimap-node-background-color-default))
+    );
+    stroke: var(
+      --minimap-node-stroke-color-props,
+      var(--minimap-node-stroke-color, var(--minimap-node-stroke-color-default))
+    );
+    stroke-width: var(
+      --minimap-node-stroke-width-props,
+      var(--minimap-node-stroke-width, var(--minimap-node-stroke-width-default))
+    );
+  }
 }
 
 .xy-flow__background {
   pointer-events: none;
   z-index: -1;
-  background-color: var(--background-color-props, 'transparent');
 }
 
 .xy-flow__background-pattern {
   &.dots {
     fill: var(
       --background-pattern-color-props,
-      var(--background-pattern-color, var(--background-pattern-dot-color-default))
+      var(--background-pattern-color, var(--background-pattern-dots-color-default))
     );
   }
 
   &.lines {
     stroke: var(
       --background-pattern-color-props,
-      var(--background-pattern-color, var(--background-pattern-line-color-default))
+      var(--background-pattern-color, var(--background-pattern-lines-color-default))
     );
   }
 
@@ -312,6 +359,7 @@
       width: 100%;
       max-width: 12px;
       max-height: 12px;
+      fill: currentColor;
     }
   }
 }