Fix bright background on navbar icons in dark mode (#1400)

Co-authored-by: MiniDigger | Martin <[email protected]>
HangarMC · Aug 17, 2024 · eeb74db · eeb74db
1 parent e14f2d3
commit eeb74db
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/frontend/src/components/layout/Header.vue b/frontend/src/components/layout/Header.vue
@@ -225,14 +225,14 @@ function isRecent(date: string): boolean {
             </template>
           </DropdownButton>
         </div>
-        <button class="flex rounded-md p-2" hover="text-primary-500 bg-primary-0" aria-label="Toogle dark mode" @click="settings.toggleDarkMode()">
+        <button class="flex rounded-md p-2" hover="text-primary-500 bg-primary-0 dark:(text-white bg-zinc-700)" aria-label="Toogle dark mode" @click="settings.toggleDarkMode()">
           <icon-mdi-weather-night v-if="settings.darkMode" class="text-[1.2em]"></icon-mdi-weather-night>
           <icon-mdi-white-balance-sunny v-else class="text-[1.2em]"></icon-mdi-white-balance-sunny>
         </button>
         <div v-if="authStore.user">
           <Popper placement="bottom-end">
             <button
-              class="flex items-center gap-2 rounded-md p-2 hover:(text-primary-500 bg-primary-0)"
+              class="flex items-center gap-2 rounded-md p-2 hover:(text-primary-500 bg-primary-0 dark:(text-white bg-zinc-700))"
               aria-label="Notifications"
               @click="updateNotifications"
             >
@@ -304,7 +304,7 @@ function isRecent(date: string): boolean {
         <!-- Profile dropdown -->
         <div v-if="authStore.user">
           <Popper placement="bottom-end">
-            <button class="flex items-center gap-2 rounded-md p-2 hover:(text-primary-500 bg-primary-0)" @click="updateNavData">
+            <button class="flex items-center gap-2 rounded-md p-2 hover:(text-primary-500 bg-primary-0 dark:(text-white bg-zinc-700))" @click="updateNavData">
               <UserAvatar :username="authStore.user.name" :avatar-url="authStore.user.avatarUrl" size="xs" :disable-link="true" />
               {{ authStore.user.name }}
             </button>
@@ -345,11 +345,11 @@ function isRecent(date: string): boolean {
 
         <!-- Login/register buttons -->
         <div v-else class="flex gap-2">
-          <NuxtLink class="flex items-center rounded-md p-2 hover:(text-primary-500 bg-primary-0)" :to="auth.loginUrl(route.fullPath)" rel="nofollow">
+          <NuxtLink class="flex items-center rounded-md p-2 hover:(text-primary-500 bg-primary-0 dark:(text-white bg-zinc-700))" :to="auth.loginUrl(route.fullPath)" rel="nofollow">
             <icon-mdi-key-outline class="mr-1 flex-shrink-0 text-[1.2em]" />
             {{ t("nav.login") }}
           </NuxtLink>
-          <NuxtLink class="flex items-center rounded-md p-2 hover:(text-primary-500 bg-primary-0)" :to="auth.signupUrl(route.fullPath)">
+          <NuxtLink class="flex items-center rounded-md p-2 hover:(text-primary-500 bg-primary-0 dark:(text-white bg-zinc-700))" :to="auth.signupUrl(route.fullPath)">
             <icon-mdi-clipboard-outline class="mr-1 flex-shrink-0 text-[1.2em]" />
             {{ t("nav.signup") }}
           </NuxtLink>