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/base.css

@@ -8,6 +8,10 @@
   --selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
 }
 
+.xy-flow.dark {
+  --node-color-default: #f8f8f8;
+}
+
 .xy-flow__handle {
   background-color: var(--handle-background-color, var(--handle-background-color-default));
 }
@@ -17,6 +21,7 @@
 .xy-flow__node-output,
 .xy-flow__node-group {
   border: var(--node-border, var(--node-border-default));
+  color: var(--node-color, var(--node-color-default));
 
   &.selected,
   &:focus,

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;
     }
   }
 }

packages/system/src/styles/style.css

@@ -5,6 +5,7 @@
   --node-group-background-color-default: rgba(240, 240, 240, 0.25);
   --node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
   --node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
+  --node-border-radius-default: 3px;
 
   --handle-background-color-default: #1a192b;
   --handle-border-color-default: #fff;
@@ -20,6 +21,28 @@
   --controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
 }
 
+.xy-flow.dark {
+  --node-color-default: #f8f8f8;
+  --node-border-default: 1px solid #3c3c3c;
+  --node-background-color-default: #1e1e1e;
+  --node-group-background-color-default: rgba(240, 240, 240, 0.25);
+  --node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
+  --node-boxshadow-selected-default: 0 0 0 0.5px #999;
+
+  --handle-background-color-default: #bebebe;
+  --handle-border-color-default: #1e1e1e;
+
+  --selection-background-color-default: rgba(200, 200, 220, 0.08);
+  --selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);
+
+  --controls-button-background-color-default: #2b2b2b;
+  --controls-button-background-color-hover-default: #3e3e3e;
+  --controls-button-color-default: #f8f8f8;
+  --controls-button-color-hover-default: #fff;
+  --controls-button-border-color-default: #5b5b5b;
+  --controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+}
+
 .xy-flow__edge {
   &.updating {
     .xy-flow__edge-path {
@@ -44,7 +67,7 @@
 .xy-flow__node-output,
 .xy-flow__node-group {
   padding: 10px;
-  border-radius: 3px;
+  border-radius: var(--node-border-radius, var(--node-border-radius-default));
   width: 150px;
   font-size: 12px;
   color: var(--node-color, var(--node-color-default));
@@ -110,7 +133,7 @@
       );
       color: var(
         --controls-button-color-hover-props,
-        var(--controls-button-hover-color, var(--controls-button-hover-color-default))
+        var(--controls-button-color-hover, var(--controls-button-color-hover-default))
       );
     }
 
@@ -122,4 +145,8 @@
       }
     }
   }
+
+  &-button:last-child {
+    border-bottom: none;
+  }
 }

packages/system/src/types/general.ts

@@ -136,3 +136,6 @@ export type UpdateConnection = (params: {
   connectionStartHandle: ConnectingHandle | null;
   connectionEndHandle: ConnectingHandle | null;
 }) => void;
+
+export type ColorModeClass = 'light' | 'dark';
+export type ColorMode = ColorModeClass | 'system';