fix(homepage): theme switching and background color issues

- Fix moon icon SVG rendering (replaced broken filled path with proper crescent)
- Use CSS variables for background colors instead of hardcoded hex values
- Remove redundant background-color from .homepage-shell to prevent dark border
- Refactor theme switching logic to use proper switch statement
- Ensure light/dark classes are properly toggled for both modes

commit: c3589435068c09e8f6c871a6d34819f700be9c20
author: bamen · 12mo ago · 2025-10-15 04:47 UTC
parent: db2c189
signature: unsigned

1 file · +13 -16

M gui/src/pages/Homepage.svelte +13 -16


@@ -549,10 +549,15 @@
549	549		return;
550	550		}
551	551
552		-	if (mode === "dark") {
553		-	document.documentElement.classList.add("dark");
554		-	} else {
555		-	document.documentElement.classList.remove("dark");
	552	+	switch (mode) {
	553	+	case "light":
	554	+	document.documentElement.classList.add("light");
	555	+	document.documentElement.classList.remove("dark");
	556	+	break;
	557	+	case "dark":
	558	+	document.documentElement.classList.remove("light");
	559	+	document.documentElement.classList.add("dark");
	560	+	break;
556	561		}
557	562		persistTheme(mode);
558	563		};

@@ -766,10 +771,8 @@
766	771		<meta name="description" content="Fast Wayland Browser - Your browsing patterns at a glance" />
767	772
768	773		{@html `<style>
769		-	html { background: #0a0a0a; }
770		-	body { background: #0a0a0a; color: #e5e5e5; }
771		-	html.light { background: #ffffff; }
772		-	html.light body { background: #ffffff; color: #171717; }
	774	+	html { background: var(--dynamic-bg, #0a0a0a); }
	775	+	body { background: var(--dynamic-bg, #0a0a0a); color: var(--dynamic-text, #e5e5e5); }
773	776		</style>`}
774	777
775	778		{@html `<script>

@@ -806,13 +809,8 @@
806	809		{themeMode === "dark" ? "Switch to light mode" : "Switch to dark mode"}
807	810		</span>
808	811		{#if themeMode === "dark"}
809		-	<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
810		-	<path
811		-	fill="currentColor"
812		-	fill-rule="evenodd"
813		-	clip-rule="evenodd"
814		-	d="M17.293 13.293A8 8 0 0 1 10.707 2.997a8.001 8.001 0 1 0 6.586 10.296z"
815		-	/>
	812	+	<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
	813	+	<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
816	814		</svg>
817	815		{:else}
818	816		<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">

@@ -1193,7 +1191,6 @@
1193	1191		<style>
1194	1192		.homepage-shell {
1195	1193		min-height: 100vh;
1196		-	background-color: var(--dynamic-bg);
1197	1194		color: var(--dynamic-text);
1198	1195		display: flex;
1199	1196		flex-direction: column;

       return;
     }
-    if (mode === "dark") {
+    switch (mode) {
-      document.documentElement.classList.add("dark");
+      case "light":
-    } else {
+        document.documentElement.classList.add("light");
-      document.documentElement.classList.remove("dark");
+        document.documentElement.classList.remove("dark");
+        break;
+      case "dark":
+        document.documentElement.classList.remove("light");
+        document.documentElement.classList.add("dark");
+        break;
     }
     persistTheme(mode);
   };
   <meta name="description" content="Fast Wayland Browser - Your browsing patterns at a glance" />
   {@html `<style>
-    html { background: #0a0a0a; }
+    html { background: var(--dynamic-bg, #0a0a0a); }
-    body { background: #0a0a0a; color: #e5e5e5; }
+    body { background: var(--dynamic-bg, #0a0a0a); color: var(--dynamic-text, #e5e5e5); }
-    html.light { background: #ffffff; }
-    html.light body { background: #ffffff; color: #171717; }
   </style>`}
   {@html `<script>
           {themeMode === "dark" ? "Switch to light mode" : "Switch to dark mode"}
         </span>
         {#if themeMode === "dark"}
-          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-              fill="currentColor"
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M17.293 13.293A8 8 0 0 1 10.707 2.997a8.001 8.001 0 1 0 6.586 10.296z"
-            />
           </svg>
         {:else}
           <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
 <style>
 .homepage-shell {
   min-height: 100vh;
-  background-color: var(--dynamic-bg);
   color: var(--dynamic-text);
   display: flex;
   flex-direction: column;