src/_locales/de/messages.json

@@ -302,5 +302,9 @@
 	"disabledhere": {
 		"message": "Deaktiviert auf dieser Seite",
 		"description": "You have disabled the rules on this site"
+	},
+	"settingsdescriptiondarkmode": {
+		"message": "Dunkles Design",
+		"description": "Toggle dark mode"
 	}
 }

src/_locales/en/messages.json

@@ -302,5 +302,9 @@
 	"disabledhere": {
 		"message": "Disabled on this site",
 		"description": "You have disabled the rules on this site"
+	},
+	"settingsdescriptiondarkmode": {
+		"message": "Dark mode",
+		"description": "Toggle dark mode"
 	}
 }

src/_locales/fr/messages.json

@@ -302,5 +302,9 @@
 	"disabledhere": {
 		"message": "Désactivés sur cette page",
 		"description": "You have disabled the rules on this site"
+	},
+	"settingsdescriptiondarkmode": {
+		"message": "Mode sombre",
+		"description": "Toggle dark mode"
 	}
 }

src/css/dark.css

@@ -0,0 +1,26 @@
+html {
+	background-color: black;
+	color: white;
+}
+
+#statstable {
+	background-color: #333;
+}
+
+#connectionsblockeddiv {
+	color: red;
+}
+
+.btn-red {
+	color: white;
+	background-color: #cf0202;
+}
+
+.btn-red:hover {
+	background-color: #b30606;
+}
+
+.md_switch [type="checkbox"]:checked + .md_switch__toggle::before,
+.md_switch [type="checkbox"]:checked + .md_switch__toggle::after {
+	background: #02b7a4;
+}

src/css/popup2.css

@@ -147,6 +147,15 @@ html, body {
 	background-color: #f5f5f5;
 }
 
+.btn-dark {
+	color: white;
+	background-color: #333;
+}
+
+.btn-dark:hover {
+	background-color: #444;
+}
+
 .badge {
 	padding-left: 4px;
 	padding-right: 4px;

src/images/true-red-ban.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   aria-hidden="true"
+   focusable="false"
+   role="img"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg1569"
+   sodipodi:docname="true-red-ban.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata1575">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs1573" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     id="namedview1571"
+     showgrid="false"
+     inkscape:zoom="0.4609375"
+     inkscape:cx="-457.76271"
+     inkscape:cy="75.932208"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1569" />
+  <path
+     d="M256 8C119.034 8 8 119.033 8 256s111.034 248 248 248 248-111.034 248-248S392.967 8 256 8zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676zM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676z"
+     id="path1567"
+     style="fill:#ff0000;fill-opacity:1" />
+</svg>

src/js/popup/popup.js

@@ -23,6 +23,30 @@
     Home: https://notabug.org/nipos/cloud-firewall
 */
 
+browser.storage.local.get('darkModeEnabled').then(gotTheme);
+
+function gotTheme(item){
+	var darkmode = JSON.parse(`${item.darkModeEnabled}`);
+	if(darkmode == true){
+		addCSS('css/dark.css');
+		$('#connectionsblockedicon').attr('src', 'images/true-red-ban.svg');
+		$('#titlelogo').attr('src', 'images/shield-light.svg');
+		$('.btn-light').addClass('btn-dark');
+		$('.btn-light').removeClass('btn-light');
+	}
+}
+
+// Include CSS file
+function addCSS(filename){
+ var head = document.getElementsByTagName('head')[0];
+
+ var style = document.createElement('link');
+ style.href = filename;
+ style.type = 'text/css';
+ style.rel = 'stylesheet';
+ head.append(style);
+}
+
 window.CSONStringify = module.exports;
 var PopupApp = window.PopupApp || {};
 PopupApp.storage = chrome.storage.local;

src/js/settings/registerListeners.js

@@ -31,6 +31,9 @@ window.onload = function() {
 */
   document.addEventListener("click", App.settingsApp.listenForClicks);
   document
+    .getElementById("toggleTheme")
+    .addEventListener("keyup", App.keyUpListener);
+  document
     .getElementById("toggleOperationMode")
     .addEventListener("keyup", App.keyUpListener);
   document
@@ -92,6 +95,9 @@ App.keyUpListener = function(e) {
       case "toggleLogging":
         App.settingsApp.toggleLogging();
         break;
+	  case "toggleTheme":
+		App.settingsApp.toggleTheme();
+		break;
       case "toggleOperationMode":
         App.settingsApp.toggleOperationMode();
         break;
@@ -136,6 +142,9 @@ App.settingsApp.listenForClicks = function(e) {
     case "doFactoryReset":
       App.settingsApp.doFactoryReset();
       break;
+	case "toggleTheme":
+      App.settingsApp.toggleTheme();
+      break;
     case "toggleOperationMode":
       App.settingsApp.toggleOperationMode();
       break;

src/js/settings/settingspage.js

@@ -273,6 +273,24 @@ App.settingsApp.toggleNotifications = function() {
   );
 };
 
+darkModeEnabled = false;
+chrome.storage.local.get({ darkModeEnabled: false }, function(obj) {
+  darkModeEnabled = obj.darkModeEnabled;
+  document.getElementById("toggleTheme").checked = darkModeEnabled;
+});
+
+App.settingsApp.toggleTheme = function() {
+  chrome.storage.local.set(
+    { darkModeEnabled: !darkModeEnabled },
+    function() {
+      darkModeEnabled = !darkModeEnabled;
+      document.getElementById(
+        "toggleTheme"
+      ).checked = darkModeEnabled;
+    }
+  );
+};
+
 App.settingsApp.logging = false;
 
 App.settingsApp.toggleEncryption = function(password) {