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>

Nuxt•2y ago•

6 replies

lafllamme

Change style for Nuxt UI components

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

Change style for Nuxt UI components

Similar Threads

Change style for Nuxt UI components

Similar Threads

Similar Threads

Similar Threads