Remove dark mode

The dark mode is a non-essential feature, which keeps causing style bugs

client/index.html

@@ -43,11 +43,6 @@
                 <use xlink:href="#info-outline" />
             </svg>
         </a>
-        <a href="#" id="theme" class="icon-button" title="Switch Darkmode/Lightmode" >
-            <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" />
@@ -207,14 +202,10 @@
             <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 24 24">
-         <rect fill="none" height="24" width="24"/><path d="M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36c-0.98,1.37-2.58,2.26-4.4,2.26 c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/>
-        </symbol>
     </svg>
     <!-- Scripts -->
     <script src="scripts/network.js"></script>
     <script src="scripts/ui.js"></script>
-    <script src="scripts/theme.js" async></script>
     <script src="scripts/clipboard.js" async></script>
     <!-- Sounds -->
     <audio id="blop" autobuffer="true">

client/scripts/theme.js

@@ -1,37 +0,0 @@
-(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/scripts/ui.js

@@ -596,7 +596,7 @@ Events.on('load', () => {
 
     function drawCircle(radius) {
         ctx.beginPath();
-        let color = Math.round(255 * (1 - radius / Math.max(w, h)));
+        let color = Math.round(197 * (1 - radius / Math.max(w, h)));
         ctx.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)';
         ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
         ctx.stroke();

client/service-worker.js

@@ -6,7 +6,6 @@ var urlsToCache = [
   'scripts/network.js',
   'scripts/ui.js',
   'scripts/clipboard.js',
-  'scripts/theme.js',
   'sounds/blop.mp3',
   'images/favicon-96x96.png'
 ];

client/styles.css

@@ -4,7 +4,9 @@
     --icon-size: 24px;
     --primary-color: #4285f4;
     --peer-width: 120px;
-    color-scheme: light dark;
+    --text-color: #333;
+    --bg-color: #fafafa;
+    --bg-color-secondary: #f1f3f4;
 }
 
 /* Layout */
@@ -691,17 +693,10 @@ screen and (min-width: 1100px) {
 /* Default colors */
 body {
     --text-color: #333;
-    --bg-color: #fff;
+    --bg-color: #fafafa;
     --bg-color-secondary: #f1f3f4;
 }
 
-/* Dark theme colors */
-body.dark-theme {
-    --text-color: #eee;
-    --bg-color: #121212;
-    --bg-color-secondary: #333;
-}
-
 /* Colored Elements */
 body {
     color: var(--text-color);
@@ -724,26 +719,6 @@ x-dialog x-paper {
     display: block;
 }
 
-
-/* Styles for users who prefer dark mode at the OS level */
-@media (prefers-color-scheme: dark) {
-
-    /* defaults to dark theme */
-    body {
-        --text-color: #eee;
-        --bg-color: #121212;
-        --bg-color-secondary: #333;
-    }
-
-    /* Override dark mode with light mode styles if the user decides to swap */
-    body.light-theme {
-        --text-color: #333;
-        --bg-color: #fafafa;
-        --bg-color-secondary: #f1f3f4;
-    }
-}
-
-
 /* 
     Edge specific styles
 */