nuxtui custom background color on homepage

[clear lagoon]

How would I override the default background color on only the homepage? I am using nuxtUI v3

[plush stratus]

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

---

To override the default background color on only the homepage in Nuxt UI v3, you have a few approaches:

Using CSS for a specific page

You can create a custom CSS class for your homepage and apply it to the page component:

1. First, make sure you have your CSS file imported in your project:

/* assets/css/main.css */
@import "tailwindcss" theme(static);
@import "@nuxt/ui";

.home-page {
  --ui-bg: var(--ui-color-neutral-50); /* Light mode */
}

.dark .home-page {
  --ui-bg: var(--ui-color-neutral-950); /* Dark mode */
}

2. Then in your homepage component (e.g., pages/index.vue), apply the class:

<template>
  <div class="home-page">
    <!-- Your homepage content -->
  </div>
</template>

Using Tailwind classes directly

You can also use Tailwind classes directly on your homepage component:

<template>
  <div class="bg-[--ui-color-neutral-50] dark:bg-[--ui-color-neutral-950]">
    <!-- Your homepage content -->
  </div>
</template>

Using Nuxt UI's design tokens

Nuxt UI v3 uses CSS variables as design tokens for consistent styling. You can leverage these tokens in your homepage component:

<template>
  <div class="bg-[--custom-home-bg]">
    <!-- Your homepage content -->
  </div>
</template>

<style>
:root {
  --custom-home-bg: #f0f4f8; /* Your custom color for light mode */
}
.dark {
  --custom-home-bg: #0f172a; /* Your custom color for dark mode */
}
</style>

These approaches allow you to customize the background color specifically for your homepage while maintaining the Nuxt UI theming system throughout the rest of your application.

For more information about Nuxt UI's theming system, you can refer to the Nuxt UI Theme documentation.

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

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