fix: enhance dark mode support in theme handling (#1808)

- Added PHP logic to determine if the current theme is dark and set a
CSS variable accordingly.
- Introduced a new function to retrieve the dark mode state from the CSS
variable in JavaScript.
- Updated the theme store to initialize dark mode based on the CSS
variable, ensuring consistent theme application across the application.

This improves user experience by ensuring the correct theme is applied
based on user preferences.

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

* **New Features**
* Server-persisted theme mutation and client action to fetch/apply
themes

* **Improvements**
* Safer theme parsing and multi-source initialization (CSS var, storage,
cookie, server)
* Robust dark-mode detection and propagation across document, modals and
teleport containers
* Responsive banner/header gradient handling with tunable CSS variables
and fallbacks

* **Tests**
* Expanded tests for theme flows, dark-mode detection, banner gradients
and manifest robustness

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: elibosley

@tailwind-shared/base-utilities.css

@@ -63,15 +63,6 @@
 */
 
 .unapi {
-    --color-alpha: #1c1b1b;
-    --color-beta: #f2f2f2;
-    --color-gamma: #999999;
-    --color-gamma-opaque: rgba(153, 153, 153, 0.5);
-    --color-customgradient-start: rgba(242, 242, 242, 0);
-    --color-customgradient-end: rgba(242, 242, 242, 0.85);
-    --shadow-beta: 0 25px 50px -12px rgba(242, 242, 242, 0.15);
-    --ring-offset-shadow: 0 0 var(--color-beta);
-    --ring-shadow: 0 0 var(--color-beta);
   }
 
 .unapi button:not(:disabled),

@tailwind-shared/theme-variants.css

@@ -11,6 +11,11 @@
   --color-beta: #1c1b1b;
   --color-gamma: #ffffff;
   --color-gamma-opaque: rgba(255, 255, 255, 0.3);
+  --color-header-gradient-start: color-mix(in srgb, var(--header-background-color) 0%, transparent);
+  --color-header-gradient-end: color-mix(in srgb, var(--header-background-color) 100%, transparent);
+  --shadow-beta: 0 25px 50px -12px color-mix(in srgb, var(--color-beta) 15%, transparent);
+  --ring-offset-shadow: 0 0 var(--color-beta);
+  --ring-shadow: 0 0 var(--color-beta);
 }
 
 /* Black Theme */
@@ -21,15 +26,26 @@
   --color-beta: #f2f2f2;
   --color-gamma: #1c1b1b;
   --color-gamma-opaque: rgba(28, 27, 27, 0.3);
+  --color-header-gradient-start: color-mix(in srgb, var(--header-background-color) 0%, transparent);
+  --color-header-gradient-end: color-mix(in srgb, var(--header-background-color) 100%, transparent);
+  --shadow-beta: 0 25px 50px -12px color-mix(in srgb, var(--color-beta) 15%, transparent);
+  --ring-offset-shadow: 0 0 var(--color-beta);
+  --ring-shadow: 0 0 var(--color-beta);
 }
 
 /* Gray Theme */
-.Theme--gray {
+.Theme--gray,
+.Theme--gray.dark {
   --color-border: #383735;
   --color-alpha: #ff8c2f;
   --color-beta: #383735;
   --color-gamma: #ffffff;
   --color-gamma-opaque: rgba(255, 255, 255, 0.3);
+  --color-header-gradient-start: color-mix(in srgb, var(--header-background-color) 0%, transparent);
+  --color-header-gradient-end: color-mix(in srgb, var(--header-background-color) 100%, transparent);
+  --shadow-beta: 0 25px 50px -12px color-mix(in srgb, var(--color-beta) 15%, transparent);
+  --ring-offset-shadow: 0 0 var(--color-beta);
+  --ring-shadow: 0 0 var(--color-beta);
 }
 
 /* Azure Theme */
@@ -39,6 +55,11 @@
   --color-beta: #e7f2f8;
   --color-gamma: #336699;
   --color-gamma-opaque: rgba(51, 102, 153, 0.3);
+  --color-header-gradient-start: color-mix(in srgb, var(--header-background-color) 0%, transparent);
+  --color-header-gradient-end: color-mix(in srgb, var(--header-background-color) 100%, transparent);
+  --shadow-beta: 0 25px 50px -12px color-mix(in srgb, var(--color-beta) 15%, transparent);
+  --ring-offset-shadow: 0 0 var(--color-beta);
+  --ring-shadow: 0 0 var(--color-beta);
 }
 
 /* Dark Mode Overrides */

api/generated-schema.graphql

@@ -944,6 +944,23 @@ input UpdateApiKeyInput {
   permissions: [AddPermissionInput!]
 }
 
