fix: login screen theme switcher

explodingcamera · explodingcamera · commit 53ede31b4ab4 · 2026-03-11T22:23:03.000+01:00
Signed-off-by: Henry &lt;mail@henrygressmann.de&gt;
diff --git a/web/src/components/ThemeSwitcher.astro b/web/src/components/ThemeSwitcher.astro
@@ -1,8 +1,9 @@
 ---
 import { MoonIcon, SunIcon } from "lucide-react";
+const { class: className, ...rest } = Astro.props;
 ---
 
-<button id="theme-switcher" type="button" aria-label="Toggle dark mode">
+<button id="theme-switcher" type="button" aria-label="Toggle dark mode" class={className} {...rest}>
   <SunIcon className="sun" />
   <MoonIcon className="moon" />
 </button>
@@ -58,6 +59,7 @@ import { MoonIcon, SunIcon } from "lucide-react";
     const button = document.querySelector(
       "#theme-switcher"
     ) as HTMLButtonElement;
+
     const sun = document.querySelector(
       "#theme-switcher .sun"
     ) as HTMLElement | null;
@@ -75,6 +77,8 @@ import { MoonIcon, SunIcon } from "lucide-react";
     }
 
     button.addEventListener("click", () => {
+        console.log("click");
+
       if (theme === "dark") {
         setTheme("light");
         sun.style.display = "block";
diff --git a/web/src/layouts/Base.astro b/web/src/layouts/Base.astro
@@ -5,7 +5,7 @@ import "../global.css";
 import { ClientRouter } from "astro:transitions";
 import ThemeSwitcher from "../components/ThemeSwitcher.astro";
 
-type Props = { title: string; hideFooter?: boolean };
+type Props = { title: string; hideFooter?: boolean; noSwitcher?: boolean };
 ---
 
 <html lang="en" transition:animate="none">
@@ -23,7 +23,7 @@ type Props = { title: string; hideFooter?: boolean };
     {
       !Astro.props.hideFooter && (
         <footer class="container-fluid footer">
-          <ThemeSwitcher />
+          {!Astro.props.noSwitcher && <ThemeSwitcher />}
           <small>
             Powered by&nbsp;
             <a href="https://liwan.dev" target="_blank" class="secondary">
diff --git a/web/src/pages/login.astro b/web/src/pages/login.astro
@@ -3,9 +3,9 @@ import ThemeSwitcher from "../components/ThemeSwitcher.astro";
 import Layout from "../layouts/Base.astro";
 ---
 
-<Layout title="Login">
+<Layout title="Login" noSwitcher>
   <section class="container">
-    <ThemeSwitcher class="asdf" />
+    <ThemeSwitcher class="theme-switcher" />
     <h1>Sign in</h1>
     <form onsubmit="return false;" id="login-form">
       <input
@@ -59,9 +59,8 @@ import Layout from "../layouts/Base.astro";
       api["/api/dashboard/auth/login"]
         .post({ json: { username, password } })
         .then((res) => {
-          if (!res.ok)
+          if (!(res as {ok: boolean})?.ok)
             return Promise.reject(new Error("Invalid username or password"));
-
           document.location.href = "/";
         })
         .catch((_) => {
@@ -74,7 +73,7 @@ import Layout from "../layouts/Base.astro";
 </script>
 
 <style>
-  :global(#theme-switcher) {
+  .theme-switcher {
     position: absolute;
     padding: 1rem;
     top: 0;
diff --git a/web/src/pages/setup.astro b/web/src/pages/setup.astro
@@ -3,9 +3,9 @@ import ThemeSwitcher from "../components/ThemeSwitcher.astro";
 import Layout from "../layouts/Base.astro";
 ---
 
-<Layout title="Setup" hideFooter>
+<Layout title="Setup" hideFooter noSwitcher>
   <section class="container">
-    <ThemeSwitcher class="asdf" />
+    <ThemeSwitcher class="theme-switcher" />
     <h1>Let's get started</h1>
     <p>
       Enter a new username and password to create your administrator account.
@@ -71,7 +71,7 @@ import Layout from "../layouts/Base.astro";
       api["/api/dashboard/auth/setup"]
         .post({ json: { username, password, token } })
         .then((res) => {
-          if (!res.ok)
+          if (!(res as {ok: boolean})?.ok)
             return Promise.reject(new Error("Invalid token or username"));
 
           navigate("/login");
@@ -84,7 +84,7 @@ import Layout from "../layouts/Base.astro";
 </script>
 
 <style>
-  :global(#theme-switcher) {
+  .theme-switcher {
     position: absolute;
     padding: 1rem;
     top: 0;
