tag colors and tag list tracking fix

src/components/ThemeProvider.tsx

@@ -5,12 +5,14 @@ type Theme = "dark" | "light" | "system";
 interface ThemeProviderState {
     theme: () => Theme;
     setTheme: (theme: Theme) => void;
+    resolvedTheme: () => "light" | "dark";
 }
 
 const ThemeProviderContext = createContext<ThemeProviderState>();
 
 export const ThemeProvider: ParentComponent = (props) => {
     const [theme, setTheme] = createSignal<Theme>("system");
+    const [resolvedTheme, setResolvedTheme] = createSignal<"light" | "dark">("light");
 
     // Load from local storage on mount
     const storedTheme = localStorage.getItem("tasgrid-theme") as Theme | null;
@@ -23,19 +25,22 @@ export const ThemeProvider: ParentComponent = (props) => {
         root.classList.remove("light", "dark");
 
         const currentTheme = theme();
+        let resolved: "light" | "dark";
 
         if (currentTheme === "system") {
-            const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-            root.classList.add(systemTheme);
+            resolved = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+            root.classList.add(resolved);
         } else {
-            root.classList.add(currentTheme);
+            resolved = currentTheme === "dark" ? "dark" : "light";
+            root.classList.add(resolved);
         }
 
+        setResolvedTheme(resolved);
         localStorage.setItem("tasgrid-theme", currentTheme);
     });
 
     return (
-        <ThemeProviderContext.Provider value={{ theme, setTheme }}>
+        <ThemeProviderContext.Provider value={{ theme, setTheme, resolvedTheme }}>
             {props.children}
         </ThemeProviderContext.Provider>
     );