refactor

SongStitch · Aug 4, 2023 · f22c0cf · f22c0cf
1 parent 14fac45
commit f22c0cf
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 108 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -9,8 +9,8 @@
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "watch": "watch 'npm run build' ./src",
-    "format": "prettier --write \"**/*.{html,js,ts,svelte}\"",
-    "prettier": "prettier --check \"**/*.{html,js,ts,svelte}\""
+    "format": "prettier --write \"**/*.{html,js,ts,svelte,css}\"",
+    "prettier": "prettier --check \"**/*.{html,js,ts,svelte,css}\""
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.0.3",

diff --git a/ui/src/app.css b/ui/src/app.css
@@ -107,11 +107,35 @@ a.href-links:active {
   h1 {
     font-size: 1.5em;
   }
-  label {
-    font-size: 1em;
-  }
   .modal-content {
     width: 80% !important;
     margin: 50% auto !important;
   }
 }
+:global(:root.dark-mode) {
+  background-color: #202124;
+  opacity: 1;
+  background-image: radial-gradient(#5d5d5d 0.61px, transparent 0.6px),
+    radial-gradient(#5d5d5d 0.6px, #202124 0.6px);
+  background-size: 24px 24px;
+  background-position: 0 0, 12px 12px;
+}
+::-moz-selection {
+  /* Code for Firefox */
+  color: white;
+  background: black;
+}
+::selection {
+  color: white;
+  background: black;
+}
+:global(body.dark-mode) .href-links {
+  color: #bfc2c7;
+  background-color: #202124;
+}
+
+:global(body.dark-mode) a.href-links:hover,
+:global(body.dark-mode) a.href-links:active {
+  color: #202124;
+  background: #bfc2c7;
+}
diff --git a/ui/src/lib/DarkMode.svelte b/ui/src/lib/DarkMode.svelte
@@ -13,49 +13,11 @@
   }
 
   function applyDarkMode() {
-    document.body.classList.toggle('dark-mode');
+    window.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');
-    });
-
     localStorage.setItem('darkMode', darkMode.toString());
   }
 
@@ -116,63 +78,7 @@
     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;
-    border: solid 1px #bfc2c7 !important;
-  }
-
-  :global(fieldset.dark-mode) {
-    background-color: #202124;
-    color: #bfc2c7;
-    border: none;
-    box-shadow: 0 0 2px #bfc2c7;
-  }
-
-  :global(.btn-grad.dark-mode, .btn-grad-embed.dark-mode) {
-    box-shadow: none;
-  }
-
-  :global(
-      .appstore-icon.dark-mode,
-      .gh-footer.dark-mode,
-      .darkmode-icon-img.dark-mode,
-      .loader-container.dark-mode
-    ) {
+  :global(body.dark-mode) .darkmode-icon-img {
     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;
-  }
-
-  :global(select.dark-mode) {
-    background-color: #202124 !important;
-    color: #bfc2c7 !important;
-    mix-blend-mode: exclusion;
-  }
 </style>
diff --git a/ui/src/lib/Footer.svelte b/ui/src/lib/Footer.svelte
@@ -151,4 +151,24 @@
   .lastfm-footer {
     margin-top: 0;
   }
+  :global(body.dark-mode) .footer-text {
+    color: #bfc2c7;
+    background-color: #202124;
+  }
+
+  :global(body.dark-mode) .appstore-icon,
+  :global(body.dark-mode) .gh-footer {
+    filter: invert(1);
+  }
+
+  :global(body.dark-mode) .href-links {
+    color: #bfc2c7;
+    background-color: #202124;
+  }
+
+  :global(body.dark-mode) a.href-links:hover,
+  :global(body.dark-mode) a.href-links:active {
+    color: #202124;
+    background: #bfc2c7;
+  }
 </style>
diff --git a/ui/src/lib/Form.svelte b/ui/src/lib/Form.svelte
@@ -331,11 +331,11 @@
   select {
     background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>")
       no-repeat;
-    background-position: calc(100% - 0.75rem) center !important;
-    -moz-appearance: none !important;
-    -webkit-appearance: none !important;
-    appearance: none !important;
-    padding-right: 2rem !important;
+    background-position: calc(100% - 0.75rem) center;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    padding-right: 2rem;
   }
   input[type='submit'],
   input[type='button'] {
@@ -378,6 +378,7 @@
   }
   .advanced-option-label {
     color: black;
+    background-color: white;
     font-size: 1em;
     font-weight: bold;
   }
@@ -492,4 +493,52 @@
     width: fit-content;
     color: black;
   }
