rework darkmode to use a switch on the body

SongStitch · Aug 1, 2023 · 6c02b0b · 6c02b0b
1 parent 14fac45
commit 6c02b0b
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 103 deletions.
diff --git a/ui/src/App.svelte b/ui/src/App.svelte
@@ -13,4 +13,18 @@
 </main>
 
 <style>
+  :global(body.dark-mode) {
+    background-color: #202124;
+    opacity: 1;
+    background-image: radial-gradient(
+        #5d5d5d 0.6000000000000001px,
+        transparent 0.6000000000000001px
+      ),
+      radial-gradient(
+        #5d5d5d 0.6000000000000001px,
+        #202124 0.6000000000000001px
+      );
+    background-size: 24px 24px;
+    background-position: 0 0, 12px 12px;
+  }
 </style>
diff --git a/ui/src/lib/DarkMode.svelte b/ui/src/lib/DarkMode.svelte
@@ -1,66 +1,16 @@
 <script>
   import { onMount } from 'svelte';
-  import logo from '../assets/images/songstitch_logo.png';
-  import logoDark from '../assets/images/songstitch_logo_dark.png';
   import darkModeIcon from '../assets/images/dark_mode.png';
-  let darkMode = localStorage.getItem('darkMode') === 'true';
-
-  function toggleClassByClassname(className) {
-    var elements = document.getElementsByClassName(className);
-    for (var i = 0; i < elements.length; i++) {
-      elements[i].classList.toggle('dark-mode');
-    }
-  }
+  import { darkMode } from '../stores';
 
   function applyDarkMode() {
-    document.body.classList.toggle('dark-mode');
-    document.querySelector('html').classList.toggle('dark-mode');
-    document.getElementsByTagName('dialog')[0].classList.toggle('dark-mode');
-    document.getElementsByTagName('fieldset')[0].classList.toggle('dark-mode');
-    document.querySelector('#app > main > form').classList.toggle('dark-mode');
-
-    const selectElements = document.getElementsByTagName('select');
-    const labelElements = document.getElementsByTagName('label');
-    const headerImg = document.querySelector('.header-img');
-    headerImg.classList.toggle('dark-mode');
-    headerImg.src = darkMode ? logoDark : logo;
-
-    const classNames = [
-      'subheading',
-      'footer-text',
-      'username',
-      'number-input',
-      'nonbold',
-      'href-links',
-      'btn-grad',
-      'btn-grad-embed',
-      'reset-text',
-      'appstore-icon',
-      'gh-footer',
-      'dvanced-option-label',
-      'darkmode-icon-img',
-      'loader-container',
-    ];
-
-    classNames.forEach((className) => toggleClassByClassname(className));
-
-    Array.from(selectElements).forEach((selectElement) => {
-      selectElement.classList.toggle('dark-mode');
-      const optionElements = selectElement.getElementsByTagName('option');
-      Array.from(optionElements).forEach((optionElement) => {
-        optionElement.classList.toggle('dark-mode');
-      });
-    });
-
-    Array.from(labelElements).forEach((labelElement) => {
-      labelElement.classList.toggle('dark-mode');
-    });
-
+    window.document.body.classList.toggle('dark-mode');
     localStorage.setItem('darkMode', darkMode.toString());
   }
 
   function toggle() {
-    darkMode = !darkMode;
+    $darkMode = !$darkMode;
+    console.log($darkMode);
     applyDarkMode();
   }
 
@@ -101,39 +51,6 @@
     height: auto;
   }
 
-  :global(:root.dark-mode) {
-    background-color: #202124;
-    opacity: 1;
-    background-image: radial-gradient(
-        #5d5d5d 0.6000000000000001px,
-        transparent 0.6000000000000001px
-      ),
-      radial-gradient(
-        #5d5d5d 0.6000000000000001px,
-        #202124 0.6000000000000001px
-      );
-    background-size: 24px 24px;
-    background-position: 0 0, 12px 12px;
-  }
-
-  :global(.footer-text.dark-mode) {
-    color: #bfc2c7;
-  }
-  :global(
-      .subheading.dark-mode,
-      .href-links.dark-mode,
-      label.dark-mode,
-      option.dark-mode,
-      .username.dark-mode,
-      .number-input.dark-mode,
-      .nonbold.dark-mode,
-      .reset-text.dark-mode,
-      .advanced-option-label.dark-mode
-    ) {
-    background-color: #202124 !important;
-    color: #bfc2c7 !important;
-  }
-
   :global(dialog.dark-mode) {
     background-color: #202124;
     color: #bfc2c7;
@@ -160,12 +77,6 @@
     filter: invert(1);
   }
 
-  :global(form.dark-mode) {
-    background-color: #202124 !important;
-    color: #bfc2c7 !important;
-    box-shadow: 0 0 2px #bfc2c7;
-  }
-
   :global(input.dark-mode) {
     mix-blend-mode: exclusion;
   }

