Default to light mode

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>

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}

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}

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}

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}

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(":"))})`
+    }
   }
 }
 

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)
       }
 

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,
 })