fix popup theme out of sync

src/contexts/ThemeContext.tsx

@@ -1,11 +1,12 @@
 import { createContext, useContext, useEffect, useState } from "react"
 
-type Theme = "dark" | "light"
-type PreferredTheme = "dark" | "light" | "system"
+export type Theme = "dark" | "light"
+export type PreferredTheme = "dark" | "light" | "system"
 
 type ThemeProviderProps = {
     children: React.ReactNode
     defaultTheme?: PreferredTheme
+    overrideTheme?: PreferredTheme
     storageKey?: string
 }
 
@@ -37,16 +38,24 @@ export function getCurrentTheme(theme: PreferredTheme): Theme {
     return theme
 }
 
+export const THEME_STORAGE_KEY = "vite-ui-theme"
+
 export function ThemeProvider({
     children,
     defaultTheme = "system",
-    storageKey = "vite-ui-theme",
+    overrideTheme,
     ...props
 }: ThemeProviderProps) {
-    const [theme, setTheme] = useState<PreferredTheme>(
-        () =>
-            (localStorage.getItem(storageKey) as PreferredTheme) || defaultTheme
-    )
+    const [theme, setTheme] = useState<PreferredTheme>(() => {
+        if (overrideTheme) {
+            return overrideTheme
+        }
+
+        return (
+            (localStorage.getItem(THEME_STORAGE_KEY) as PreferredTheme) ||
+            defaultTheme
+        )
+    })
 
     useEffect(() => {
         const root = window.document.getElementById(
@@ -73,8 +82,9 @@ export function ThemeProvider({
 
     const value = {
         theme,
-        setTheme: (theme: PreferredTheme) => {
-            localStorage.setItem(storageKey, theme)
+        setTheme: async (theme: PreferredTheme) => {
+            localStorage.setItem(THEME_STORAGE_KEY, theme)
+            await chrome.storage.local.set({ [THEME_STORAGE_KEY]: theme })
             setTheme(theme)
         },
     }

src/pages/content/Providers.tsx

@@ -6,27 +6,34 @@ import ConfigContextProvider from "@src/contexts/ConfigContext"
 import { TooltipProvider } from "@src/components/ui/tooltip"
 import { PageStateContextProvider } from "@src/contexts/PageStateContext"
 import { SmoothRouterListener } from "@src/components/router/SmoothRouterListener"
-import { ThemeProvider } from "@src/contexts/ThemeContext"
+import { PreferredTheme, ThemeProvider } from "@src/contexts/ThemeContext"
 import { Toaster } from "@src/components/ui/toaster"
 
 interface ProvidersProps {
     children: React.ReactNode
+    overrideTheme?: PreferredTheme
 }
 
 const queryClient = new QueryClient()
 
-export default function Providers({ children }: ProvidersProps) {
+export default function Providers({ children, overrideTheme }: ProvidersProps) {
+    overrideTheme ??= "system"
+
     return (
         <div className="box-sizing-unset _tailwind_preflight_reset">
             <QueryClientProvider client={queryClient}>
-                <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+                <ThemeProvider
+                    defaultTheme={"system"}
+                    overrideTheme={overrideTheme}
+                    storageKey="vite-ui-theme"
+                >
                     <PageStateContextProvider>
                         <SmoothRouterListener />
                         <TooltipProvider>
                             <CommandProvider>
                                 <ConfigContextProvider>
                                     {children}
-                                    <Toaster/>
+                                    <Toaster />
                                 </ConfigContextProvider>
                             </CommandProvider>
                         </TooltipProvider>

src/pages/content/index.tsx

@@ -3,55 +3,63 @@ import Root from "./Root"
 import { PageData, parsePageContent } from "@src/content/parsers/parser"
 import Providers from "./Providers"
 import CommandsRoot from "./CommandsRoot"
+import { THEME_STORAGE_KEY } from "@src/contexts/ThemeContext"
 
-try {
-    const rootContainer = document.body
+async function initialize() {
+    try {
+        const rootContainer = document.body
 
-    rootContainer.style.overflowY = "scroll" // show scroll bar
+        rootContainer.style.overflowY = "scroll" // show scroll bar
 
-    const pageData: PageData = parsePageContent(rootContainer)
-    const now = new Date().getTime()
-    history.replaceState({ now }, "", location.href.toString())
+        const pageData: PageData = parsePageContent(rootContainer)
+        const now = new Date().getTime()
+        history.replaceState({ now }, "", location.href.toString())
 
-    if (pageData.type === "unknown") {
-        throw new Error("unknown page type")
-    }
+        if (pageData.type === "unknown") {
+            throw new Error("unknown page type")
+        }
 
-    if (pageData.type === "root") {
-        throw new Error("root page")
-    }
+        if (pageData.type === "root") {
+            throw new Error("root page")
+        }
 
-    if (!rootContainer) {
-        throw new Error("Can't find Options root element")
-    }
+        if (!rootContainer) {
+            throw new Error("Can't find Options root element")
+        }
 
-    const root = createRoot(rootContainer)
-
-    rootContainer.setAttribute("id", "__better_studres_theme_root")
-
-    root.render(
-        <Providers>
-            <Root initialPageData={pageData} />
-        </Providers>
-    )
-} catch (e) {
-    // load only commands then
-    console.log("fallback")
-    console.log(e)
-    const div = document.createElement("div")
-    div.className = "__better_studres__root _tailwind_preflight_reset"
-    document.body.appendChild(div)
-
-    const rootContainer = document.querySelector(".__better_studres__root")
-    if (!rootContainer) {
-        throw new Error("Can't find Options root element")
-    }
+        const root = createRoot(rootContainer)
+
+        rootContainer.setAttribute("id", "__better_studres_theme_root")
 
-    const root = createRoot(rootContainer)
+        const themeObject = await chrome.storage.local.get(THEME_STORAGE_KEY)
+        const theme = themeObject[THEME_STORAGE_KEY]
 
-    root.render(
-        <Providers>
-            <CommandsRoot />
-        </Providers>
-    )
+        root.render(
+            <Providers overrideTheme={theme}>
+                <Root initialPageData={pageData} />
+            </Providers>
+        )
+    } catch (e) {
+        // load only commands then
+        console.log("fallback")
+        console.log(e)
+        const div = document.createElement("div")
+        div.className = "__better_studres__root _tailwind_preflight_reset"
+        document.body.appendChild(div)
+
+        const rootContainer = document.querySelector(".__better_studres__root")
+        if (!rootContainer) {
+            throw new Error("Can't find Options root element")
+        }
+
+        const root = createRoot(rootContainer)
+
+        root.render(
+            <Providers>
+                <CommandsRoot />
+            </Providers>
+        )
+    }
 }
+
+initialize()

src/pages/popup/index.tsx

@@ -2,16 +2,20 @@ import { createRoot } from "react-dom/client"
 import "@pages/popup/index.css"
 import Popup from "@pages/popup/Popup"
 import Providers from "../content/Providers"
+import { THEME_STORAGE_KEY } from "@src/contexts/ThemeContext"
 
-function init() {
+async function init() {
     const rootContainer = document.querySelector("#__root")
 
     if (!rootContainer) throw new Error("Can't find Popup root element")
 
     const root = createRoot(rootContainer)
 
+    const themeObject = await chrome.storage.local.get(THEME_STORAGE_KEY)
+    const theme = themeObject[THEME_STORAGE_KEY]
+
     root.render(
-        <Providers>
+        <Providers overrideTheme={theme}>
             <Popup />
         </Providers>
     )