+
+  :global(body.dark-mode) .href-links,
+  :global(body.dark-mode) option,
+  :global(body.dark-mode) .username {
+    background-color: #202124;
+    color: #bfc2c7;
+  }
+  :global(body.dark-mode) .reset-text {
+    background-color: #202124;
+    color: #bfc2c7;
+  }
+  :global(body.dark-mode) .advanced-option-label {
+    background-color: #202124;
+    color: #bfc2c7;
+  }
+  :global(body.dark-mode) label {
+    background-color: #202124;
+    color: #bfc2c7;
+  }
+  :global(body.dark-mode) form {
+    background-color: #202124;
+    color: #bfc2c7;
+    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;
+    color: white !important;
+  }
+  :global(body.dark-mode) input {
+    background-color: #202124;
+    color: #bfc2c7;
+    mix-blend-mode: exclusion;
+  }
+  :global(body.dark-mode) select {
+    background-color: #202124;
+    color: #bfc2c7;
+    mix-blend-mode: exclusion;
+  }
+  :global(body.dark-mode) .loader-container {
+    filter: invert(1);
+  }
 </style>
diff --git a/ui/src/lib/Header.svelte b/ui/src/lib/Header.svelte
@@ -41,4 +41,8 @@
     color: unset;
     background: none;
   }
+  :global(body.dark-mode) .subheading {
+    background-color: #202124;
+    color: #bfc2c7;
+  }
 </style>
diff --git a/ui/src/lib/components/Checkbox.svelte b/ui/src/lib/components/Checkbox.svelte
@@ -10,7 +10,8 @@
 
 <div class="checkbox-wrapper" style="display: {display}">
   <input checked type="checkbox" class="switch" {name} id={name} />
-  <label style="color: {color};" for={name}>{text}</label>
+  <label class="checkbox-label" style="color: {color};" for={name}>{text}</label
+  >
 </div>
 
 <style>
@@ -145,4 +146,7 @@
   .checkbox-wrapper {
     padding-top: 1em;
   }
+  :global(body.dark-mode) .checkbox-label {
+    filter: invert(1);
+  }
 </style>
diff --git a/ui/src/lib/components/Modal.svelte b/ui/src/lib/components/Modal.svelte
@@ -153,4 +153,13 @@
     background-color: #b3b3b3;
     opacity: 0.8;
   }
+  :global(body.dark-mode) dialog {
+    background-color: #202124;
+    color: #bfc2c7;
+    border: solid 1px #bfc2c7;
+  }
+  :global(body.dark-mode) .close:hover,
+  :global(body.dark-mode) .close:focus {
+    color: white;
+  }
 </style>
diff --git a/ui/src/lib/components/NumberInput.svelte b/ui/src/lib/components/NumberInput.svelte
@@ -60,7 +60,6 @@
     transition: all 0.1s ease 0s;
   }
   .label {
-    color: black;
     font-size: 1em;
     font-weight: bold;
   }
@@ -71,4 +70,9 @@
     border-color: red;
     contain: inline-size;
   }
+  :global(body.dark-mode) .number-input {
+    background-color: #202124;
+    color: #bfc2c7;
+    mix-blend-mode: exclusion;
+  }
 </style>