Nuxt•9mo ago

Change style for Nuxt UI components

Hello Nuxt UI Community, I've implemented a DarkModeToggle within my application's navigation using the UButton component from Nuxt UI. The toggle switches between light and dark themes perfectly. However, I've encountered an issue with hover effects when incorporating this button into my navigation menu. The button's default hover effect conflicts with my navigation's hover styling, resulting in what I describe as a "double hover" effect. My goal is to remove or disable the hover effect on the DarkModeToggle button to prevent it from clashing with the navigation's hover styling. I've tried several approaches, including custom UI overrides, but have not found a definitive solution. Could anyone provide guidance or suggest the best way to achieve this within the Nuxt UI framework? Any help or pointers would be greatly appreciated! Thank you in advance for your time and assistance. Below is the implementation of my DarkModeToggle button:

<script setup lang="ts">
const colorMode = useColorMode()
const isDark = computed({
  get () {
    return colorMode.value === 'dark'
  },
  set (value) {
    colorMode.value = value ? 'light' : 'dark'
  }
})
</script>

<template>
  <ClientOnly>
    <UButton
        :icon="isDark ? 'i-ph-moon-stars-duotone w-5 h5' : 'i-ph-sun-dim-duotone w-5 h5'"
        color="gray"
        variant="ghost"
        aria-label="Theme"
        @click="isDark = !isDark"
    ></UButton>
    <template #fallback>
      <div class="w-8 h-8" />
    </template>
  </ClientOnly>
</template>

<script setup lang="ts">
const colorMode = useColorMode()
const isDark = computed({
  get () {
    return colorMode.value === 'dark'
  },
  set (value) {
    colorMode.value = value ? 'light' : 'dark'
  }
})
</script>

<template>
  <ClientOnly>
    <UButton
        :icon="isDark ? 'i-ph-moon-stars-duotone w-5 h5' : 'i-ph-sun-dim-duotone w-5 h5'"
        color="gray"
        variant="ghost"
        aria-label="Theme"
        @click="isDark = !isDark"
    ></UButton>
    <template #fallback>
      <div class="w-8 h-8" />
    </template>
  </ClientOnly>
</template>

6 Replies

lafllammeOP•9mo ago

And here's how I added it to my UHorizontalNavigation:

<script setup lang="ts">
const route = useRoute()
const links = [
  // Links array including 'DarkMode', 'Home', 'Search', etc.
]
</script>

<template>
  <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800">
    <template #default="{link}">
      <div v-if="link.label === 'DarkMode'">
        <span><DarkModeToggle /></span>
      </div>
      <div v-else>
        <span class="group-hover:text-primary relative">{{link.label}}</span>
      </div>
    </template>
  </UHorizontalNavigation>
</template>

<script setup lang="ts">
const route = useRoute()
const links = [
  // Links array including 'DarkMode', 'Home', 'Search', etc.
]
</script>

<template>
  <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800">
    <template #default="{link}">
      <div v-if="link.label === 'DarkMode'">
        <span><DarkModeToggle /></span>
      </div>
      <div v-else>
        <span class="group-hover:text-primary relative">{{link.label}}</span>
      </div>
    </template>
  </UHorizontalNavigation>
</template>

lafllammeOP•9mo ago

lafllammeOP•9mo ago

I don't want to use this:

<UButton
        :icon="isDark ? 'i-ph-moon-stars-duotone w-5 h5' : 'i-ph-sun-dim-duotone w-5 h5'"
        color="gray"
        class="no-hover-effect"
        variant="ghost"
        aria-label="Theme"
        @click="isDark = !isDark"
    ></UButton>

<UButton
        :icon="isDark ? 'i-ph-moon-stars-duotone w-5 h5' : 'i-ph-sun-dim-duotone w-5 h5'"
        color="gray"
        class="no-hover-effect"
        variant="ghost"
        aria-label="Theme"
        @click="isDark = !isDark"
    ></UButton>

Flo•9mo ago

 :ui="{
    strategy: 'override',
    color: {
      gray: {
        ghost: 'text-gray-700 dark:text-gray-200 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
      }
    }
  }"

 :ui="{
    strategy: 'override',
    color: {
      gray: {
        ghost: 'text-gray-700 dark:text-gray-200 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
      }
    }
  }"

maybe?

lafllammeOP•9mo ago

@Flo Thanks! This is what I was searching for.

Flo•9mo ago

Glad I could help! 🙇🏼‍♂️

Gaming

Programming

Change style for Nuxt UI components