add light/dark mode toggle

app/routers/search.py

@@ -231,8 +231,12 @@ async def delete_request(
 async def read_manual(
     request: Request,
     user: Annotated[DetailedUser, Depends(get_authenticated_user())],
+    session: Annotated[Session, Depends(get_session)],
 ):
-    return template_response("manual.html", request, user, {})
+    auto_download = quality_config.get_auto_download(session)
+    return template_response(
+        "manual.html", request, user, {"auto_download": auto_download}
+    )
 
 
 @router.post("/manual")
@@ -272,11 +276,12 @@ async def add_manual(
             book=book_request,
             requester_username=user.username,
         )
+    auto_download = quality_config.get_auto_download(session)
 
     return template_response(
         "manual.html",
         request,
         user,
-        {"success": "Successfully added request"},
+        {"success": "Successfully added request", "auto_download": auto_download},
         block_name="form",
     )

app/routers/wishlist.py

@@ -27,6 +27,7 @@ from app.internal.prowlarr.prowlarr import (
     start_download,
 )
 from app.internal.query import query_sources
+from app.internal.ranking.quality import quality_config
 from app.util.auth import DetailedUser, get_authenticated_user
 from app.util.connection import get_connection
 from app.util.db import get_session, open_session
@@ -108,8 +109,16 @@ async def manual(
     session: Annotated[Session, Depends(get_session)],
 ):
     books = session.exec(select(ManualBookRequest)).all()
+    auto_download = quality_config.get_auto_download(session)
     return template_response(
-        "wishlist_page/manual.html", request, user, {"books": books, "page": "manual"}
+        "wishlist_page/manual.html",
+        request,
+        user,
+        {
+            "books": books,
+            "page": "manual",
+            "auto_download": auto_download,
+        },
     )
 
 
@@ -128,11 +137,12 @@ async def delete_manual(
         session.commit()
 
     books = session.exec(select(ManualBookRequest)).all()
+    auto_download = quality_config.get_auto_download(session)
     return template_response(
         "wishlist_page/manual.html",
         request,
         admin_user,
-        {"books": books, "page": "manual"},
+        {"books": books, "page": "manual", "auto_download": auto_download},
         block_name="book_wishlist",
     )
 

styles/globals.css

@@ -1,6 +1,41 @@
 @import "tailwindcss";
 @plugin "daisyui";
 
+@plugin "daisyui/theme" {
+  name: "nord";
+  default: false;
+  prefersdark: false;
+  color-scheme: "light";
+  --color-base-100: oklch(95.127% 0.007 260.731);
+  --color-base-200: oklch(93.299% 0.01 261.788);
+  --color-base-300: oklch(89.925% 0.016 262.749);
+  --color-base-content: oklch(32.437% 0.022 264.182);
+  --color-primary: oklch(59.435% 0.077 254.027);
+  --color-primary-content: oklch(11.887% 0.015 254.027);
+  --color-secondary: oklch(69.651% 0.059 248.687);
+  --color-secondary-content: oklch(13.93% 0.011 248.687);
+  --color-accent: oklch(77.464% 0.062 217.469);
+  --color-accent-content: oklch(15.492% 0.012 217.469);
+  --color-neutral: oklch(45.229% 0.035 264.131);
+  --color-neutral-content: oklch(89.925% 0.016 262.749);
+  --color-info: oklch(69.207% 0.062 332.664);
+  --color-info-content: oklch(13.841% 0.012 332.664);
+  --color-success: oklch(76.827% 0.074 131.063);
+  --color-success-content: oklch(15.365% 0.014 131.063);
+  --color-warning: oklch(85.486% 0.089 84.093);
+  --color-warning-content: oklch(17.097% 0.017 84.093);
+  --color-error: oklch(60.61% 0.12 15.341);
+  --color-error-content: oklch(12.122% 0.024 15.341);
+  --radius-selector: 1rem;
+  --radius-field: 0.25rem;
+  --radius-box: 0.5rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
 @plugin "daisyui/theme" {
   name: "night";
   default: false;

templates/base.html

@@ -15,11 +15,12 @@
       src="https://unpkg.com/htmx-ext-preload@2.1.0"
       crossorigin="anonymous"
     ></script>
+    <script src="https://cdn.jsdelivr.net/npm/theme-change@2.0.2/index.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body class="w-screen min-h-screen overflow-x-hidden" hx-ext="preload">
     {% if not hide_navbar %}
-    <header class="bg-base-100 text-neutral-content shadow-lg">
+    <header class="shadow-lg">
       <nav class="navbar">
         <div class="flex-1">
           <a
@@ -58,6 +59,17 @@
         </div>
 
         <div class="flex-none flex pr-4">
+          <label
+            class="btn btn-ghost btn-square light-dark-toggle swap swap-rotate"
+          >
+            <input type="checkbox" data-toggle-theme="nord,night" />
+            <span class="swap-on svg-dark"
+              >{% include 'icons/moon.html' %}</span
+            >
+            <span class="swap-off svg-light"
+              >{% include 'icons/sun.html' %}</span
+            >
+          </label>
           {% if user.can_logout() %}
           <btn
             hx-post="/auth/logout"

templates/icons/moon.html

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  width="24"
+  height="24"
+  stroke-width="2"
+  style="--darkreader-inline-stroke: currentColor"
+  data-darkreader-inline-stroke=""
+>
+  <path
+    d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"
+  ></path>
+</svg>

templates/icons/sun.html

@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  width="24"
+  height="24"
+  stroke-width="2"
+  style="--darkreader-inline-stroke: currentColor"
+  data-darkreader-inline-stroke=""
+>
+  <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
+  <path
+    d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
+  ></path>
+</svg>

templates/manual.html

@@ -5,10 +5,6 @@
   class="w-screen flex flex-col items-center justify-center p-8 overflow-x-hidden gap-4"
 >
   <h1 class="text-3xl font-bold text-left w-full">Manual Request</h1>
-  <p class="text-sm text-neutral-content">
-    Manual requests do not automatically start a download. They have to be
-    manually reviewed.
-  </p>
 
   {% block form %}
   <form
@@ -18,6 +14,11 @@
     hx-swap="outerHTML"
     hx-disabled-elt="#submit-button"
   >
+    <p class="text-sm text-left w-full opacity-60">
+      {% if auto_download %} Manual requests do not automatically start a
+      download. They have to be manually reviewed. {% endif %}
+    </p>
+
     {% if success %}
     <script>
       toast("{{success|safe}}", "success");

templates/search.html

@@ -106,14 +106,11 @@
           {{ book.title }}
         </div>
         {% if book.subtitle %}
-        <div
-          class="text-neutral-content/60 font-semibold text-xs"
-          title="Subtitle"
-        >
+        <div class="opacity-60 font-semibold text-xs" title="Subtitle">
           {{ book.subtitle }}
         </div>
         {% endif %}
-        <div class="text-xs text-neutral-content font-semibold" title="Authors">
+        <div class="text-xs font-semibold" title="Authors">
           {{ book.authors | join(", ") }}
         </div>
       </div>
@@ -142,16 +139,14 @@
     >
       {% if search_term %}
       <span class="text-xl font-semibold">No results found</span>
-      <span class="text-sm text-neutral-content"
+      <span class="text-sm"
         >No audiobooks were found. Do note, that internally Audible is used for
         searching. If the book doesn't exist on Audible it'll have to be added
         <a class="link" preload href="/search/manual">manually</a>.</span
       >
       {% else %}
       <span class="text-xl font-semibold">Perform a search</span>
-      <span class="text-sm text-neutral-content"
-        >Nothing has been searched yet.</span
-      >
+      <span class="text-sm opacity-60">Nothing has been searched yet.</span>
       {% endif %}
     </div>
     {% endif %}

templates/settings_page/download.html

@@ -63,7 +63,7 @@
     </div>
 
     <h3 class="border-t pt-2 border-base-200">
-      Quality <span class="text-neutral-content text-xs">(kbit/s)</span>
+      Quality <span class="text-xs">(kbit/s)</span>
     </h3>
 
     <div>

templates/settings_page/notifications.html

@@ -34,7 +34,7 @@
 
     <label for="apprise_url"
       >Apprise Notify URL
-      <span class="text-neutral-content text-xs font-mono"
+      <span class="text-xs font-mono"
         >(http://.../notify/c2h3fg...)</span
       ></label
     >
@@ -48,10 +48,7 @@
     />
 
     <label for="headers"
-      >Headers
-      <span class="text-neutral-content text-xs font-mono"
-        >(JSON format)</span
-      ></label
+      >Headers <span class="astext-xs font-mono">(JSON format)</span></label
     >
     <!-- prettier-ignore -->
     <input
@@ -83,9 +80,9 @@
       required
     ></textarea>
 
-    <p class="text-xs">
+    <p class="text-xs opacity-60">
       Possible event variables:
-      <span class="font-mono text-neutral-content"
+      <span class="font-mono"
         >eventUser, bookTitle, bookAuthors, bookNarrators</span
       >
     </p>

templates/settings_page/prowlarr.html

@@ -65,7 +65,7 @@
     hx-swap="outerHTML"
   >
     <label for="group">Categories</label>
-    <p class="text-xs text-neutral">
+    <p class="text-xs opacity-60">
       Categories to search for using Prowlarr. If none are selected, all
       categories will be searched for.
     </p>

templates/wishlist_page/wishlist.html

@@ -46,7 +46,7 @@
             />
             {% else %}
             <div
-              class="flex items-center justify-center w-full h-full bg-neutral text-neutral-content opacity-30"
+              class="flex items-center justify-center w-full h-full bg-neutral opacity-30"
             >
               {% include 'icons/photo-off.html' %}
             </div>