fix: theme issues when sent from graph (#1424)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Bug Fixes**
- Improved error handling and fallback logic when loading themes,
ensuring default values are used if loading fails or data is missing.
- **Refactor**
- Updated theme customization options to improve type accuracy and allow
certain color fields to be optional.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

api/generated-schema.graphql

@@ -940,14 +940,14 @@ type Theme {
   """Whether to show the banner gradient"""
   showBannerGradient: Boolean!
 
-  """The background color of the header"""
-  headerBackgroundColor: String!
-
   """Whether to show the description in the header"""
   showHeaderDescription: Boolean!
 
+  """The background color of the header"""
+  headerBackgroundColor: String
+
   """The text color of the header"""
-  headerPrimaryTextColor: String!
+  headerPrimaryTextColor: String
 
   """The secondary text color of the header"""
   headerSecondaryTextColor: String

api/src/unraid-api/graph/resolvers/customization/theme.model.ts

@@ -28,17 +28,17 @@ export class Theme {
     @IsBoolean()
     showBannerGradient: boolean = false;
 
-    @Field(() => String, { description: 'The background color of the header' })
+    @Field(() => Boolean, { description: 'Whether to show the description in the header' })
+    @IsBoolean()
+    showHeaderDescription: boolean = true;
+
+    @Field(() => String, { description: 'The background color of the header', nullable: true })
     @IsOptional()
     @IsString()
     @IsHexColor()
     headerBackgroundColor?: string;
 
-    @Field(() => Boolean, { description: 'Whether to show the description in the header' })
-    @IsBoolean()
-    showHeaderDescription: boolean = true;
-
-    @Field(() => String, { description: 'The text color of the header' })
+    @Field(() => String, { description: 'The text color of the header', nullable: true })
     @IsOptional()
     @IsString()
     @IsHexColor()

web/store/theme.ts

@@ -66,20 +66,34 @@ export const useThemeStore = defineStore('theme', () => {
     if (data) {
       theme.value = data;
     } else {
-      const result = await load();
-      if (result) {
-        if (result.publicTheme) {
+      try {
+        const result = await load();
+        if (result && result.publicTheme) {
           theme.value = {
-            name: result.publicTheme.name.toLowerCase(),
-            banner: result.publicTheme.showBannerImage,
-            bannerGradient: result.publicTheme.showBannerGradient,
-            bgColor: result.publicTheme.headerBackgroundColor,
-            descriptionShow: result.publicTheme.showHeaderDescription,
+            name: result.publicTheme.name?.toLowerCase() || 'white',
+            banner: result.publicTheme.showBannerImage ?? false,
+            bannerGradient: result.publicTheme.showBannerGradient ?? false,
+            bgColor: result.publicTheme.headerBackgroundColor || '',
+            descriptionShow: result.publicTheme.showHeaderDescription ?? false,
             metaColor: result.publicTheme.headerSecondaryTextColor || '',
-            textColor: result.publicTheme.headerPrimaryTextColor,
+            textColor: result.publicTheme.headerPrimaryTextColor || '',
           };
+          return;
         }
+      } catch (error) {
+        console.warn('Failed to load theme from server, using default:', error);
       }
+      
+      // Single fallback for both no data and error cases
+      theme.value = {
+        name: 'white',
+        banner: false,
+        bannerGradient: false,
+        bgColor: '',
+        descriptionShow: false,
+        metaColor: '',
+        textColor: '',
+      };
     }
   };