edewit · May 26, 2026 · May 26, 2026
@@ -159,8 +159,8 @@ const flattenVariables = (theme: ThemeType): FlattenedVariable[] => {
     const defaultValue = convert(v.defaultValue, theme);
     const variable = convert(v.variable, theme);
 
-    // Skip variables that don't have a value for this theme
-    if (defaultValue === undefined && variable === undefined) return;
+    // Skip variables that don't apply to this theme (no CSS variable name to set)
+    if (variable === undefined) return;
 
     const flattenedVar: FlattenedVariable = {
       name: v.name,

@@ -31,9 +31,13 @@ export const QuickTheme = ({ realm, theme }: QuickThemeProps) => {
     const { favicon, logo, bgimage, fileName } = realm;
 
     const logoName =
-      "img/logo" + logo?.name.substring(logo.name.lastIndexOf("."));
+      logo instanceof File
+        ? "img/logo" + logo.name.substring(logo.name.lastIndexOf("."))
+        : undefined;
     const bgimageName =
-      "img/bgimage" + bgimage?.name.substring(bgimage.name.lastIndexOf("."));
+      bgimage instanceof File
+        ? "img/bgimage" + bgimage.name.substring(bgimage.name.lastIndexOf("."))
+        : undefined;
 
     const themeNameClean =
       (realm.themeName ?? "quick-theme")

@@ -144,34 +144,42 @@ export const ThemeColors = ({
   const defaultValue = (v: DefaultValueType | undefined, theme: ThemeType) =>
     typeof v === "string" ? v : v?.[theme];
 
-  const reset = () => {
-    setOverriddenColors(new Set());
-
+  const buildThemeDefaults = (themeType: ThemeType): Record<string, string> => {
+    const themeMapping = themeType === "light" ? lightTheme() : darkTheme();
     const parentDefaults: Record<string, string> = {};
-    mapping.forEach((m) => {
+    themeMapping.forEach((m) => {
       if (m.defaultValue && !m.parentName) {
-        parentDefaults[m.name] = defaultValue(m.defaultValue, theme)!;
+        parentDefaults[m.name] = defaultValue(m.defaultValue, themeType)!;
       }
     });
-
-    form.reset({
-      [theme]: mapping.reduce<Record<string, string>>((acc, m) => {
-        if (!m.variable) return acc;
-
-        let value = defaultValue(m.defaultValue, theme);
-        if (m.parentName && value?.includes("{{")) {
-          const parentValue = parentDefaults[m.parentName];
-          if (parentValue) {
-            const resolved = resolveColorReferences(value, parentValue, theme);
-            value = resolveColorToHex(resolved);
-          }
+    return themeMapping.reduce<Record<string, string>>((acc, m) => {
+      if (!m.variable) return acc;
+      let value = defaultValue(m.defaultValue, themeType);
+      if (m.parentName && value?.includes("{{")) {
+        const parentValue = parentDefaults[m.parentName];
+        if (parentValue) {
+          const resolved = resolveColorReferences(
+            value,
+            parentValue,
+            themeType,
+          );
+          value = resolveColorToHex(resolved);
         }
+      }
+      if (value !== undefined) {
+        acc[defaultValue(m.variable, themeType)!] = value;
+      }
+      return acc;
+    }, {});
+  };
 
-        if (value !== undefined) {
-          acc[defaultValue(m.variable, theme)!] = value;
-        }
-        return acc;
-      }, {}),
+  const reset = () => {
+    setOverriddenColors(new Set());
+    const currentValues = form.getValues();
+    form.reset({
+      ...currentValues,
+      light: buildThemeDefaults("light"),
+      dark: buildThemeDefaults("dark"),
     });
   };
 
@@ -222,11 +230,15 @@ export const ThemeColors = ({
 
   useEffect(() => {
     setupForm();
+  }, [realm]);
+
+  useEffect(() => {
+    setOverriddenColors(new Set());
     switchTheme(theme);
     return () => {
       switchTheme(originalTheme);
     };
-  }, [realm, theme]);
+  }, [theme]);
 
   return (
     <>
@@ -300,14 +312,14 @@ export const ThemeColors = ({
                     <DefaultColorAccordion
                       label={m.name}
                       color={defaultValue(m.defaultValue, theme)!}
-                      key={m.name}
+                      key={`${theme}-${m.name}`}
                       name={`${theme}.${m.variable}`}
                       colorName={m.name}
                       >
                     />
                   ) : (
                     <ColorControl
-                      key={m.name}
+                      key={`${theme}-${m.name}`}
                       color={defaultValue(m.defaultValue, theme)!}
                       name={`${theme}.${m.variable!}`}
                       label={m.name}