add dark mode toggle button on main popup

ken107 · Jan 18, 2024 · 459f65e · 459f65e
1 parent ceccf28
commit 459f65e
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 13 deletions.
diff --git a/css/popup.css b/css/popup.css
@@ -85,14 +85,19 @@ body:not(.is-popup) #highlight {
 #toolbar .btn-group {
   display: flex;
 }
-#toolbar .btn-group:last-child {
-  margin-left: auto;
+#toolbar .btn-group:first-child {
+  margin-right: auto;
+}
+#toolbar .btn-group:nth-child(2) {
+  margin-right: .25rem;
 }
 #toolbar .btn-group .btn:first-child {
-  border-radius: .5rem 0 0 .5rem;
+  border-top-left-radius: .5rem;
+  border-bottom-left-radius: .5rem;
 }
 #toolbar .btn-group .btn:last-child {
-  border-radius: 0 .5rem .5rem 0;
+  border-top-right-radius: .5rem;
+  border-bottom-right-radius: .5rem;
 }
 #toolbar .btn {
   position: relative;

diff --git a/js/defaults.js b/js/defaults.js
@@ -43,13 +43,26 @@ var defaults = {
 var getSingletonAudio = lazy(() => new Audio());
 var getSilenceTrack = lazy(() => makeSilenceTrack())
 
-//if extension page but not service worker
-if (typeof brapi.commands != "undefined" && typeof window != "undefined") {
-  //setup dark mode
-  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    document.addEventListener("DOMContentLoaded", function() {
-      document.body.classList.add("dark-mode")
-    })
+setupDarkMode()
+
+
+
+
+async function setupDarkMode() {
+  //if extension page but not service worker
+  if (typeof brapi.commands != "undefined" && typeof window != "undefined") {
+    const [{darkMode}] = await Promise.all([
+      getSettings(["darkMode"]),
+      new Promise(f => document.addEventListener("DOMContentLoaded", f))
+    ])
+    if (typeof darkMode == "boolean") {
+      document.body.classList.toggle("dark-mode", darkMode)
+    }
+    else {
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.body.classList.add("dark-mode")
+      }
+    }
   }
 }
 
@@ -82,7 +95,7 @@ function parseQueryString(search) {
  */
 function getSettings(names) {
   return new Promise(function(fulfill) {
-    brapi.storage.local.get(names || ["voiceName", "rate", "pitch", "volume", "showHighlighting", "languages", "highlightFontSize", "highlightWindowSize", "preferredVoices", "useEmbeddedPlayer", "fixBtSilenceGap"], fulfill);
+    brapi.storage.local.get(names || ["voiceName", "rate", "pitch", "volume", "showHighlighting", "languages", "highlightFontSize", "highlightWindowSize", "preferredVoices", "useEmbeddedPlayer", "fixBtSilenceGap", "darkMode"], fulfill);
   });
 }
 
@@ -94,7 +107,7 @@ function updateSettings(items) {
 
 function clearSettings(names) {
   return new Promise(function(fulfill) {
-    brapi.storage.local.remove(names || ["voiceName", "rate", "pitch", "volume", "showHighlighting", "languages", "highlightFontSize", "highlightWindowSize", "preferredVoices", "useEmbeddedPlayer", "fixBtSilenceGap"], fulfill);
+    brapi.storage.local.remove(names || ["voiceName", "rate", "pitch", "volume", "showHighlighting", "languages", "highlightFontSize", "highlightWindowSize", "preferredVoices", "useEmbeddedPlayer", "fixBtSilenceGap", "darkMode"], fulfill);
   });
 }
 

diff --git a/js/popup.js b/js/popup.js
@@ -25,6 +25,7 @@ $(function() {
   $("#increase-font-size").click(changeFontSize.bind(null, +1));
   $("#decrease-window-size").click(changeWindowSize.bind(null, -1));
   $("#increase-window-size").click(changeWindowSize.bind(null, +1));
+  $("#toggle-dark-mode").click(toggleDarkMode);
 
   updateButtons()
     .then(getSettings.bind(null, ["showHighlighting", "readAloudTab"]))
@@ -306,3 +307,8 @@ function showAnnouncement(ann) {
       updateSettings({announcement: ann});
     })
 }
+
+function toggleDarkMode() {
+  const darkMode = document.body.classList.toggle("dark-mode")
+  updateSettings({darkMode})
+}
diff --git a/popup.html b/popup.html
@@ -36,6 +36,11 @@
         A+
       </button>
     </div>
+    <div class="btn-group">
+      <button id="toggle-dark-mode" type="button" class="btn btn-sm btn-light">
+        <i class="material-icons">dark_mode</i>
+      </button>
+    </div>
     <div class="btn-group window-size">
       <button id="decrease-window-size" type="button" class="btn btn-sm btn-light">
         <i class="material-icons">remove</i>