#Dark mode

1 messages · Page 1 of 1 (latest)

wild kindleBOT
#

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

#

To use dark mode with Nuxt UI 3, you have several options:

  1. Automatic dark mode support:
    Nuxt UI components are designed with dark mode in mind, thanks to Tailwind CSS dark mode class strategy and the @nuxtjs/color-mode module. This means dark mode works out of the box without any additional configuration Getting-started > Dark mode (https://ui.nuxt.com/getting-started/theming#dark-mode).

  2. Set default preference:
    You can set the default color mode preference in your nuxt.config.ts:

export default defineNuxtConfig({
  colorMode: {
    preference: 'dark'
  }
})

This will set the default color mode to dark Getting-started > Dark mode (https://ui.nuxt.com/getting-started/theming#dark-mode).

  1. Use color mode components:
    Nuxt UI Pro provides several components to switch between light and dark modes:
  1. Programmatic control:
    You can use the useColorMode composable to programmatically control the color mode:
<script setup lang="ts">
const colorMode = useColorMode()
const isDark = computed({
  get () {
    return colorMode.value === 'dark'
  },
  set () {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
  }
})
</script>

Getting-started > Dark mode (https://ui.nuxt.com/getting-started/theming#dark-mode)

#

Remember that you can customize the dark mode appearance by adjusting your app.config.ts file, where you can set specific variables for the dark mode Pro > Getting-started > Theming > Variables (https://ui.nuxt.com/pro/getting-started/theming#variables).

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

#

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

sage garnet
#

@wild kindle is it the same for ui3.nuxt.dev ?

wild kindleBOT
#

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

#

Yes, the dark mode functionality is the same for ui3.nuxt.dev, which is the documentation site for Nuxt UI 3. The information I provided earlier applies to Nuxt UI 3, which is the same framework documented on ui3.nuxt.dev.

Nuxt UI 3 is built with dark mode support out of the box, utilizing Tailwind CSS dark mode class strategy and the @nuxtjs/color-mode module Getting-started > Dark mode (https://ui.nuxt.com/getting-started/theming#dark-mode). This means that the components and features I described, such as setting preferences in nuxt.config.ts, using color mode components, and programmatic control with the useColorMode composable, are all applicable to the Nuxt UI 3 framework as documented on ui3.nuxt.dev.

If you're using Nuxt UI 3 in your project, you can follow the same approaches for implementing and customizing dark mode as outlined in the Nuxt UI documentation.

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