Dark Mode Supported

client/index.html

@@ -8,6 +8,7 @@
     <title>Snapdrop</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <meta name="theme-color" content="#3367d6">
+    <meta name="color-scheme" content="dark light">
     <meta name="apple-mobile-web-app-capable" content="no">
     <meta name="apple-mobile-web-app-title" content="Snapdrop">
     <!-- Descriptions -->
@@ -39,6 +40,11 @@
                 <use xlink:href="#info-outline" />
             </svg>
         </a>
+        <a href="#" id="theme" class="icon-button" title="Change Theme" >
+            <svg class="icon">
+                <use xlink:href="#icon-theme" />
+            </svg>
+        </a>
         <a href="#" id="notification" class="icon-button" title="Enable Notifications" hidden>
             <svg class="icon">
                 <use xlink:href="#notifications" />
@@ -191,9 +197,13 @@
             <path d="M0 0h24v24H0z" fill="none" />
             <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z" />
         </symbol>
+        <symbol id="icon-theme" viewBox="0 0 40 40">
+          <circle cx="20" cy="20" r="16"/>
+        </symbol>
     </svg>
     <!-- Scripts -->
     <script src="scripts/network.js"></script>
+    <script src="scripts/theme.js"></script>
     <script src="scripts/ui.js"></script>
     <!-- Sounds -->
     <audio id="blop" autobuffer="true">

client/scripts/theme.js

@@ -0,0 +1,37 @@
+(function(){
+  
+  // Select the button
+  const btnTheme = document.getElementById("theme");
+  // Check for dark mode preference at the OS level
+  const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
+  

+  // Get the user's theme preference from local storage, if it's available
+  const currentTheme = localStorage.getItem("theme");
+  // If the user's preference in localStorage is dark...
+  if (currentTheme == "dark") {
+    // ...let's toggle the .dark-theme class on the body
+    document.body.classList.toggle("dark-theme");
+  // Otherwise, if the user's preference in localStorage is light...
+  } else if (currentTheme == "light") {
+    // ...let's toggle the .light-theme class on the body
+    document.body.classList.toggle("light-theme");
+  }
+  

+  // Listen for a click on the button 
+  btnTheme.addEventListener("click", function() {
+    // If the user's OS setting is dark and matches our .dark-theme class...
+    if (prefersDarkScheme.matches) {
+      // ...then toggle the light mode class
+      document.body.classList.toggle("light-theme");
+      // ...but use .dark-theme if the .light-theme class is already on the body,
+      var theme = document.body.classList.contains("light-theme") ? "light" : "dark";
+    } else {
+      // Otherwise, let's do the same thing, but for .dark-theme
+      document.body.classList.toggle("dark-theme");
+      var theme = document.body.classList.contains("dark-theme") ? "dark" : "light";
+    }
+    // Finally, let's save the current preference to localStorage to keep using it
+    localStorage.setItem("theme", theme);
+  });
+
+})();

client/styles.css

@@ -4,6 +4,7 @@
     --icon-size: 24px;
     --primary-color: #4285f4;
     --peer-width: 120px;
+    color-scheme: light dark; /* both supported */
 }
 
 
@@ -77,9 +78,7 @@ header {
 /* Typography */
 
 body {
-    background: #fafafa;
     font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    color: #333;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
@@ -456,7 +455,6 @@ input {
     border: none;
     outline: none;
     padding: 16px 24px;
-    background: #f1f3f4;
     border-radius: 50px;
     margin: 8px 0;
     line-height: 16px;
@@ -638,3 +636,58 @@ screen and (min-width: 1100px) {
         content: attr(mobile);
     }
 }
+
+/* Default colors */
+body {
+  --text-color: #333;
+  color: #333;
+
+  --bkg-color: #fafafa;
+  background-color: #fafafa;
+}
+/* Dark theme colors */
+body.dark-theme {
+  --text-color: #eee;
+  color: #eee;
+
+  --bkg-color: #121212;
+  background-color: #121212;
+}
+
+/* Styles for users who prefer dark mode at the OS level */
+@media (prefers-color-scheme: dark) {
+  /* defaults to dark theme */
+  body {
+    --text-color: #eee;
+    color: #eee;
+    --bkg-color: #121212;
+    background-color: #121212;
+  }
+  x-dialog x-paper {
+    --bkg-color: #333;
+    background-color: #333;
+  }
+  input {
+    --text-color: #eee;
+    color: #eee;
+    --bkg-color: #121212;
+    background-color: #121212;
+  }
+  /* Override dark mode with light mode styles if the user decides to swap */
+  body.light-theme {
+    --text-color: #333;
+    color: #333;
+    --bkg-color: #fafafa;
+    background-color: #fafafa;
+  }
+  body.light-theme x-dialog x-paper {
+    --bkg-color: #fff;
+    background-color: #fff;
+  }
+  body.light-theme input {
+    --text-color: #333;
+    color: #333;
+    --bkg-color: #f1f3f4;
+    background: #f1f3f4;
+  }
+}