+"""Customization related mutations"""
+type CustomizationMutations {
+  """Update the UI theme (writes dynamix.cfg)"""
+  setTheme(
+    """Theme to apply"""
+    theme: ThemeName!
+  ): Theme!
+}
+
+"""The theme name"""
+enum ThemeName {
+  azure
+  black
+  gray
+  white
+}
+
 """
 Parity check related mutations, WIP, response types and functionaliy will change
 """
@@ -1042,14 +1059,6 @@ type Theme {
   headerSecondaryTextColor: String
 }
 
-"""The theme name"""
-enum ThemeName {
-  azure
-  black
-  gray
-  white
-}
-
 type ExplicitStatusItem {
   name: String!
   updateStatus: UpdateStatus!
@@ -2449,6 +2458,7 @@ type Mutation {
   vm: VmMutations!
   parityCheck: ParityCheckMutations!
   apiKey: ApiKeyMutations!
+  customization: CustomizationMutations!
   rclone: RCloneMutations!
   createDockerFolder(name: String!, parentId: String, childrenIds: [String!]): ResolvedOrganizerV1!
   setDockerFolderChildren(folderId: String, childrenIds: [String!]!): ResolvedOrganizerV1!

api/src/unraid-api/graph/resolvers/customization/customization.module.ts

@@ -1,9 +1,11 @@
 import { Module } from '@nestjs/common';
 
+import { CustomizationMutationsResolver } from '@app/unraid-api/graph/resolvers/customization/customization.mutations.resolver.js';
 import { CustomizationResolver } from '@app/unraid-api/graph/resolvers/customization/customization.resolver.js';
 import { CustomizationService } from '@app/unraid-api/graph/resolvers/customization/customization.service.js';
 
 @Module({
-    providers: [CustomizationService, CustomizationResolver],
+    providers: [CustomizationService, CustomizationResolver, CustomizationMutationsResolver],
+    exports: [CustomizationService],
 })
 export class CustomizationModule {}

api/src/unraid-api/graph/resolvers/customization/customization.mutations.resolver.ts

@@ -0,0 +1,25 @@
+import { Args, ResolveField, Resolver } from '@nestjs/graphql';
+
+import { AuthAction, Resource } from '@unraid/shared/graphql.model.js';
+import { UsePermissions } from '@unraid/shared/use-permissions.directive.js';
+
+import { CustomizationService } from '@app/unraid-api/graph/resolvers/customization/customization.service.js';
+import { Theme, ThemeName } from '@app/unraid-api/graph/resolvers/customization/theme.model.js';
+import { CustomizationMutations } from '@app/unraid-api/graph/resolvers/mutation/mutation.model.js';
+
+@Resolver(() => CustomizationMutations)
+export class CustomizationMutationsResolver {
+    constructor(private readonly customizationService: CustomizationService) {}
+
+    @ResolveField(() => Theme, { description: 'Update the UI theme (writes dynamix.cfg)' })
+    @UsePermissions({
+        action: AuthAction.UPDATE_ANY,
+        resource: Resource.CUSTOMIZATIONS,
+    })
+    async setTheme(
+        @Args('theme', { type: () => ThemeName, description: 'Theme to apply' })
+        theme: ThemeName
+    ): Promise<Theme> {
+        return this.customizationService.setTheme(theme);
+    }
+}

api/src/unraid-api/graph/resolvers/customization/customization.service.ts

@@ -9,7 +9,9 @@ import * as ini from 'ini';
 
 import { emcmd } from '@app/core/utils/clients/emcmd.js';
 import { fileExists } from '@app/core/utils/files/file-exists.js';
+import { loadDynamixConfigFromDiskSync } from '@app/store/actions/load-dynamix-config-file.js';
 import { getters, store } from '@app/store/index.js';
+import { updateDynamixConfig } from '@app/store/modules/dynamix.js';
 import {
     ActivationCode,
     PublicPartnerInfo,
@@ -466,4 +468,16 @@ export class CustomizationService implements OnModuleInit {
             showHeaderDescription: descriptionShow === 'yes',
         };
     }
+
+    public async setTheme(theme: ThemeName): Promise<Theme> {
+        this.logger.log(`Updating theme to ${theme}`);
+        await this.updateCfgFile(this.configFile, 'display', { theme });
+
+        // Refresh in-memory store so subsequent reads get the new theme without a restart
+        const paths = getters.paths();
+        const updatedConfig = loadDynamixConfigFromDiskSync(paths['dynamix-config']);
+        store.dispatch(updateDynamixConfig(updatedConfig));
+
+        return this.getTheme();
+    }
 }

api/src/unraid-api/graph/resolvers/mutation/mutation.model.ts

@@ -24,6 +24,11 @@ export class VmMutations {}
 })
 export class ApiKeyMutations {}
 
+@ObjectType({
+    description: 'Customization related mutations',
+})
+export class CustomizationMutations {}
+
 @ObjectType({
     description: 'Parity check related mutations, WIP, response types and functionaliy will change',
 })
