#ColorMode

8 messages · Page 1 of 1 (latest)

stone fernBOT Dec 9, 2024, 3:21 AM

Hi @raw pelican. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

Based on the knowledge sources provided, I can address your question about the ColorModeButton and icon issues in Nuxt UI Pro.

The ColorModeButton is a component in Nuxt UI Pro that allows switching between color modes (light and dark). According to the ColorModeButton documentation (https://ui.nuxt.com/pro/components/color-mode-button), you can use it like this:

<template>
  <UColorModeButton />
</template>

If you're experiencing issues with icons not showing in the ColorModeButton, there are a few things to consider:

Icon Configuration: Make sure you have properly configured the icons in your app.config.ts file. The Theming documentation (https://ui.nuxt.com/pro/getting-started/theming#variables) shows an example of how to override icons:

export default defineAppConfig({
  ui: {
    icons: {
      dark: 'i-ph-moon-duotone',
      light: 'i-ph-sun-duotone',
      // other icons...
    }
  }
})

Icon Collections: Ensure you have the necessary icon collections configured in your nuxt.config.ts file. The Structure documentation (https://ui.nuxt.com/pro/getting-started/structure#nuxtconfigts) mentions that you can use any icon from Iconify.
Production Build Issues: There have been reports of icons not rendering in production builds. This issue is being tracked in the Nuxt Icon repository (https://github.com/nuxt/icon/issues/259). If you're experiencing this problem specifically in production, it might be related to this known issue.
Color Mode Configuration: Check your color mode configuration in nuxt.config.ts. The Dark mode documentation (https://ui.nuxt.com/getting-started/theming#dark-mode) shows how to configure it:

export default defineNuxtConfig({
  colorMode: {
    preference: 'system' // or 'light' or 'dark'
  }
})

If you've checked all these points and are still experiencing issues, it might be helpful to create a minimal reproduction of the problem and seek further assistance from the Nuxt community or maintainers.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@raw pelican Kapa.ai is still learning and improving, please let me know how I did by reacting below.

raw pelican Dec 9, 2024, 3:22 AM

@stone fern Sorry i'm not using the Pro version of Nuxt UI i'm using Nuxt UI V3 in Alpha

stone fernBOT Dec 9, 2024, 3:22 AM

Let me check the knowledge base for you again. One moment! :books:

I apologize for the confusion. Thank you for clarifying that you're using Nuxt UI V3 in Alpha, not the Pro version. Let me provide you with information relevant to the standard Nuxt UI version.

For Nuxt UI V3 (Alpha), the approach to color mode and icons is slightly different from the Pro version. Here are some key points to consider:

Icon Usage: In Nuxt UI V3, icons are typically used through the @nuxt/icon module. Make sure you have this module installed and configured in your nuxt.config.ts file.
Icon Collections: As mentioned in the Theming documentation (https://ui.nuxt.com/getting-started/theming#collections), you need to install the specific icon collections you want to use. For example, to use the i-uil-github icon, you would install the @iconify-json/uil collection.

Default Icons: You can replace the default icons for components in your app.config.ts file. The Theming documentation (https://ui.nuxt.com/getting-started/theming#defaults) provides an example of how to do this:

export default defineAppConfig({
  ui: {
    button: {
      default: {
        loadingIcon: 'i-octicon-sync-24'
      }
    },
    // other component configurations...
  }
})

Color Mode: For color mode functionality, Nuxt UI uses the @nuxtjs/color-mode module. You can configure it in your nuxt.config.ts file as shown in the Dark mode documentation (https://ui.nuxt.com/getting-started/theming#dark-mode):
```
export default defineNuxtConfig({
  colorMode: {
    preference: 'system' // or 'light' or 'dark'
  }
})
```
Manual Color Mode Toggle: If you want to create a custom color mode toggle, you can use the useColorMode composable. Here's an example from the documentation:

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

   <template>
     <ClientOnly>
       <UButton
         :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
         color="gray"
         variant="ghost"
         aria-label="Theme"
         @click="isDark = !isDark"
       />
       <template #fallback>
         <div class="w-8 h-8" />
       </template>
     </ClientOnly>
   </template>

If you're still experiencing issues with icons not showing up, it might be related to the icon collection not being properly installed or configured. Double-check your icon imports and make sure you're using the correct icon names as per the Iconify collections you've installed.