fix: graph nodes use theme colors

npmgraph · Nov 8, 2021 · a60f8f2 · a60f8f2
1 parent 0ddb5b1
commit a60f8f2
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/css/Graph.scss b/css/Graph.scss
@@ -6,6 +6,17 @@
   user-select: none;
   -webkit-user-select: none;
   padding-right: var(--splitter-size);
+
+  --warning0: #f6f6e0;
+  --warning1: #d9d9d9;
+  --stub: #ff0000;
+}
+
+@media (prefers-color-scheme: dark) {
+  #graph {
+    --warning0: #101010;
+    --warning1: #666600;
+  }
 }
 
 #graph-controls {
@@ -36,23 +47,28 @@ svg {
   fill: #666;
 }
 
+pattern#warning {
+  .line0 {stroke: var(--warning0);}
+  .line1 {stroke: var(--warning1);}
+} 
+
 g .stub {
   opacity: 0.6;
 
   > path {
     stroke-dasharray: 4, 4;
-    stroke: #a00;
+    stroke: var(--stub);
   }
 }
 
 g.node {
   text {
-    fill: #444;
+    fill: var(--text);
   }
 
   path {
-    stroke: #444;
-    fill: white;
+    stroke: var(--text);
+    fill: var(--bg0);
   }
 
   &.collapsed {
@@ -64,10 +80,6 @@ g.node {
     stroke: var(--highlight);
   }
 
-  &.selected > text {
-    fill: black;
-  }
-
   &.warning > path {
     fill: url(#warning);
   }

diff --git a/js/Graph.js b/js/Graph.js
@@ -440,8 +440,8 @@ export default function Graph(props) {
     width="12" height="12"
     patternUnits="userSpaceOnUse"
     patternTransform="rotate(45 50 50)">
-    <line stroke="#f6f6e0" stroke-width="6px" x1="3" x2="3" y2="12"/>
-    <line stroke="#d9d9d9" stroke-width="6px" x1="9" x2="9" y2="12"/>
+    <line class="line0" stroke-width="6px" x1="3" x2="3" y2="12"/>
+    <line class="line1" stroke-width="6px" x1="9" x2="9" y2="12"/>
     </pattern>`;
 
     select('#graph svg')