From 6b03475f136d0bf88da541fc5414662f11a094c2 Mon Sep 17 00:00:00 2001
From: David Mosbach <david.mosbach@live.de>
Date: Sat, 3 Jun 2023 02:56:36 +0200
Subject: [PATCH] added dark mode

---
 editor.css  | 131 ++++++++++++++++++++++++++++++++++++-----
 editor.html | 164 ++++++++++++++++++++++++++++++++++------------------
 editor.js   |  67 +++++++++++++++++++--
 3 files changed, 285 insertions(+), 77 deletions(-)

diff --git a/editor.css b/editor.css
index 7449092..5f2e969 100644
--- a/editor.css
+++ b/editor.css
@@ -18,13 +18,11 @@ body {
   top: 0px;
   width: 100%;
   position: fixed;
-  /* padding: 8 8 8 8; */
   padding-left: 10px;
-  background-color: rgba(230, 230, 230, 0.8);
-  /* opacity: 0.95; */
+  /* background-color: rgba(230, 230, 230, 0.8); */
+  /* transition: all 100ms ease-out 50ms; */
   z-index: 5;
   float: left;
-  /* overflow: auto; */
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
 }
@@ -47,6 +45,7 @@ body {
   border-right: none;
   transition: all 200ms ease-out 0ms;
   cursor: pointer;
+  color: inherit;
 }
 
 .menuitem:hover button {
@@ -82,7 +81,7 @@ body {
   font-size: 1em;
   font-family: 'Inter';
   font-weight: normal;
-  color: rgba(120, 120, 120, 0.668);
+  /* color: rgba(120, 120, 120, 0.6); */
   background-color: transparent;
   border-top: 4px solid transparent;
   border-bottom: 4px solid transparent;
@@ -91,9 +90,9 @@ body {
 
 .submenu, #sidepanel, #filepanel {
   position:fixed;
-  background-color: rgba(230, 230, 230, 0.8);
+  /* background-color: rgba(230, 230, 230, 0.8); */
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-  /* opacity: 0.95; */
+  /* transition: all 100ms ease-out 50ms; */
   padding: 20px;
   border-radius: 15px;
   backdrop-filter: blur(10px);
@@ -125,7 +124,7 @@ body {
   position: absolute;
   top: 10px;
   left: 20px;
-  color: rgba(120, 120, 120, 0.538);
+  /* color: rgba(120, 120, 120, 0.538); */
 }
 
 #sidecontentedge, #sidecontentnode {
@@ -181,8 +180,11 @@ body {
 }
 
 .contextmenu div, #filemenu div {
-  padding: 5px;
-  background-color: rgba(230, 230, 230, 0.8);
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
+  /* background-color: rgba(230, 230, 230, 0.8); */
   /* opacity: 0.95; */
   transition: all 100ms ease-out 50ms;
   -webkit-user-select: none;
@@ -201,14 +203,22 @@ body {
   border-bottom-right-radius: 5px;
 }
 
-.contextmenu div:hover, #filemenu div:hover {
+.contextmenu .menu-lightmode:hover, #filemenu .menu-lightmode:hover {
   background-color: rgb(240, 240, 240, 0.8);
 }
 
-.contextmenu div:active, #filemenu div:active {
+.contextmenu .menu-lightmode:active, #filemenu .menu-lightmode:active {
   background-color: rgb(250, 250, 250, 0.8);
 }
 
+.contextmenu .menu-darkmode:hover, #filemenu .menu-darkmode:hover {
+  background-color: rgba(35, 35, 35, 0.8);
+}
+
+.contextmenu .menu-darkmode:active, #filemenu .menu-darkmode:active {
+  background-color: rgba(45, 45, 45, 0.8);
+}
+
 #filemenu .menutop {
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
@@ -233,6 +243,7 @@ body {
 
 ::-webkit-scrollbar {
   width: 5px;
+  height: 5px;
 }
 
 ::-webkit-scrollbar-track {
@@ -388,9 +399,67 @@ label {
   z-index: 3;
 }
 
+#settings-table {
+  line-height: 2;
+  color: inherit;
+  text-align: left;
+}
+
+#settings-table tr td:first-child {
+  padding-right: 10px;
+}
+
+.toggle {
+  position: relative;
+  display: inline-block;
+  width: 30px;
+  height: 20px;
+}
+
+.toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(120, 120, 120, 0.5);
+  border-radius: 15px;
+  -webkit-transition: 200ms;
+  transition: 200ms;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: "";
+  height: 14px;
+  width: 14px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 15px;
+  -webkit-transition: 200ms;
+  transition: 200ms;
+}
+
+input:checked + .toggle-slider {
+  background-color: rgb(75, 151, 151);
+}
+
+input:checked + .toggle-slider:before {
+  -webkit-transform: translateX(10px);
+  -ms-transform: translateX(10px);
+  transform: translateX(10px);
+}
+
 .force-graph-container .graph-tooltip {
-  color: black;
-  background-color: rgba(230, 230, 230, 0.8);
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
   /* opacity: 0.95; */
   backdrop-filter: blur(10px);
@@ -400,4 +469,38 @@ label {
   border-radius: 5px;
   padding-left: 5px;
   padding-right: 5px;
+}
+
+.menu-lightmode, .force-graph-container .menu-lightmode {
+  color: black;
+  background-color: rgba(230, 230, 230, 0.8);
+}
+
+.menu-darkmode, .force-graph-container .menu-darkmode {
+  color: white;
+  background-color: rgba(25, 25, 25, 0.8);
+}
+
+.menu-lightmode svg {
+  stroke: rgb(63, 63, 63);
+}
+
+.menu-darkmode svg {
+  stroke: rgb(192, 192, 192);
+}
+
+.contenttype-lightmode, .menuitem .contenttype-lightmode {
+  color: rgba(120, 120, 120, 0.6);
+}
+
+.contenttype-darkmode, .menuitem .contenttype-darkmode {
+  color: rgba(135, 135, 135, 0.6);
+}
+
+.contenttype-lightmode svg {
+  stroke: rgba(120, 120, 120, 0.6);
+}
+
+.contenttype-darkmode svg {
+  stroke: rgba(135, 135, 135, 0.6);
 }
\ No newline at end of file
diff --git a/editor.html b/editor.html
index 19ae6c2..0730568 100644
--- a/editor.html
+++ b/editor.html
@@ -12,21 +12,21 @@
   <div id="editor">
     <div id="curtain" onclick="closeFileDisplay()"></div> <!--Backdrop behind the file menu-->
     <div id="submenu-backdrop"></div>
-    <div id="mainmenu"> <!--Horizontal bar on top for selecting highlighting modes-->
+    <div id="mainmenu" class="menu-lightmode"> <!--Horizontal bar on top for selecting highlighting modes-->
       <div class="menuitem" onclick="openFileMenu(this)">
         <button>File</button>
         <div id="filemenu" class="submenu" onclick="event.stopPropagation()">
-          <div class="menutop">Undo (Ctrl + Z)</div>
-          <div class="menucenter">Redo (Ctrl + Y)</div>
-          <div class="menucenter">Save (Ctrl + S)</div>
-          <div class="menucenter">Save As</div>
-          <div class="menucenter">Export</div>
-          <div class="menubottom" onclick="openFileDisplay()">Open</div>
+          <div class="menutop menu-lightmode">Undo (Ctrl + Z)</div>
+          <div class="menucenter menu-lightmode">Redo (Ctrl + Y)</div>
+          <div class="menucenter menu-lightmode">Save (Ctrl + S)</div>
+          <div class="menucenter menu-lightmode">Save As</div>
+          <div class="menucenter menu-lightmode">Export</div>
+          <div class="menubottom menu-lightmode" onclick="openFileDisplay()">Open</div>
         </div>
       </div>
       <div class="menuitem" onclick="openViewMenu(this)">
         <button>View</button>
-        <div class="submenu" onclick="event.stopPropagation()">
+        <div class="submenu menu-lightmode" onclick="event.stopPropagation()">
           <div>
             <label for="actor">Highlight actor: </label>
             <select name="actor" id="actor" onchange="selectActor();"></select>
@@ -38,36 +38,86 @@
         </div>
       </div>
       <div class="menuitem" onclick="openSettingsMenu(this)">
-        <button>Settings</button>
-        <div class="submenu">Dark mode, visualisation settings, draw @@init or not, collapse all edges between 2 states, language</div>
+        <button>Settings</button> <!--Main settings menu-->
+        <div class="submenu menu-lightmode" onclick="event.stopPropagation()">
+          <table id="settings-table">
+            <tr>
+              <th colspan="2">
+                General
+              </th>
+            </tr>
+            <tr>
+              <td>
+                <label class="toggle" title="Dark Mode">
+                  <input type="checkbox">
+                  <span class="toggle-slider" onclick="toggleTheme()"></span>
+                </label>
+              </td>
+              <td>
+                Dark Mode
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <label class="toggle" title="Foo">
+                  <input type="checkbox" disabled>
+                  <span class="toggle-slider"></span>
+                </label>
+              </td>
+              <td>
+                Language
+              </td>
+            </tr>
+            <tr>
+              <th colspan="2">
+                Visualisation
+              </th>
+            </tr>
+            <tr>
+              <td>
+                <label class="toggle" title="Foo">
+                  <input type="checkbox" disabled>
+                  <span class="toggle-slider"></span>
+                </label>
+              </td>
+              <td>
+                draw @@init or not, collapse all edges between 2 states
+              </td>
+            </tr>
+          </table>
+          <div>
+          </div>
+          <div>
+          </div>
+        </div>
       </div>
       <div class="menuitem" onclick="openAboutMenu(this)">
         <button>About</button>
-        <div class="submenu">Visualiser & editor for Uni2work workflows</div>
+        <div class="submenu menu-lightmode">Visualiser & editor for Uni2work workflows</div>
       </div>
       <div class="menuitem" onclick="openSearchMenu(this)">
         <button>Search</button>
-        <div class="submenu">Search for states, edges and their contents</div>
+        <div class="submenu menu-lightmode">Search for states, edges and their contents</div>
       </div>
       <div class="menuitem">
-        <button id="filename"></button>
+        <button id="filename" class="contenttype-lightmode"></button>
       </div>
     </div>
-    <div id="sidepanel"> <!--Pop-up panel on the right side for displaying/editing the selected state/action-->
+    <div id="sidepanel" class="menu-lightmode"> <!--Pop-up panel on the right side for displaying/editing the selected state/action-->
       <div id="sideheader">
-        <div id="sidecontentedge" class="sidecontenttype">
+        <div id="sidecontentedge" class="sidecontenttype contenttype-lightmode">
           <svg height="10" width="28" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
-            <circle cx="4" cy="4" r="3" stroke="rgba(120, 120, 120, 0.538)" stroke-width="2" fill="none" />
-            <polyline points="8,4 18,4" style="fill:none;stroke:rgba(120, 120, 120, 0.538);stroke-width:2" stroke-linecap="round" />
-            <circle cx="22" cy="4" r="3" stroke="rgba(120, 120, 120, 0.538)" stroke-width="2" fill="none" /> />
+            <circle cx="4" cy="4" r="3" stroke-width="2" fill="none" />
+            <polyline points="8,4 18,4" style="fill:none;stroke-width:2" stroke-linecap="round" />
+            <circle cx="22" cy="4" r="3" stroke-width="2" fill="none" /> />
           </svg>
           Edge
         </div>
-        <div id="sidecontentnode" class="sidecontenttype">
+        <div id="sidecontentnode" class="sidecontenttype contenttype-lightmode">
           <svg height="10" width="22" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
-            <polyline points="2,4 7,4" style="fill:none;stroke:rgba(120, 120, 120, 0.538);stroke-width:2" stroke-linecap="round" />
-            <circle cx="11" cy="4" r="3" stroke="rgba(120, 120, 120, 0.538)" stroke-width="2" fill="none" />
-            <polyline points="15,4 20,4" style="fill:none;stroke:rgba(120, 120, 120, 0.538);stroke-width:2" stroke-linecap="round" />
+            <polyline points="2,4 7,4" style="fill:none;stroke-width:2" stroke-linecap="round" />
+            <circle cx="11" cy="4" r="3" stroke-width="2" fill="none" />
+            <polyline points="15,4 20,4" style="fill:none;stroke-width:2" stroke-linecap="round" />
           </svg>
           Node
         </div>
@@ -85,7 +135,7 @@
         <button type="submit" onclick="removeSelection()" style="position: absolute; right: 0px;">Delete</button>
       </div>
     </div>
-    <div id="filepanel"> <!--Pop-up panel covering the center of the screen for file interactions-->
+    <div id="filepanel" class="menu-lightmode"> <!--Pop-up panel covering the center of the screen for file interactions-->
       <div id="fileheader">
         <h2 id="fileheading">Hello</h2>
         <svg class="close" height="15" width="15" xmlns="http://www.w3.org/2000/svg" onclick="closeFileDisplay()">
@@ -101,77 +151,77 @@
       </div>
     </div>
     <div id="ctmenubg" class="contextmenu"> <!--Context menu displayed after right-clicking the background-->
-      <div class="menutop" onclick="addState()">
+      <div class="menutop menu-lightmode" onclick="addState()">
         <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
-          <circle cx="5" cy="5" r="4" stroke="rgb(63, 63, 63)" stroke-width="2" fill="none" />
+          <circle cx="5" cy="5" r="4" stroke-width="2" fill="none" />
         </svg>
-        &nbsp;New State
+        &nbsp;&nbsp;New State
       </div>
-      <div class="menubottom">
+      <div class="menubottom menu-lightmode">
         <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
-          <polyline points="1,1 9,9" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
+          <polyline points="1,1 9,9" style="fill:none;stroke-width:2" stroke-linecap="round" />
         </svg>
-        &nbsp;New Edge
+        &nbsp;&nbsp;New Edge
       </div>
     </div>
     <div id="ctmenust" class="contextmenu"> <!--Context menu displayed after right-clicking a state-->
-      <div class="menutop" onclick="markEdgeFrom()">
+      <div class="menutop menu-lightmode" onclick="markEdgeFrom()">
         <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
-          <polyline points="1,1 9,9" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
+          <polyline points="1,1 9,9" style="fill:none;stroke-width:2" stroke-linecap="round" />
         </svg>
-        &nbsp;New Edge from here
+        &nbsp;&nbsp;New Edge from here
       </div>
-      <div class="menucenter" onclick="markEdgeTo()">
+      <div class="menucenter menu-lightmode" onclick="markEdgeTo()">
         <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
-          <polyline points="1,9 9,1" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
+          <polyline points="1,9 9,1" style="fill:none;stroke-width:2" stroke-linecap="round" />
         </svg>
-        &nbsp;New Edge to here
+        &nbsp;&nbsp;New Edge to here
       </div>
-      <div class="menucenter" onclick="rightSelect()">
+      <div class="menucenter menu-lightmode" onclick="rightSelect()">
         <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
-          <polyline points="1,9 9,1" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:4" />
-          <polyline points="1,9 8,2" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
+          <polyline points="1,9 9,1" style="fill:none;stroke-width:4" />
+          <polyline points="1,9 8,2" style="fill:none;stroke-width:2" stroke-linecap="round" />
         </svg>
-        &nbsp;Edit
+        &nbsp;&nbsp;Edit
       </div>
-      <div class="menucenter">
+      <div class="menucenter menu-lightmode">
         <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
-          <rect width="5" height="5" x="1" y="4" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2"/>
-          <polyline points="4,4 4,1 9,1 9,6 5,6" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" />
-          <!-- <polyline points="1,9 8,2" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" /> -->
+          <rect width="5" height="5" x="1" y="4" style="fill:none;stroke-width:2"/>
+          <polyline points="4,4 4,1 9,1 9,6 5,6" style="fill:none;stroke-width:2" />
+          <!-- <polyline points="1,9 8,2" style="fill:none;stroke-width:2" stroke-linecap="round" /> -->
         </svg>
-        &nbsp;Duplicate
+        &nbsp;&nbsp;Duplicate
       </div>
-      <div class="menubottom" onclick="removeRightSelection()">
+      <div class="menubottom menu-lightmode" onclick="removeRightSelection()">
         <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
           <polyline points="1,1 9,9" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
           <polyline points="9,1 1,9" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
         </svg>
-        &nbsp;Delete
+        &nbsp;&nbsp;Delete
       </div>
     </div>
     <div id="ctmenued" class="contextmenu"> <!--Context menu displayed after right-clicking an edge-->
-      <div class="menutop" onclick="rightSelect()">
+      <div class="menutop menu-lightmode" onclick="rightSelect()">
         <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
-          <polyline points="1,9 9,1" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:4" />
-          <polyline points="1,9 8,2" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
+          <polyline points="1,9 9,1" style="fill:none;stroke-width:4" />
+          <polyline points="1,9 8,2" style="fill:none;stroke-width:2" stroke-linecap="round" />
         </svg>
-        &nbsp;Edit
+        &nbsp;&nbsp;Edit
       </div>
-      <div class="menucenter">
+      <div class="menucenter menu-lightmode">
         <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
-          <rect width="5" height="5" x="1" y="4" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2"/>
-          <polyline points="4,4 4,1 9,1 9,6 5,6" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" />
-          <!-- <polyline points="1,9 8,2" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" /> -->
+          <rect width="5" height="5" x="1" y="4" style="fill:none;stroke-width:2"/>
+          <polyline points="4,4 4,1 9,1 9,6 5,6" style="fill:none;stroke-width:2" />
+          <!-- <polyline points="1,9 8,2" style="fill:none;stroke-width:2" stroke-linecap="round" /> -->
         </svg>
-        &nbsp;Duplicate
+        &nbsp;&nbsp;Duplicate
       </div>
-      <div class="menubottom" onclick="removeRightSelection()">
+      <div class="menubottom menu-lightmode" onclick="removeRightSelection()">
         <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
           <polyline points="1,1 9,9" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
           <polyline points="9,1 1,9" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
         </svg>
-        &nbsp;Delete
+        &nbsp;&nbsp;Delete
       </div>
     </div>
     <div id="graph"></div> <!--The graph canvas-->
diff --git a/editor.js b/editor.js
index 884af38..fcbbe68 100644
--- a/editor.js
+++ b/editor.js
@@ -1,5 +1,52 @@
-// Menu bar
+//Theme
+var darkMode = false;
 
+function toggleTheme() {
+  darkMode = !darkMode;
+  console.log('dark mode', darkMode);
+
+  var menus = [mainMenu, sidePanel, filePanel];
+  Array.from(document.getElementsByClassName('menuitem')).forEach(item =>
+    item !== fileMenu &&
+    Array.from(item.getElementsByClassName('submenu')).forEach(subMenu => menus.push(subMenu))
+  );
+  Array.from(fileMenu.children).forEach(child => menus.push(child));
+  Array.from(contextMenuBg.children).forEach(child => menus.push(child));
+  Array.from(contextMenuEd.children).forEach(child => menus.push(child));
+  Array.from(contextMenuSt.children).forEach(child => menus.push(child));
+  Array.from(document.getElementsByClassName('graph-tooltip')).forEach(tooltip => menus.push(tooltip));
+
+  var contentHints = [
+    document.getElementById('filename'),
+    document.getElementById('sidecontentedge'),
+    document.getElementById('sidecontentnode')
+  ];
+
+  if (darkMode) {
+    menus.forEach(target => {
+      target.classList.add('menu-darkmode');
+      target.classList.remove('menu-lightmode');
+    });
+    contentHints.forEach(hint => {
+      hint.classList.add('contenttype-darkmode');
+      hint.classList.remove('contenttype-lightmode');
+    });
+    wfGraph.backgroundColor('black');
+  } else {
+    menus.forEach(target => {
+      target.classList.add('menu-lightmode');
+      target.classList.remove('menu-darkmode');
+    });
+    contentHints.forEach(hint => {
+      hint.classList.add('contenttype-lightmode');
+      hint.classList.remove('contenttype-darkmode');
+    });
+    wfGraph.backgroundColor('white');
+  }
+}
+
+// Menu bar
+const mainMenu = document.getElementById('mainmenu');
 var selectedMenuItem = null;
 
 /**
@@ -181,6 +228,9 @@ fetch('http://localhost:8080/index.json')
     for (var key in data) 
       workflow[key] = data[key];
     wfGraph(document.getElementById('graph')).graphData({nodes: workflow.states, links: workflow.actions});
+    Array.from(document.getElementsByClassName('graph-tooltip')).forEach(tooltip =>
+      tooltip.classList.add('menu-lightmode')
+    );
     runnn();
   });
 
@@ -245,6 +295,7 @@ const sideButtons  = document.getElementById('sidebuttons');
 const sideInfoEdge = document.getElementById('sidecontentedge');
 const sideInfoNode = document.getElementById('sidecontentnode');
 //File panel
+const fileMenu    = document.getElementById('filemenu');
 const filePanel   = document.getElementById('filepanel');
 const fileHeading = document.getElementById('fileheading');
 const fileContent = document.getElementById('filecontent');
@@ -674,10 +725,12 @@ function runnn() {
 
 const edgeColourDefault = '#999999ff';
 const edgeColourSelected = '#000000ff';
+const edgeColourSelectedDarkMode = '#ffffffff';
 const edgeColourHighlightDefault = '#6ed4d4';
 const edgeColourHighlightSelected = 'magenta';
 const edgeColourSubtleDefault = '#99999955';
 const edgeColourSubtleSelected = '#00000055';
+const edgeColourSubtleSelectedDarkMode = '#ffffff55';
 const edgeColourMostSubtle = '#99999944';
 
 /**
@@ -724,9 +777,11 @@ function getEdgeColour(edge) {
   } else if (selectedViewer.value !== NO_VIEWER && !isHighlightedViewerEdge(edge)) {
     return isSelected ? edgeColourSubtleDefault : edgeColourMostSubtle;
   } else if (selectedActor.value !== NO_ACTOR) {
-    return isSelected ? edgeColourSubtleSelected : edgeColourSubtleDefault;
+    return isSelected ? (darkMode ? edgeColourSubtleSelectedDarkMode : edgeColourSubtleSelected)
+                      : edgeColourSubtleDefault;
   } else {
-    return isSelected ? edgeColourSelected : edgeColourDefault;
+    return isSelected ? (darkMode ? edgeColourSelectedDarkMode : edgeColourSelected)
+                      : edgeColourDefault;
   }
 }
   wfGraph
@@ -807,7 +862,7 @@ function getEdgeColour(edge) {
       context.translate(textPos.x, textPos.y);
       context.rotate(textAngle);
 
-      context.fillStyle = 'rgba(255, 255, 255, 0.8)';
+      context.fillStyle = darkMode ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)';
       context.fillRect(- bckgDimensions[0] / 2, - bckgDimensions[1] / 2, ...bckgDimensions);
 
       context.textAlign = 'center';
@@ -819,7 +874,7 @@ function getEdgeColour(edge) {
     .linkLineDash(edge => edge.actionData.mode == 'automatic' && [2, 3]) //[dash, gap]
     .linkWidth(edge => (((edge === selection || edge === rightSelection) ? 2 : 0) + (isHighlightedActorEdge(edge) || isHighlightedViewerEdge(edge)) ? 4 : 1))
     .linkDirectionalParticles(2)
-    .linkDirectionalParticleColor(() => '#00000055')
+    .linkDirectionalParticleColor(() => darkMode ? '#ffffff55' : '#00000055')
     .linkDirectionalParticleWidth(edge => (isHighlightedActorEdge(edge)) ? 3 : 0)
     .nodeCanvasObject((node, ctx) => {
       ctx.fillStyle = getNodeColour(node);
@@ -827,7 +882,7 @@ function getEdgeColour(edge) {
       ctx.arc(node.x, node.y, 2*node.val, 0, 2 * Math.PI, false);
       ctx.fill();
       if (node === selection || node === rightSelection) {
-        ctx.strokeStyle = 'black';
+        ctx.strokeStyle = darkMode ? 'white' : 'black';
         ctx.lineWidth = 1;
         ctx.setLineDash([1, 2]);
         ctx.lineCap = 'round';