Nuxt•2mo ago

nuxtui custom background color on homepage

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

3 Replies

Hi @Isaac. 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 */
}

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

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

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

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

kapa.ai•2mo ago

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

IsaacOP•2mo ago

Actually found solution with useHead

Gaming

Programming

nuxtui custom background color on homepage

Did you find this page helpful?