update theme cache

Author: totegamma

app/src/contexts/Theme.tsx

@@ -37,6 +37,13 @@ export const ThemeProvider = (props: Props) => {
     const [customThemes, setCustomThemes] = useState<Record<string, Theme>>({})
     const theme = props.theme ?? customThemes[themeName] ?? Themes[themeName] ?? Themes.blue
 
+    // 次回起動時のCachedThemeProvider用に、解決できたテーマをキャッシュする。
+    // カスタムテーマはロード完了前は解決できないため、未解決のままblueを書き込まないよう条件付き
+    useEffect(() => {
+        const resolved = customThemes[themeName] ?? Themes[themeName]
+        if (resolved) localStorage.setItem('cachedTheme', JSON.stringify(resolved))
+    }, [customThemes, themeName])
+
     const reloadThemes = useCallback(async () => {
         const themes = await loadCustomThemes(client)
         setCustomThemes(themes)

app/src/main.tsx

@@ -26,14 +26,20 @@ import { OverlayStackBackBridge } from './components/OverlayStackBackBridge'
 import { AgeGateProvider } from './contexts/AgeGate'
 import { CssVar, OverlayStackProvider, Text, ThemeProvider as BaseThemeProvider } from '@concrnt/ui'
 import { Themes } from './data/themes'
+import { type Theme } from './types/Theme'
 import { usePersistent } from './hooks/usePersistent'
 import { type ReactNode } from 'react'
 
-// 設定(cckv)ロード前でも、localStorageにキャッシュされたpreferenceから前回のテーマを引く。
-// カスタムテーマは色が引けないためビルトインのみ・無ければblue
+// 設定(cckv)ロード前でも、前回解決されたテーマのキャッシュ(cachedTheme)から前回のテーマを引く。
+// キャッシュ未生成時はpreferenceのテーマ名をビルトインから引き、それも無ければblue
 const CachedThemeProvider = ({ children }: { children: ReactNode }) => {
     const [cachedPref] = usePersistent<Preference>('preference')
-    return <BaseThemeProvider theme={Themes[cachedPref?.themeName ?? ''] ?? Themes.blue}>{children}</BaseThemeProvider>
+    const [cachedTheme] = usePersistent<Theme>('cachedTheme')
+    return (
+        <BaseThemeProvider theme={cachedTheme ?? Themes[cachedPref?.themeName ?? ''] ?? Themes.blue}>
+            {children}
+        </BaseThemeProvider>
+    )
 }
 
 const ClientLoadingScreen = () => {

web/src/contexts/Theme.tsx

@@ -37,6 +37,13 @@ export const ThemeProvider = (props: Props) => {
     const [customThemes, setCustomThemes] = useState<Record<string, Theme>>({})
     const theme = props.theme ?? customThemes[themeName] ?? Themes[themeName] ?? Themes.blue
 
+    // 次回起動時のCachedThemeProvider用に、解決できたテーマをキャッシュする。
+    // カスタムテーマはロード完了前は解決できないため、未解決のままblueを書き込まないよう条件付き
+    useEffect(() => {
+        const resolved = customThemes[themeName] ?? Themes[themeName]
+        if (resolved) localStorage.setItem('cachedTheme', JSON.stringify(resolved))
+    }, [customThemes, themeName])
+
     const reloadThemes = useCallback(async () => {
         const themes = await loadCustomThemes(client)
         setCustomThemes(themes)

web/src/main.tsx

@@ -57,6 +57,7 @@ import { CssVar, IconButton, OverlayStackProvider, Text } from '@concrnt/ui'
 import { ThemeProvider as BaseThemeProvider } from '@concrnt/ui'
 import { MdArrowBack } from 'react-icons/md'
 import { Themes } from './data/themes'
+import { type Theme } from './types/Theme'
 
 const ClientLoadingScreen = () => {
     const progress = useClientSetupProgress()
@@ -122,11 +123,16 @@ const hasSession = (() => {
     return !!domain && (!!masterKey || !!subKey)
 })()
 
-// 設定(cckv)ロード前でも、localStorageにキャッシュされたpreferenceから前回のテーマを引く。
-// カスタムテーマは色が引けないためビルトインのみ・無ければblue
+// 設定(cckv)ロード前でも、前回解決されたテーマのキャッシュ(cachedTheme)から前回のテーマを引く。
+// キャッシュ未生成時はpreferenceのテーマ名をビルトインから引き、それも無ければblue
 const CachedThemeProvider = ({ children }: { children: ReactNode }) => {
     const [cachedPref] = usePersistent<Preference>('preference')
-    return <BaseThemeProvider theme={Themes[cachedPref?.themeName ?? ''] ?? Themes.blue}>{children}</BaseThemeProvider>
+    const [cachedTheme] = usePersistent<Theme>('cachedTheme')
+    return (
+        <BaseThemeProvider theme={cachedTheme ?? Themes[cachedPref?.themeName ?? ''] ?? Themes.blue}>
+            {children}
+        </BaseThemeProvider>
+    )
 }
 
 // client(≒プロフィール)が変わったら配下をまるごと作り直し、