feat:lineage compat, nessa made more similar

src/components/SubdomainHeader.tsx

@@ -11,14 +11,66 @@
 import { For, Show } from "solid-js";
 import { A, useLocation } from "@solidjs/router";
 import { useSite } from "~/context/SiteContext";
+import { useDarkMode } from "~/context/darkMode";
 import { NAV_CONFIG, BACK_TO_FRENO } from "~/lib/nav-config";
 
+/** Simple SVG sun icon for dark mode toggle. */
+function SunIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="h-5 w-5"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2" />
+      <path d="M12 20v2" />
+      <path d="M2 12h2" />
+      <path d="M20 12h2" />
+      <path d="m4.93 4.93 1.41 1.41" />
+      <path d="m17.66 17.66 1.41 1.41" />
+      <path d="m2 12h2" />
+      <path d="m20 12h2" />
+      <path d="m4.93 19.07 1.41-1.41" />
+      <path d="m17.66 6.34 1.41-1.41" />
+    </svg>
+  );
+}
+
+/** Simple SVG moon icon for dark mode toggle. */
+function MoonIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="h-5 w-5"
+      aria-hidden="true"
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+      <path d="M9 11a5 5 0 0 0 5.5 5.5" />
+    </svg>
+  );
+}
+
 export default function SubdomainHeader() {
   const site = useSite();
   const location = useLocation();
+  const { isDark, toggleDarkMode } = useDarkMode();
 
   const brandName = () => site().displayName;
-  const brandColor = () => site().brandColor;
+  const brandColor = () =>
+    isDark() ? (site().brandColorDark ?? site().brandColor) : site().brandColor;
   const navItems = () =>
     NAV_CONFIG[site().id].filter((item) => item.label !== "Home");
 
@@ -80,6 +132,22 @@ export default function SubdomainHeader() {
           >
             {BACK_TO_FRENO.label}
           </a>
+
+          {/* Dark mode toggle */}
+          <button
+            onClick={toggleDarkMode}
+            class="hover:bg-surface0/40 rounded-full p-2 transition-colors"
+            aria-label={
+              isDark() ? "Switch to light mode" : "Switch to dark mode"
+            }
+          >
+            <Show when={isDark()}>
+              <SunIcon />
+            </Show>
+            <Show when={!isDark()}>
+              <MoonIcon />
+            </Show>
+          </button>
         </nav>
       </div>
     </header>