From 1ecac5ee4e0a656bbc7c04280c6abdcf514a2c87 Mon Sep 17 00:00:00 2001
From: Zack Spear <zackspear@users.noreply.github.com>
Date: Thu, 30 Jan 2025 11:14:30 -0800
Subject: [PATCH] fix(web): theme header differences (#1085)

* feat(theme): add default header colors for theme differences

* refactor(theme): update UserProfile component colors to use theme variables

* fix(theme): safely handle default header colors for themes
---
 web/components/UserProfile.ce.vue          |  4 +-
 web/components/UserProfile/ServerState.vue |  2 +-
 web/store/theme.ts                         | 49 +++++++++++++++++++++-
 3 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/web/components/UserProfile.ce.vue b/web/components/UserProfile.ce.vue
index 8b6983e20..176cb9039 100644
--- a/web/components/UserProfile.ce.vue
+++ b/web/components/UserProfile.ce.vue
@@ -120,7 +120,7 @@ onMounted(() => {
           <span class="text-right text-12px sm:text-18px hidden 2xs:block" v-html="description" />
           <span class="text-header-text-secondary hidden md:inline-block px-8px">&bull;</span>
         </template>
-        <button :title="t('Click to Copy LAN IP {0}', [lanIp])" class="opacity-100 hover:opacity-75 focus:opacity-75 transition-opacity" @click="copyLanIp()">
+        <button :title="t('Click to Copy LAN IP {0}', [lanIp])" class="text-header-text-primary opacity-100 hover:opacity-75 focus:opacity-75 transition-opacity" @click="copyLanIp()">
           {{ name }}
         </button>
         <span
@@ -132,7 +132,7 @@ onMounted(() => {
         </span>
       </h1>
 
-      <div class="block w-2px h-24px bg-popover" />
+      <div class="block w-2px h-24px bg-header-text-secondary" />
 
       <!-- Keep the sidebar out of staging/prod builds, but easily accessible for development -->
       <NotificationsSidebar />
diff --git a/web/components/UserProfile/ServerState.vue b/web/components/UserProfile/ServerState.vue
index f98388616..983a645c8 100644
--- a/web/components/UserProfile/ServerState.vue
+++ b/web/components/UserProfile/ServerState.vue
@@ -21,7 +21,7 @@ const upgradeAction = computed((): ServerStateDataAction | undefined => {
   <span class="flex flex-row items-center gap-x-8px">
     <template v-if="upgradeAction">
       <UpcServerStateBuy
-        class="text-white"
+        class="text-header-text-secondary"
         :title="t('Upgrade Key')"
         @click="upgradeAction.click?.()"
       >
diff --git a/web/store/theme.ts b/web/store/theme.ts
index 3dc953c84..fe0813414 100644
--- a/web/store/theme.ts
+++ b/web/store/theme.ts
@@ -74,6 +74,39 @@ export const defaultColors: Record<string, ThemeVariables> = {
   },
 } as const;
 
+/**
+ * Unraid default theme colors do not have consistent colors for the header.
+ * This is a workaround to set the correct colors for the header.
+ * DARK THEMES: black, gray
+ * DARK HEADER THEMES: white, gray
+ * LIGHT THEMES: white, gray
+ * LIGHT HEADER THEMES: black, gray
+ */
+export const defaultAzureGrayHeaderColors: ThemeVariables = { // azure and gray header colors are the same but the background color is different
+  '--header-text-primary': '#39587f',
+  '--header-text-secondary': '#606e7f',
+};
+export const defaultHeaderColors: Record<string, ThemeVariables> = {
+  azure: {
+    ...defaultAzureGrayHeaderColors,
+    '--header-background-color': '#1c1b1b',
+  },
+  black: {
+    '--header-text-primary': '#1c1c1c',
+    '--header-text-secondary': '#999999',
+    '--header-background-color': '#f2f2f2',
+  },
+  gray: {
+    ...defaultAzureGrayHeaderColors,
+    '--header-background-color': '#f2f2f2',
+  },
+  white: {
+    '--header-text-primary': '#f2f2f2',
+    '--header-text-secondary': '#999999',
+    '--header-background-color': '#1c1b1b',
+  },
+};
+
 // used to swap the UPC text color when using the azure or gray theme
 export const DARK_THEMES = ['black', 'gray'] as const;
 
@@ -81,9 +114,12 @@ export const useThemeStore = defineStore('theme', () => {
   // State
   const theme = ref<Theme | undefined>();
 
-  const activeColorVariables = ref<ThemeVariables>(defaultColors.light);
-  // Getters
+  const activeColorVariables = ref<ThemeVariables>({
+    ...defaultColors.light,
+    ...defaultHeaderColors['white'],
+  });
 
+  // Getters
   const darkMode = computed<boolean>(
     () => DARK_THEMES.includes(theme.value?.name as (typeof DARK_THEMES)[number]) ?? false
   );
@@ -106,6 +142,15 @@ export const useThemeStore = defineStore('theme', () => {
     const body = document.body;
     const selectedMode = darkMode.value ? 'dark' : 'light';
 
+    // set the default header colors for the current theme
+    const themeName = theme.value?.name;
+    if (themeName && themeName in defaultHeaderColors) {
+      customColorVariables[selectedMode] = {
+        ...customColorVariables[selectedMode],
+        ...defaultHeaderColors[themeName],
+      };
+    }
+
     // overwrite with hex colors set in webGUI @ /Settings/DisplaySettings
     if (theme.value?.textColor) {
       customColorVariables[selectedMode]['--header-text-primary'] = theme.value.textColor;