diff --git a/ui/src/lib/Footer.svelte b/ui/src/lib/Footer.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
   import appstore_icon from '../assets/images/appstore_icon.png';
-  import KofiWidget from './components/KofiWidget.svelte';
-
   let random = Math.random();
   let names = ['BradLewis', 'TheDen'];
   if (random > 0.5) {
@@ -10,9 +8,6 @@
 </script>
 
 <div class="footer">
-  <div class="kofi-container">
-    <KofiWidget />
-  </div>
   <p class="appstore-container">
     <a
       href="https://apps.apple.com/au/app/songstitch/id6450189672"
@@ -94,12 +89,12 @@
     text-align: center;
     text-align: -webkit-center;
   }
-  .kofi-container {
-    padding-top: 2em;
-  }
   .appstore-icon {
     height: 50px;
   }
+  .appstore-container {
+    padding-top: 1em;
+  }
   a.href-links:link {
     color: black;
   }
@@ -151,4 +146,7 @@
   .lastfm-footer {
     margin-top: 0;
   }
+  :global(body.dark-mode) .footer-text {
+    color: #bfc2c7 !important;
+  }
 </style>
diff --git a/ui/src/lib/Form.svelte b/ui/src/lib/Form.svelte
@@ -492,4 +492,51 @@
     width: fit-content;
     color: black;
   }
+
+  :global(body.dark-node) .subheading,
+  .href-links,
+  label,
+  option,
+  .username,
+  .number-input,
+  .nonbold,
+  .reset-text,
+  .advanced-option-label {
+    background-color: #202124 !important;
+    color: #bfc2c7 !important;
+  }
+  :global(body.dark-mode) form {
+    background-color: #202124 !important;
+    color: #bfc2c7 !important;
+    box-shadow: 0 0 2px #bfc2c7;
+  }
+
+  :global(body.dark-mode) fieldset {
+    background-color: #202124;
+    color: #bfc2c7;
+    border: none;
+    box-shadow: 0 0 2px #bfc2c7;
+  }
+
+  :global(body.dark-mode) .btn-grad,
+  .btn-grad-embed {
+    box-shadow: none;
+  }
+
+  :global(body.dark-mode) .appstore-icon,
+  .gh-footer,
+  .darkmode-icon-img,
+  .loader-container {
+    filter: invert(1);
+  }
+
+  :global(body.dark-mode) input {
+    mix-blend-mode: exclusion;
+  }
+
+  :global(body.dark-mode) select {
+    background-color: #202124 !important;
+    color: #bfc2c7 !important;
+    mix-blend-mode: exclusion;
+  }
 </style>
diff --git a/ui/src/lib/Header.svelte b/ui/src/lib/Header.svelte
@@ -1,11 +1,13 @@
-<script>
+<script lang="ts">
   import logo from '../assets/images/songstitch_logo.png';
+  import darkmodeLogo from '../assets/images/songstitch_logo_dark.png';
+  import { darkMode } from '../stores';
 </script>
 
 <div class="header-img-container" id="top">
   <a class="img-link" href="/">
     <img
-      src={logo}
+      src={$darkMode ? darkmodeLogo : logo}
       class="header-img"
       alt="SongStitch Logo"
       width="418"
@@ -41,4 +43,16 @@
     color: unset;
     background: none;
   }
+  :global(body.dark-node) .subheading,
+  .href-links,
+  label,
+  option,
+  .username,
+  .number-input,
+  .nonbold,
+  .reset-text,
+  .advanced-option-label {
+    background-color: #202124 !important;
+    color: #bfc2c7 !important;
+  }
 </style>
diff --git a/ui/src/lib/components/Checkbox.svelte b/ui/src/lib/components/Checkbox.svelte
@@ -145,4 +145,16 @@
   .checkbox-wrapper {
     padding-top: 1em;
   }
+  :global(body.dark-node) .subheading,
+  .href-links,
+  label,
+  option,
+  .username,
+  .number-input,
+  .nonbold,
+  .reset-text,
+  .advanced-option-label {
+    background-color: #202124 !important;
+    color: #bfc2c7 !important;
+  }
 </style>
diff --git a/ui/src/lib/components/Modal.svelte b/ui/src/lib/components/Modal.svelte
@@ -153,4 +153,9 @@
     background-color: #b3b3b3;
     opacity: 0.8;
   }
+  :global(body.dark-mode) dialog {
+    background-color: #202124;
+    color: #bfc2c7;
+    border: solid 1px #bfc2c7 !important;
+  }
 </style>
diff --git a/ui/src/lib/components/NumberInput.svelte b/ui/src/lib/components/NumberInput.svelte
@@ -71,4 +71,9 @@
     border-color: red;
     contain: inline-size;
   }
+  :global(body.dark-mode) .number-input {
+    background-color: #202124;
+    color: #bfc2c7;
+    border: solid 1px #bfc2c7 !important;
+  }
 </style>