dark mode and improved network coloring

index.html

@@ -7,13 +7,13 @@
         <script type="text/javascript" src="vis-network.min.js"></script>
         <script type="text/javascript" src="simhelper.js"></script>
         <script type="text/javascript" src="CompleteMoveOnEdge.js"></script>
-        <link rel="stylesheet" href="style.css">
+        <link rel="stylesheet" id="styleSheet" href="style.css">
     </head>
     <body>
         <div id="rowFlex" style="display: flex; flex-direction: row; align-items: start; justify-content: center; width: 100%; height: 100%;">
             <div id="propertyViewer">
                 <div id="propertyViewerHeader">Simulation Properties</div>
-                <hr/>
+                <hr style="width: 100%;"/>
                 <details id="simpleSettings">
                     <summary>Simple Settings</summary>
                     <div id="simpleSettingsContent">
@@ -43,6 +43,12 @@
                         <input type="number" id="simSpeed" value="1" min="0.1" step="0.1" autocomplete="off">
                     </div>
                 </details>
+                <div style="display: flex; flex-grow: 1; height: auto;"></div>
+                <hr style="width: 100%;"/>
+                <div id="darkModeContainer">
+                    <input type="checkbox" id="darkMode" class="simToggle">
+                    <label for="darkMode">Dark Mode</label>
+                </div>
             </div>
             <div id="centerColumn" style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70%; height: 100%; margin: 0 auto;">
                 <div id="simContainer"></div>