Apply theme to body so popovers get themed too, make selected popover item more clear

package.json

@@ -51,10 +51,10 @@
     "@types/qrcode": "^1.5.5",
     "@vite-pwa/assets-generator": "^0.2.6",
     "@vite-pwa/sveltekit": "^0.6.6",
-    "@welshman/app": "^0.2.4",
+    "@welshman/app": "^0.2.5",
     "@welshman/content": "^0.2.1",
     "@welshman/dvm": "^0.2.0",
-    "@welshman/editor": "^0.2.1",
+    "@welshman/editor": "^0.2.2",
     "@welshman/feeds": "^0.2.2",
     "@welshman/lib": "^0.2.2",
     "@welshman/net": "^0.2.3",

src/app.css

@@ -46,9 +46,14 @@
 
 :root {
   font-family: Lato;
+  --sait: env(safe-area-inset-top);
+  --saib: env(safe-area-inset-bottom);
+  --sail: env(safe-area-inset-left);
+  --sair: env(safe-area-inset-right);
 }
 
 [data-theme] {
+  @apply bg-base-300;
   --base-100: oklch(var(--b1));
   --base-200: oklch(var(--b2));
   --base-300: oklch(var(--b3));
@@ -57,16 +62,6 @@
   --primary-content: oklch(var(--pc));
   --secondary: oklch(var(--s));
   --secondary-content: oklch(var(--sc));
-  --sait: env(safe-area-inset-top);
-  --saib: env(safe-area-inset-bottom);
-  --sail: env(safe-area-inset-left);
-  --sair: env(safe-area-inset-right);
-}
-
-:root,
-body,
-html {
-  @apply bg-base-300;
 }
 
 /* safe area insets */
@@ -296,6 +291,14 @@ html {
   --tiptap-active-fg: var(--base-content);
 }
 
+.tiptap-suggestions__item {
+  @apply border-l-2 border-solid border-base-100;
+}
+
+.tiptap-suggestions__selected {
+  @apply border-primary;
+}
+
 .tiptap {
   @apply max-h-[350px] overflow-y-auto p-2 px-4;
 }

src/routes/+layout.svelte

@@ -51,9 +51,9 @@
   import {setupTracking} from "@app/tracking"
   import {setupAnalytics} from "@app/analytics"
   import {nsecDecode} from "@lib/util"
-  import {theme} from "@app/theme"
   import {INDEXER_RELAYS, userMembership, ensureUnwrapped, canDecrypt} from "@app/state"
   import {loadUserData, listenForNotifications} from "@app/requests"
+  import {theme} from "@app/theme"
   import * as commands from "@app/commands"
   import * as requests from "@app/requests"
   import * as notifications from "@app/notifications"
@@ -121,6 +121,11 @@
       }
     }
 
+    // Sync theme
+    theme.subscribe($theme => {
+      document.body.setAttribute("data-theme", $theme)
+    })
+
     if (!db) {
       setupTracking()
       setupAnalytics()
@@ -228,9 +233,9 @@
 </svelte:head>
 
 {#await ready}
-  <div data-theme={$theme}></div>
+  <div></div>
 {:then}
-  <div data-theme={$theme}>
+  <div>
     <AppContainer>
       {@render children()}
     </AppContainer>