Adding dark mode

bratFastMode.css

@@ -10,21 +10,22 @@
 
 /* Button UI style */
 
-#bratFastModeUI {
+#bratFastModeUI, #bratDarkMode {
     float: right;
     cursor: pointer;
     font-size: 0.7em;
     padding: 3px;
     color: white;
     border-radius: 5px;
+    margin-left: 1px;
 }
 
-#bratFastModeUI.desactivate {
+#bratFastModeUI.desactivate, #bratDarkMode.desactivate {
     background-color: #940000;
     border: solid 1px #b30101;
 }
 
-#bratFastModeUI.activate {
+#bratFastModeUI.activate, #bratDarkMode.activate {
     background-color: #0e7b21;
     border: solid 1px #025d15;
 }
@@ -42,4 +43,21 @@
     fill: #ffa604;
     text-decoration: underline;
     font-weight: bold;
+}
+
+/*
+    Dark Mode
+*/
+
+.svg_dark .background0 {
+    fill: #040404;
+}
+
+.svg_dark .background1 {
+    fill: #3c3838;
+}
+
+.svg_dark {
+    fill: white;
+    background: black;
 }

bratFastMode.js

@@ -117,7 +117,7 @@ function SelectText(text) {
 }
 
 function triggerLabel (e) {
-    if (["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","z","s","t","u","v","w","x","y","z"].indexOf(e.key) != -1) {
+    if (["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","z","s","t","u","v","w","x","y","z","0","1","2","3","4","5","6","7","8","9"].indexOf(e.key) != -1) {
 
         // Simulate click
         node = document.querySelector("tspan[data-chunk-id='"+word_id+"']")
@@ -220,6 +220,7 @@ function inactivateButton (buttonElement) {
     if (typeof(observer) != 'undefined') {
         observer.disconnect()
     }
+    document.removeEventListener("keyup", triggerLabel)
 }
 
 // Button initiation
@@ -243,4 +244,66 @@ buttonNode.addEventListener("click", function(e) {
     } else {
         activateButton(node);
     }
+})
+
+// Dark mode
+
+//// Creating dark mode UI button
+
+// Functions relative to the button
+
+function activateDM (buttonElement) {
+
+    // Set has activate
+    buttonElement.setAttribute("activate", true)
+
+    // Change button class
+    buttonElement.classList.add("activate")
+    buttonElement.classList.remove("desactivate")
+
+    darkMode_trigger(true);
+}
+
+function inactivateDM (buttonElement) {
+    // Set has activate
+    buttonElement.setAttribute("activate", false)
+
+    // Change button class
+    buttonElement.classList.remove("activate")
+    buttonElement.classList.add("desactivate")
+
+    darkMode_trigger(false);
+}
+
+function darkMode_trigger (dm_state) {
+    // New CSS rules
+
+    // Initiate observer
+    if (dm_state == true) {
+        document.getElementById("svg").classList.add("svg_dark")
+    } else {
+        document.getElementById("svg").classList.remove("svg_dark")
+    }
+}
+
+var darkModeName = "DM";
+var darkModeId = "bratDarkMode";
+
+var darkMode = document.createElement("div");
+var nextNode = document.getElementById("bratFastModeUI");
+nextNode.parentNode.insertBefore(darkMode, nextNode)
+
+darkMode.id = darkModeId;
+darkMode.textContent = darkModeName;
+darkMode.classList.add("unselectable");
+inactivateDM(darkMode);
+
+darkMode.addEventListener("click", function(e) {
+    var node = e.target;
+
+    if (node.attributes.activate.value == "true") {
+        inactivateDM(darkMode);
+    } else {
+        activateDM(darkMode);
+    }
 })