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

@@ -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 />

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?.()"
       >

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;