@@ -54,6 +59,9 @@ export class RootMutations {
     @Field(() => ApiKeyMutations, { description: 'API Key related mutations' })
     apiKey: ApiKeyMutations = new ApiKeyMutations();
 
+    @Field(() => CustomizationMutations, { description: 'Customization related mutations' })
+    customization: CustomizationMutations = new CustomizationMutations();
+
     @Field(() => ParityCheckMutations, { description: 'Parity check related mutations' })
     parityCheck: ParityCheckMutations = new ParityCheckMutations();
 

api/src/unraid-api/graph/resolvers/mutation/mutation.resolver.ts

@@ -3,6 +3,7 @@ import { Mutation, Resolver } from '@nestjs/graphql';
 import {
     ApiKeyMutations,
     ArrayMutations,
+    CustomizationMutations,
     DockerMutations,
     ParityCheckMutations,
     RCloneMutations,
@@ -37,6 +38,11 @@ export class RootMutationsResolver {
         return new ApiKeyMutations();
     }
 
+    @Mutation(() => CustomizationMutations, { name: 'customization' })
+    customization(): CustomizationMutations {
+        return new CustomizationMutations();
+    }
+
     @Mutation(() => RCloneMutations, { name: 'rclone' })
     rclone(): RCloneMutations {
         return new RCloneMutations();

plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/web-components-extractor.php

@@ -44,7 +44,12 @@ private function sanitizeForId(string $input): string
     public function getManifestContents(string $manifestPath): array
     {
         $contents = @file_get_contents($manifestPath);
-        return $contents ? json_decode($contents, true) : [];
+        if (!$contents) {
+            return [];
+        }
+
+        $decoded = json_decode($contents, true);
+        return is_array($decoded) ? $decoded : [];
     }
 
     private function processManifestFiles(): string
@@ -209,6 +214,11 @@ private function getDisplayThemeVars(): ?array
         }
 
         $theme = strtolower(trim($display['theme'] ?? ''));
+        $darkThemes = ['gray', 'black'];
+        $isDarkMode = in_array($theme, $darkThemes, true);
+        $vars['--theme-dark-mode'] = $isDarkMode ? '1' : '0';
+        $vars['--theme-name'] = $theme ?: 'white';
+        
         if ($theme === 'white') {
             if (!$textPrimary) {
                 $vars['--header-text-primary'] = 'var(--inverse-text-color, #ffffff)';
@@ -218,19 +228,35 @@ private function getDisplayThemeVars(): ?array
             }
         }
 
+        // Unraid WebGUI stores banner enablement as a non-empty `display['banner']` value
+        // (typically the banner file name/path).
+        $shouldShowBanner = !empty($display['banner']);
         $bgColor = $this->normalizeHex($display['background'] ?? null);
         if ($bgColor) {
             $vars['--header-background-color'] = $bgColor;
-            $vars['--header-gradient-start'] = $this->hexToRgba($bgColor, 0);
-            $vars['--header-gradient-end'] = $this->hexToRgba($bgColor, 0.7);
+            // Only set gradient variables if banner image is enabled
+            if ($shouldShowBanner) {
+                $vars['--header-gradient-start'] = $this->hexToRgba($bgColor, 0);
+                $vars['--header-gradient-end'] = $this->hexToRgba($bgColor, 1);
+            }
         }
 
         $shouldShowBannerGradient = ($display['showBannerGradient'] ?? '') === 'yes';
-        if ($shouldShowBannerGradient) {
-            $start = $vars['--header-gradient-start'] ?? 'rgba(0, 0, 0, 0)';
-            $end = $vars['--header-gradient-end'] ?? 'rgba(0, 0, 0, 0.7)';
+        if ($shouldShowBanner && $shouldShowBannerGradient) {
+            // If the user didn't set a custom background color, prefer existing theme defaults instead of falling back to black.
+            if (!isset($vars['--header-gradient-start'])) {
+                $vars['--header-gradient-start'] = 'var(--color-header-gradient-start, rgba(242, 242, 242, 0))';
+            }
+            if (!isset($vars['--header-gradient-end'])) {
+                $vars['--header-gradient-end'] = 'var(--color-header-gradient-end, rgba(242, 242, 242, 1))';
+            }
+            $start = $vars['--header-gradient-start'];
+            $end = $vars['--header-gradient-end'];
+            // Keep compatibility with older CSS that expects these names.
+            $vars['--color-header-gradient-start'] = $start;
+            $vars['--color-header-gradient-end'] = $end;
             $vars['--banner-gradient'] = sprintf(
-                'linear-gradient(90deg, %s 0, %s 90%%)',
+                'linear-gradient(90deg, %s 0, %s var(--banner-gradient-stop, 30%%))',
                 $start,
                 $end
             );