feat: add ability to style setting button in user menu

Author: yaroslav8765

adminforth/modules/styles.ts

@@ -346,6 +346,18 @@ export const styles = () => ({
     lightCardTitle: "#374151",
     lightCardDescription: "#6B7280",
 
+    lightUserMenuSettingsButtonBackground: "#FFFFFF",
+    lightUserMenuSettingsButtonBackgroundHover: "#FFFFFF",
+    lightUserMenuSettingsButtonBackgroundExpanded: "#E6E6E6",
+    lightUserMenuSettingsButtonText: "#000000",
+    lightUserMenuSettingsButtonTextHover: "#000000",
+    lightUserMenuSettingsButtonDropdownItemBackground: "#E6E6E6",
+    lightUserMenuSettingsButtonDropdownItemBackgroundHover: "#FFFFFF",
+    lightUserMenuSettingsButtonDropdownItemText: "alias:lightBreadcrumbsHomepageText",
+    lightUserMenuSettingsButtonDropdownItemTextHover: "alias:lightBreadcrumbsHomepageTextHover",
+
+
+
     // colors for dark theme
     darkHtml: "#111827",
 
@@ -689,6 +701,16 @@ export const styles = () => ({
     darkCardTitle: "#FFFFFF", // card title
     darkCardDescription: "#9CA3AF", // card description
 
+    darkUserMenuSettingsButtonBackground: "alias:darkPrimary",
+    darkUserMenuSettingsButtonBackgroundHover: "alias:darkSidebarItemHover",
+    darkUserMenuSettingsButtonBackgroundExpanded: "alias:darkUserMenuSettingsButtonBackgroundHover",
+    darkUserMenuSettingsButtonText: "#FFFFFF",
+    darkUserMenuSettingsButtonTextHover: "#FFFFFF",
+    darkUserMenuSettingsButtonDropdownItemBackground: "alias:darkUserMenuSettingsButtonBackgroundHover",
+    darkUserMenuSettingsButtonDropdownItemBackgroundHover: "#alias:darkUserMenuSettingsButtonBackground",
+    darkUserMenuSettingsButtonDropdownItemText: "#FFFFFF",
+    darkUserMenuSettingsButtonDropdownItemTextHover: "#FFFFFF",
+
   },
   boxShadow: {
     customLight: "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow

adminforth/spa/src/components/UserMenuSettingsButton.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="min-w-40">
-    <div class="cursor-pointer flex items-center justify-between gap-1 block px-4 py-2 text-sm text-black 
-      hover:bg-html dark:text-darkSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextActive 
+    <div class="cursor-pointer flex items-center justify-between gap-1 block px-4 py-2 text-sm 
+      bg-lightUserMenuSettingsButtonBackground hover:bg-lightUserMenuSettingsButtonBackgroundHover
+      text-lightUserMenuSettingsButtonText hover:text-lightUserMenuSettingsButtonTextHover
+      dark:bg-darkUserMenuSettingsButtonBackground dark:hover:bg-darkUserMenuSettingsButtonBackgroundHover
+      dark:text-darkUserMenuSettingsButtonText dark:hover:text-darkUserMenuSettingsButtonTextHover
       w-full select-none "
-      :class="{ 'bg-black bg-opacity-10	': showDropdown }"
+      :class="{ 'bg-lightUserMenuSettingsButtonBackgroundExpanded hover:bg-lightUserMenuSettingsButtonBackgroundExpanded dark:bg-darkUserMenuSettingsButtonBackgroundExpanded	hover:dark:bg-darkUserMenuSettingsButtonBackgroundExpanded ': showDropdown }"
       @click="showDropdown = !showDropdown"
     >
         <span>Settings</span>
@@ -15,11 +18,10 @@
     <div v-if="showDropdown" >
 
       <router-link class="cursor-pointer flex items-center gap-1 block px-4 py-1 text-sm 
-        text-black dark:text-darkSidebarTextHover
-        bg-black bg-opacity-10	
-        hover:brightness-110
-        hover:text-lightPrimary dark:hover:text-darkPrimary
-        hover:bg-lightPrimaryContrast dark:hover:bg-darkPrimaryContrast
+        bg-lightUserMenuSettingsButtonDropdownItemBackground hover:bg-lightUserMenuSettingsButtonDropdownItemBackgroundHover
+        text-lightUserMenuSettingsButtonDropdownItemText hover:text-lightUserMenuSettingsButtonDropdownItemTextHover
+        dark:bg-darkUserMenuSettingsButtonDropdownItemBackground dark:hover:bg-darkUserMenuSettingsButtonDropdownItemBackgroundHover
+        dark:text-darkUserMenuSettingsButtonDropdownItemText dark:hover:text-darkUserMenuSettingsButtonDropdownItemTextHover
         w-full text-select-none pl-5 select-none"
         v-for="option in options"
         :to="getRoute(option)"