Material-er theme on dark graph render.

scripts/gen_centered_graph.py

@@ -99,10 +99,10 @@ def gen(headline_id, graph, doc_to_headline_remapping):
         # f.write('splines=spline\n') # Not supported with edges to cluster
         f.write('node[shape=rect]\n')
 
-        def draw_subgraph(node_id):
+        def draw_subgraph(node_id, depth):
             f.write("subgraph cluster_{} {{\n".format(node_id.replace("-", "_")))
             f.write('  URL="./{}.node.html"\n'.format(node_id))
-
+            f.write('  class="{}"\n'.format('cluster-depth-' + str(depth - 1)))
             f.write("  label=\"{}\"\n".format(g[node_id]['title'].replace("\"", "'")))
             f.write("\n")
 
@@ -111,14 +111,18 @@ def gen(headline_id, graph, doc_to_headline_remapping):
                 v = g[k]
 
                 if k in in_emacs_tree:
-                    draw_subgraph(k)
+                    draw_subgraph(k, depth=depth + 1)
                 else:
-                    print("  _" + k.replace("-", "_") + "[label=\"" + v["title"].replace("\"", "'") + "\", URL=\"" + k + ".node.html\"];", file=f)
+                    print("  _" + k.replace("-", "_")
+                          + "[label=\"" + v["title"].replace("\"", "'") + "\", "
+                          + "URL=\"" + k + ".node.html\", "
+                          + "class=\"cluster-depth-" + str(depth) + "\""
+                          + "];", file=f)
 
 
             f.write("\n}\n")
 
-        draw_subgraph(reference_node)
+        draw_subgraph(reference_node, 1)
 
         for k, v in g.items():
             if k not in in_emacs:

static/style.css

@@ -633,6 +633,53 @@ tr.__table-separator {
         stroke: white;
         fill: #222;
     }
+
+    .connections svg .edge polygon {
+        stroke: white;
+        fill: white;
+    }
+
+    .connections svg .node polygon,
+    .connections svg .cluster polygon {
+        stroke: transparent;
+        fill: #303030;
+    }
+
+    .connections svg .cluster-depth-1 polygon {
+        stroke: transparent;
+        fill: #353535;
+    }
+
+    .connections svg .cluster-depth-2 polygon {
+        stroke: transparent;
+        fill: #3a3939;
+    }
+
+    .connections svg .cluster-depth-3 polygon {
+        stroke: transparent;
+        fill: #444444;
+    }
+
+    .connections svg .cluster-depth-4 polygon {
+        stroke: transparent;
+        fill: #484847;
+    }
+
+    .connections svg .cluster-depth-5 polygon {
+        stroke: transparent;
+        fill: #515151;
+    }
+
+    .connections svg .cluster-depth-6 polygon {
+        stroke: transparent;
+        fill: #565555;
+    }
+
+    .connections svg .cluster-depth-7 polygon {
+        stroke: transparent;
+        fill: #5a5a5a;
+    }
+
     .connections svg text {
         fill: white;
     }