From 52c7df8a15655e5be8f96c8e07c2a72346fedb02 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 11 Sep 2025 14:47:06 -0700
Subject: [PATCH] Default to light mode

---
 package.json                             |  1 +
 pnpm-lock.yaml                           | 12 ++++++++++++
 src/app/components/Landing.svelte        |  4 ++--
 src/app/components/MenuSettings.svelte   | 12 ++++++------
 src/app/components/MenuSpaces.svelte     |  2 +-
 src/app/components/MenuSpacesItem.svelte |  2 +-
 src/app/components/SpaceAdd.svelte       |  6 +++---
 src/app/core/commands.ts                 |  9 +++++++--
 src/app/core/state.ts                    |  4 ++--
 src/app/util/theme.ts                    |  2 +-
 src/lib/components/CardButton.svelte     |  2 +-
 src/lib/components/Dialog.svelte         |  2 +-
 src/routes/+layout.svelte                |  1 +
 src/routes/discover/+page.svelte         |  2 +-
 src/routes/home/+page.svelte             |  6 +++---
 src/routes/settings/profile/+page.svelte |  4 +++-
 tailwind.config.js                       |  1 +
 17 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index 8f0c4687..9037bb97 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "@capacitor/keyboard": "^7.0.0",
     "@capacitor/preferences": "^7.0.2",
     "@capacitor/push-notifications": "^7.0.1",
+    "@capawesome/capacitor-android-dark-mode-support": "^7.0.0",
     "@capawesome/capacitor-badge": "^7.0.1",
     "@getalby/sdk": "^5.1.0",
     "@poppanator/sveltekit-svg": "^4.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 27990320..491d7044 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ importers:
       '@capacitor/push-notifications':
         specifier: ^7.0.1
         version: 7.0.1(@capacitor/core@7.2.0)
+      '@capawesome/capacitor-android-dark-mode-support':
+        specifier: ^7.0.0
+        version: 7.0.0(@capacitor/core@7.2.0)
       '@capawesome/capacitor-badge':
         specifier: ^7.0.1
         version: 7.0.1(@capacitor/core@7.2.0)
@@ -771,6 +774,11 @@ packages:
     peerDependencies:
       '@capacitor/core': '>=7.0.0'
 
+  '@capawesome/capacitor-android-dark-mode-support@7.0.0':
+    resolution: {integrity: sha512-xLa988v9MEnFZj7Aje3v2vvYbs5U3zk8vaO24OioXUV1ZPjGy4R2VkdoKG8fTsSYRdF6s4/8DpCuos8JLJqpjw==}
+    peerDependencies:
+      '@capacitor/core': '>=7.0.0'
+
   '@capawesome/capacitor-badge@7.0.1':
     resolution: {integrity: sha512-jhVieRRVLgGO1NU7PW8uWZmf3WD4IsYUlkrJ82KuoRgLFx1tbJGwHU1ro0sUJmEwfLO9vldhBnJJ/J5nHrjbQQ==}
     peerDependencies:
@@ -5609,6 +5617,10 @@ snapshots:
     dependencies:
       '@capacitor/core': 7.2.0
 
+  '@capawesome/capacitor-android-dark-mode-support@7.0.0(@capacitor/core@7.2.0)':
+    dependencies:
+      '@capacitor/core': 7.2.0
+
   '@capawesome/capacitor-badge@7.0.1(@capacitor/core@7.2.0)':
     dependencies:
       '@capacitor/core': 7.2.0
diff --git a/src/app/components/Landing.svelte b/src/app/components/Landing.svelte
index 57b35753..091c5629 100644
--- a/src/app/components/Landing.svelte
+++ b/src/app/components/Landing.svelte
@@ -23,7 +23,7 @@
       <p class="text-center">The chat app built for self-hosted communities.</p>
     </div>
     <Button onclick={logIn}>
