add light/dark theme switcher

add donation button
update all js deps
add information section on index page

.browserslistrc

@@ -0,0 +1,3 @@
+> 0.25%
+not dead
+not op_mini all

README.md

@@ -31,7 +31,9 @@ Some features to mention:
   - [ ] Torrent => DDL
   - [ ] Magnet => DDL
   - [ ] Magnet => Torrent
+- [ ] Misc
   - [ ] Feedback form
+  - [ ] Allow magnet-url as query string
 - [x] Chrome extension integration
 - [x] Embed support
   - [x] Base version

assets/src/js/app/layout.js

@@ -13,8 +13,21 @@ window.progress = {
 };
 
 import {bindAsync} from '../lib/async';
+import { themeChange } from 'theme-change';
+themeChange();
 
 function onLoad() {
+    let currentTheme = window.localStorage.getItem('theme');
+    const themeSelector = document.querySelector('[data-toggle-theme]');
+    const [darkTheme, lightTheme] = themeSelector.getAttribute('data-toggle-theme').split(',').map((t) => t.trim());
+    if (currentTheme === null) {
+        currentTheme = darkTheme;
+        if (window.matchMedia && !window.matchMedia('(prefers-color-scheme: dark)')) {
+            currentTheme = lightTheme;
+        }
+    }
+    if (currentTheme === lightTheme) themeSelector.checked = true;
+    document.querySelector('html').setAttribute('data-theme', currentTheme);
     document.body.style.display = 'block';
     hideProgress();
     bindAsync({

assets/src/styles/style.css

@@ -37,36 +37,46 @@
 @layer components {
   .progress-alert {
     @apply bg-base-200 text-accent border-accent border shadow-md py-4 rounded-box popin;
+
     position: relative;
 
     pre {
       @apply px-5 leading-8 whitespace-pre-wrap flex;
+
       &::before {
         content: "> ";
+
         @apply shrink-0;
       }
+
       &.in-progress {
         @apply loading-elipsis;
       }
+
       &.error-summary {
         @apply px-5 bg-warning text-warning-content;
       }
+
       &.done-summary {
         @apply px-5 bg-success text-success-content;
       }
     }
+
     .close {
       @apply btn btn-sm btn-accent mr-4;
     }
+
     &-oneline {
       @apply flex;
+
       pre {
         @apply flex-grow;
       }
     }
   }
 }
+
 input:-webkit-autofill,
 input:-webkit-autofill:focus {
   transition: background-color 600000s 0s, color 600000s 0s;
-}
+}