N
Nuxt•2mo ago
Reeed

change appearance of components between light and dark mode in nuxt ui 3

i alwasy get the components with light styling by default, but i can't find in the documentation about how to change the appearance for components in dark mode. i installed nuxt ui in my vue project btw.
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Reeed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'll help you with changing the appearance of components between light and dark mode in Nuxt UI 3 for your Vue project. Setting Up Color Mode in Vue with Nuxt UI Nuxt UI automatically registers the useDark composable from VueUse as a Vue plugin, making it easy to switch between light and dark modes. Here's how you can implement it: 
<script setup>
import { useColorMode } from '@vueuse/core'

const mode = useColorMode()
</script>

<template>
  <UButton
    :icon="mode === 'dark' ? 'i-lucide-moon' : 'i-lucide-sun'"
    color="neutral"
    variant="ghost"
    @click="mode = mode === 'dark' ? 'light' : 'dark'"
  />
</template>
<script setup>
import { useColorMode } from '@vueuse/core'

const mode = useColorMode()
</script>

<template>
  <UButton
    :icon="mode === 'dark' ? 'i-lucide-moon' : 'i-lucide-sun'"
    color="neutral"
    variant="ghost"
    @click="mode = mode === 'dark' ? 'light' : 'dark'"
  />
</template>
This creates a button that toggles between light and dark modes Color Mode (Vue). Customizing Component Appearance for Dark Mode Nuxt UI uses CSS variables for theming that automatically adapt to light and dark modes. You can customize these variables in your CSS file: 
@import "tailwindcss" theme(static);
@import "@nuxt/ui";

:root {
  /* Light mode styles */
  --ui-bg: var(--ui-color-neutral-50);
  --ui-text: var(--ui-color-neutral-900);
}

.dark {
  /* Dark mode styles */
  --ui-bg: var(--ui-color-neutral-950);
  --ui-border: var(--ui-color-neutral-900);
}
@import "tailwindcss" theme(static);
@import "@nuxt/ui";

:root {
  /* Light mode styles */
  --ui-bg: var(--ui-color-neutral-50);
  --ui-text: var(--ui-color-neutral-900);
}

.dark {
  /* Dark mode styles */
  --ui-bg: var(--ui-color-neutral-950);
  --ui-border: var(--ui-color-neutral-900);
}
Nuxt UI provides a comprehensive set of design tokens for both light and dark modes, including variables for text, backgrounds, and borders Neutral Palette. Component-Specific Theming You can also customize specific components for dark mode by modifying their theme in your vite.config.ts: 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        button: {
          slots: {
            base: 'font-bold'
          }
        }
      }
    })
  ]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        button: {
          slots: {
            base: 'font-bold'
          }
        }
      }
    })
  ]
})
This example changes the font weight of all buttons Components theme. Using Color Mode Components Nuxt UI Pro provides several components specifically designed for color mode switching: 1. UColorModeButton - A button to toggle between light and dark mode ColorModeButton 2. UColorModeSwitch - A switch component for toggling modes ColorModeSwitch 3. UColorModeSelect - A select menu to choose between system, light, and dark modes ColorModeSelect These components automatically handle the mode switching for you. If you're still seeing only light styling by default, make sure your CSS is properly imported and that the dark mode class is being applied to your HTML element when the dark mode is active. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@736133521743020035> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?