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

Co-authored-by: MiniDigger | Martin <admin@benndorf.dev>
This commit is contained in:
MD 2024-08-17 16:15:20 +01:00 committed by GitHub
parent e14f2d34c6
commit eeb74db73a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

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