Make theme reactive

src/app/App.svelte

@@ -10,7 +10,7 @@
   import {storage, session, stateKey, relays, getSetting, dufflepud} from "src/engine"
   import * as engine from "src/engine"
   import {loadAppData} from "src/app/state"
-  import {theme, getThemeVariables, appName} from "src/partials/state"
+  import {themeVariables, appName} from "src/partials/state"
   import SideNav from "src/app/SideNav.svelte"
   import Routes from "src/app/Routes.svelte"
   import Toast from "src/app/Toast.svelte"
@@ -344,7 +344,7 @@
 
   document.head.append(style)
 
-  $: style.textContent = `:root { ${getThemeVariables($theme)}; background: var(--gray-8); }`
+  $: style.textContent = `:root { ${$themeVariables}; background: var(--gray-8); }`
 
   // Scroll position
 

src/app/shared/GroupEvents.svelte

@@ -6,7 +6,7 @@
   import Interaction from "@event-calendar/interaction"
   import {secondsToDate} from "src/util/misc"
   import {Naddr} from "src/util/nostr"
-  import {getThemeColor, theme} from "src/partials/state"
+  import {themeColors, theme} from "src/partials/state"
   import {router} from "src/app/router"
   import {load, pubkey} from "src/engine"
 
@@ -52,7 +52,7 @@
       title: meta.name,
       start: secondsToDate(meta.start),
       end: secondsToDate(meta.end),
-      backgroundColor: getThemeColor($theme, isOwn ? "accent" : "gray-2"),
+      backgroundColor: $themeColors[isOwn ? "accent" : "gray-2"],
       _ctx: e,
     }
   })

src/app/shared/NoteContentKind0.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {tryJson} from "src/util/misc"
-  import {getThemeBackgroundGradient} from "src/partials/state"
+  import {themeBackgroundGradient} from "src/partials/state"
   import Card from "src/partials/Card.svelte"
   import Content from "src/partials/Content.svelte"
   import ImageCircle from "src/partials/ImageCircle.svelte"
@@ -11,9 +11,10 @@
 
   const {pubkey, content} = note
   const {name, picture, about, banner} = tryJson(() => JSON.parse(content))
-  const {rgba} = getThemeBackgroundGradient()
   const bannerUrl = imgproxy(banner)
 
+  $: ({rgba} = $themeBackgroundGradient)
+
   const showPerson = () =>
     router
       .at("people")

src/app/views/GroupDetail.svelte

@@ -4,7 +4,7 @@
   import {whereEq, assocPath, without, uniq} from "ramda"
   import {noteKinds} from "src/util/nostr"
   import {getKey} from "src/util/router"
-  import {getThemeBackgroundGradient} from "src/partials/state"
+  import {themeBackgroundGradient} from "src/partials/state"
   import Content from "src/partials/Content.svelte"
   import Tabs from "src/partials/Tabs.svelte"
   import Anchor from "src/partials/Anchor.svelte"
@@ -35,7 +35,6 @@
 
   export let address, activeTab
 
-  const {rgb, rgba} = getThemeBackgroundGradient()
   const group = deriveGroup(address)
   const access = deriveGroupAccess(address)
   const status = deriveGroupStatus(address)
@@ -62,6 +61,8 @@
     return () => sub.close()
   })
 
+  $: ({rgb, rgba} = $themeBackgroundGradient)
+
   $: members = uniq(
     without([$group?.pubkey], ($sharedKey?.members || []).concat($adminKey?.members || [])),
   )

src/app/views/PersonDetail.svelte

@@ -4,7 +4,7 @@
   import {info} from "src/util/logger"
   import {ensureProto} from "src/util/misc"
   import {noteKinds} from "src/util/nostr"
-  import {getThemeBackgroundGradient} from "src/partials/state"
+  import {themeBackgroundGradient} from "src/partials/state"
   import Tabs from "src/partials/Tabs.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import Content from "src/partials/Content.svelte"
@@ -34,13 +34,13 @@
 
   const tabs = ["notes", "likes", $env.FORCE_RELAYS.length === 0 && "relays"].filter(identity)
   const person = derivePerson(pubkey)
-  const {rgb, rgba} = getThemeBackgroundGradient()
 
   let activeTab = "notes"
   let loading = true
 
   $: ownRelays = getPubkeyRelays(pubkey)
   $: banner = imgproxy($person.profile?.banner, {w: window.innerWidth})
+  $: ({rgb, rgba} = $themeBackgroundGradient)
 
   info("Person", npub, pubkey, $person)
 

src/partials/state.ts

@@ -1,7 +1,7 @@
 import {prop, last, fromPairs} from "ramda"
 import {randomId, range} from "hurdak"
 import type {Writable} from "svelte/store"
-import {writable, get} from "svelte/store"
+import {writable, derived, get} from "svelte/store"
 import {parseHex} from "src/util/html"
 import {shadeColor, synced} from "src/util/misc"
 
@@ -38,13 +38,13 @@ toast.show = (type, message, timeout = 5) => {
 // Themes
 
 const THEME = fromPairs(
-  import.meta.env.VITE_THEME.split(",").map((x: string) => x.split(":"))
+  import.meta.env.VITE_THEME.split(",").map((x: string) => x.split(":")),
 ) as Record<string, string>
 const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
 
 export const theme = synced("ui/theme", prefersDark ? "dark" : "light")
 
-export const getThemeColors = ($theme: string) => {
+export const themeColors = derived(theme, $theme => {
   for (const x of range(1, 10)) {
     const lum = $theme === "dark" ? (5 - x) * 25 : (x - 5) * 25
 
@@ -52,22 +52,21 @@ export const getThemeColors = ($theme: string) => {
   }
 
   return THEME
-}
+})
 
-export const getThemeColor = ($theme: string, k: string) => prop(k, getThemeColors($theme))
-
-export const getThemeVariables = ($theme: string) =>
-  Object.entries(getThemeColors($theme))
+export const themeVariables = derived(themeColors, $colors => {
+  return Object.entries($colors)
     .map(([k, v]) => `--${k}: ${v};`)
     .join("\n")
+})
 
-export const getThemeBackgroundGradient = () => {
-  const color = parseHex(getThemeColor(get(theme), "gray-8"))
+export const themeBackgroundGradient = derived(themeColors, $colors => {
+  const color = parseHex($colors["gray-8"])
 
   return {
     rgba: `rgba(${color.join(", ")}, 0.5)`,
     rgb: `rgba(${color.join(", ")})`,
   }
-}
+})
 
 export const getModal = () => last(Array.from(document.querySelectorAll(".modal-content")))