UCalendar theming in Nuxt UI 4.1: custom palette + day-cell hover/variants
Hi! 
I’m using Nuxt 4.1 with Nuxt UI 4.1 and the UCalendar component. I’d like to fully customize its colors and states.
Goals:
Use a custom color (not just the built-in ones), and define lighter/darker variants.
Change the hover color on day cells specifically (different from the base color).
Generally understand the best way to theme the whole calendar (header, selected day, today, range, disabled days, hover, focus, etc.).
Example of my current usage:
Docs I’m referencing: https://ui.nuxt.com/components/calendar#fixed-weeks
Questions:
What’s the recommended way to register a custom palette and use it via the color prop (e.g., color="brand")?
How can I override hover/focus/selected/today styles for individual day cells?
Is there a :ui prop or class API that targets day cells and header elements?
Should this be done via global theme config (e.g., app.config.ts), Tailwind tokens, or per-component overrides?
If possible, could you share a small snippet showing the correct structure?
Thanks in advance!
I’m using Nuxt 4.1 with Nuxt UI 4.1 and the UCalendar component. I’d like to fully customize its colors and states.
Goals:
Use a custom color (not just the built-in ones), and define lighter/darker variants.
Change the hover color on day cells specifically (different from the base color).
Generally understand the best way to theme the whole calendar (header, selected day, today, range, disabled days, hover, focus, etc.).
Example of my current usage:
<UCalendar
v-model="selectedDate"
locale="fr-FR"
color="info"
class="w-full"
/>
Docs I’m referencing: https://ui.nuxt.com/components/calendar#fixed-weeks
Questions:
What’s the recommended way to register a custom palette and use it via the color prop (e.g., color="brand")?
How can I override hover/focus/selected/today styles for individual day cells?
Is there a :ui prop or class API that targets day cells and header elements?
Should this be done via global theme config (e.g., app.config.ts), Tailwind tokens, or per-component overrides?
If possible, could you share a small snippet showing the correct structure?
Thanks in advance!
Nuxt UI
A calendar component for selecting single dates, multiple dates or date ranges.