-      <CardButton class="!btn-primary">
+      <CardButton class="btn-primary">
         {#snippet icon()}
           <div><Icon icon={Login} size={7} /></div>
         {/snippet}
@@ -35,7 +35,7 @@
         {/snippet}
       </CardButton>
     </Button>
-    <Button onclick={signUp}>
+    <Button onclick={signUp} class="dark:btn-neutral">
       <CardButton>
         {#snippet icon()}
           <div><Icon icon={AddCircle} size={7} /></div>
diff --git a/src/app/components/MenuSettings.svelte b/src/app/components/MenuSettings.svelte
index 553240d9..eae94a82 100644
--- a/src/app/components/MenuSettings.svelte
+++ b/src/app/components/MenuSettings.svelte
@@ -19,7 +19,7 @@
 
 <div class="column menu gap-2">
   <Link replaceState href="/settings/profile">
-    <CardButton>
+    <CardButton class="dark:btn-neutral">
       {#snippet icon()}
         <div><Icon icon={UserRounded} size={7} /></div>
       {/snippet}
@@ -32,7 +32,7 @@
     </CardButton>
   </Link>
   <Link replaceState href="/settings/alerts">
-    <CardButton>
+    <CardButton class="dark:btn-neutral">
       {#snippet icon()}
         <div><Icon icon={Bell} size={7} /></div>
       {/snippet}
@@ -45,7 +45,7 @@
     </CardButton>
   </Link>
   <Link replaceState href="/settings/wallet">
-    <CardButton>
+    <CardButton class="dark:btn-neutral">
       {#snippet icon()}
         <div><Icon icon={Wallet} size={7} /></div>
       {/snippet}
@@ -58,7 +58,7 @@
     </CardButton>
   </Link>
   <Link replaceState href="/settings/relays">
-    <CardButton>
+    <CardButton class="dark:btn-neutral">
       {#snippet icon()}
         <div><Icon icon={Server} size={7} /></div>
       {/snippet}
@@ -71,7 +71,7 @@
     </CardButton>
   </Link>
   <Link replaceState href="/settings/content">
-    <CardButton>
+    <CardButton class="dark:btn-neutral">
       {#snippet icon()}
         <div><Icon icon={Settings} size={7} /></div>
       {/snippet}
@@ -84,7 +84,7 @@
     </CardButton>
   </Link>
   <Link replaceState href="/settings/about">
-    <CardButton>
+    <CardButton class="dark:btn-neutral">
       {#snippet icon()}
         <div><Icon icon={Code2} size={7} /></div>
       {/snippet}
diff --git a/src/app/components/MenuSpaces.svelte b/src/app/components/MenuSpaces.svelte
index 6ca66de9..9dd8c7c1 100644
--- a/src/app/components/MenuSpaces.svelte
+++ b/src/app/components/MenuSpaces.svelte
@@ -23,7 +23,7 @@
       <Divider />
     {/if}
     <Button onclick={addSpace}>
-      <CardButton>
+      <CardButton class="dark:btn-neutral">
         {#snippet icon()}
           <div><Icon icon={Login} size={7} /></div>
         {/snippet}
diff --git a/src/app/components/MenuSpacesItem.svelte b/src/app/components/MenuSpacesItem.svelte
index abb8afa0..851c3985 100644
--- a/src/app/components/MenuSpacesItem.svelte
+++ b/src/app/components/MenuSpacesItem.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <Link replaceState href={path}>
-  <CardButton>
+  <CardButton class="dark:btn-neutral">
     {#snippet icon()}
       <div><SpaceAvatar {url} /></div>
     {/snippet}
diff --git a/src/app/components/SpaceAdd.svelte b/src/app/components/SpaceAdd.svelte
index 44f5ba3a..06dd98cb 100644
--- a/src/app/components/SpaceAdd.svelte
+++ b/src/app/components/SpaceAdd.svelte
@@ -26,7 +26,7 @@
     {/snippet}
   </ModalHeader>
   <Link href="/discover">
-    <CardButton class="!btn-primary">
+    <CardButton class="btn-primary">
       {#snippet icon()}
         <div><Icon icon={Compass} size={7} /></div>
       {/snippet}
@@ -39,7 +39,7 @@
     </CardButton>
   </Link>
   <Button onclick={startJoin}>
-    <CardButton>
+    <CardButton class="dark:btn-neutral">
       {#snippet icon()}
         <div><Icon icon={Login} size={7} /></div>
       {/snippet}
@@ -52,7 +52,7 @@
     </CardButton>
   </Button>
   <Button onclick={startCreate}>
-    <CardButton>
+    <CardButton class="dark:btn-neutral">
       {#snippet icon()}
         <div><Icon icon={AddCircle} size={7} /></div>
       {/snippet}
diff --git a/src/app/core/commands.ts b/src/app/core/commands.ts
index 6d256bef..bf56e2b6 100644
--- a/src/app/core/commands.ts
+++ b/src/app/core/commands.ts
@@ -14,6 +14,7 @@ import {
   LOCALE,
   parseJson,
   fromPairs,
+  last,
 } from "@welshman/lib"
 import {decrypt} from "@welshman/signer"
 import type {Feed} from "@welshman/feeds"
@@ -314,8 +315,12 @@ export const checkRelayAuth = async (url: string) => {
 
   // Only raise an error if it's not a timeout.
   // If it is, odds are the problem is with our signer, not the relay
-  if (!okStatuses.includes(socket.auth.status) && socket.auth.details) {
-    return `Failed to authenticate (${socket.auth.details})`
+  if (!okStatuses.includes(socket.auth.status)) {
+    if (socket.auth.details) {
+      return `Failed to authenticate (${socket.auth.details})`
+    } else {
+      return `Failed to authenticate (${last(socket.auth.status.split(":"))})`
+    }
   }
 }
 
diff --git a/src/app/core/state.ts b/src/app/core/state.ts
index 475968e9..4b124f58 100644
--- a/src/app/core/state.ts
+++ b/src/app/core/state.ts
@@ -24,7 +24,7 @@ import {
   tryCatch,
 } from "@welshman/lib"
 import type {Socket} from "@welshman/net"
-import {Pool, load, AuthStateEvent, SocketEvent, netContext} from "@welshman/net"
+import {Pool, load, AuthStateEvent, AuthStatus, SocketEvent, netContext} from "@welshman/net"
 import {
   collection,
   custom,
@@ -815,7 +815,7 @@ export const deriveRelayAuthError = (url: string, claim = "") => {
   return derived(
     [relaysMostlyRestricted, deriveSocket(url)],
     ([$relaysMostlyRestricted, $socket]) => {
-      if ($socket.auth.details) {
+      if ($socket.auth.status === AuthStatus.Forbidden && $socket.auth.details) {
         return stripPrefix($socket.auth.details)
       }
 
diff --git a/src/app/util/theme.ts b/src/app/util/theme.ts
index 2651d2ad..35c1f9b9 100644
--- a/src/app/util/theme.ts
+++ b/src/app/util/theme.ts
@@ -3,6 +3,6 @@ import {synced} from "@welshman/store"
 
 export const theme = synced({
   key: "theme",
-  defaultValue: "dark",
+  defaultValue: window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
   storage: preferencesStorageProvider,
 })
diff --git a/src/lib/components/CardButton.svelte b/src/lib/components/CardButton.svelte
index 9148acf9..0ba7556d 100644
--- a/src/lib/components/CardButton.svelte
+++ b/src/lib/components/CardButton.svelte
@@ -11,7 +11,7 @@
   const {...props}: Props = $props()
 </script>
 
-<div class="btn btn-neutral flex h-[unset] w-full flex-nowrap py-4 text-left {props.class}">
+<div class="btn flex h-[unset] w-full flex-nowrap py-4 text-left {props.class}">
   <div class="flex flex-grow flex-row items-start gap-1 sm:pl-2">
     <div class="flex h-14 w-12 flex-shrink-0 items-center">
       {@render props.icon?.()}
diff --git a/src/lib/components/Dialog.svelte b/src/lib/components/Dialog.svelte
index 483e18e1..e0626201 100644
--- a/src/lib/components/Dialog.svelte
+++ b/src/lib/components/Dialog.svelte
@@ -19,7 +19,7 @@
 <div class="center fixed inset-0 z-modal">
   <button
     aria-label="Close dialog"
-    class="absolute inset-0 cursor-pointer bg-black opacity-75"
+    class="absolute inset-0 cursor-pointer bg-[#ccc] opacity-75 dark:bg-black"
     transition:fade={{duration: 300}}
     onclick={onClose}>
   </button>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a3a9e085..230aa990 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -126,6 +126,7 @@
     Object.assign(window, {
       get,
       nip19,
+      theme,
       ...lib,
       ...welshmanSigner,
       ...router,
diff --git a/src/routes/discover/+page.svelte b/src/routes/discover/+page.svelte
index 5dd5af51..753d628c 100644
--- a/src/routes/discover/+page.svelte
+++ b/src/routes/discover/+page.svelte
@@ -91,7 +91,7 @@
     </label>
     {#each relaySearch.searchOptions(term).slice(0, limit) as relay (relay.url)}
       <Button
-        class="card2 bg-alt shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]"
+        class="card2 bg-alt shadow-xl transition-all hover:shadow-2xl hover:dark:brightness-[1.1]"
         onclick={() => openSpace(relay.url)}>
         <RelaySummary url={relay.url} />
       </Button>
diff --git a/src/routes/home/+page.svelte b/src/routes/home/+page.svelte
index e880ea33..31bb05e1 100644
--- a/src/routes/home/+page.svelte
+++ b/src/routes/home/+page.svelte
@@ -32,7 +32,7 @@
       <h1 class="mb-4 text-center text-5xl font-bold uppercase">{PLATFORM_NAME}</h1>
       <div class="col-3">
         <Button onclick={addSpace}>
-          <CardButton>
+          <CardButton class="dark:btn-neutral">
             {#snippet icon()}
               <div><Icon icon={AddCircle} size={7} /></div>
             {/snippet}
@@ -45,7 +45,7 @@
           </CardButton>
         </Button>
         <Link href="/discover">
-          <CardButton>
+          <CardButton class="dark:btn-neutral">
             {#snippet icon()}
               <div><Icon icon={Compass} size={7} /></div>
             {/snippet}
@@ -58,7 +58,7 @@
           </CardButton>
         </Link>
         <Button onclick={openChat}>
-          <CardButton>
+          <CardButton class="dark:btn-neutral">
             {#snippet icon()}
               <div><Icon icon={ChatRound} size={7} /></div>
             {/snippet}
diff --git a/src/routes/settings/profile/+page.svelte b/src/routes/settings/profile/+page.svelte
index b1ce4837..58e95662 100644
--- a/src/routes/settings/profile/+page.svelte
+++ b/src/routes/settings/profile/+page.svelte
@@ -61,7 +61,9 @@
           </div>
         </div>
       </div>
-      <Button class="center btn btn-circle btn-neutral -mr-4 -mt-4 h-12 w-12" onclick={startEdit}>
+      <Button
+        class="center btn btn-circle -mr-4 -mt-4 h-12 w-12 dark:btn-neutral"
+        onclick={startEdit}>
         <Icon icon={PenNewSquare} />
       </Button>
     </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index a44a84da..af3c0e39 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,6 +8,7 @@ config({path: ".env.template"})
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.{html,js,svelte,ts}"],
+  darkMode: ['selector', '[data-theme="dark"]'],
   theme: {
     extend: {},
     zIndex: {