Not all colors (and shadings) are rendered in theme picker

[GalacticHypernova]

Environment

---

• Operating System: Windows_NT
• Node Version: v24.11.0
• Nuxt Version: 4.2.0
• CLI Version: 3.29.3
• Nitro Version: 2.12.8
• Package Manager: yarn@4.10.2
• Builder: -
• User Config: modules, devtools, app
• Runtime Modules: @nuxt/ui@4.1.0
• Build Modules: -

---

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.1.0

Reproduction

<template>
	<div class="container mx-auto max-w-3xl pt-3 space-y-6 px-10">
		<div class="flex flex-col md:flex-row gap-6">
			<div class="flex flex-col gap-4">
				<h3 class="text-lg font-medium">
					Color Choices
				</h3>
				<div class="flex md:flex-col flex-wrap gap-2">
					<UButton
						v-for="color in colorsToChange"
						:key="color"
						:color="color"
						:variant="colorToChange === color ? 'subtle' : 'outline'"
						class="capitalize"
						@click="colorToChange = color"
					>
						{{ color }}
					</UButton>
				</div>
			</div>
			<USeparator
				orientation="vertical"
				size="xl"
				label=" "
				class="hidden md:block"
			/>
			<div class="flex flex-col gap-4">
				<h3 class="text-lg font-medium">
					Color Palette
				</h3>
				<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
					<UButton
						v-for="color in colors"
						:key="color"
						size="lg"
						color="neutral"
						:variant="currentColor === color ? 'soft' : 'outline'"
						class="capitalize ring-[var(--ui-border)] rounded-[var(--ui-radius)]"
						@click="currentColor = color"
					>
						<template #leading>
							<span
								class="inline-block size-4 rounded-full"
								:class="`bg-[var(--color-light)] dark:bg-[var(--color-dark)]`"
								:style="{
									'--color-light': `var(--color-${color}-500)`,
									'--color-dark': `var(--color-${color}-400)`
								}"
							/>
						</template>
						{{ color }}
					</UButton>
				</div>
			</div>
		</div>
		<h2 class="text-center text-2xl">
			Customize the shading of backgrounds/shadows
		</h2>
		<div class="flex flex-wrap justify-center gap-3">
			<UButton
				v-for="color in neutralColors"
				:key="color"
				size="lg"
				color="neutral"
				:variant="neutral === color ? 'soft' : 'outline'"
				class="capitalize ring-[var(--ui-border)] rounded-[var(--ui-radius)]"
				@click="neutral = color"
			>
				<template #leading>
					<span
						class="inline-block size-4 rounded-full"
						:class="`bg-[var(--color-light)] dark:bg-[var(--color-dark)]`"
						:style="{
							'--color-light': `var(--color-${color === 'neutral' ? 'old-neutral' : color}-500)`,
							'--color-dark': `var(--color-${color === 'neutral' ? 'old-neutral' : color}-400)`
						}"
					/>
				</template>
				{{ color }}
			</UButton>
		</div>
	</div>
</template>

<script setup lang="ts">
const appConfig = useAppConfig()
const colorsToChange = ['primary', 'secondary'] as const
const neutralColors = ['slate', 'gray', 'zinc', 'neutral', 'stone']
const neutral = computed({
	get() {
		return appConfig.ui.colors.neutral
	},
	set(option) {
		appConfig.ui.colors.neutral = option
		window.localStorage.setItem('nuxt-ui-neutral', appConfig.ui.colors.neutral)
	}
})
const colorToChange: Ref<'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'> = ref('primary')
const colors = ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
const currentColor = computed({
	get() {
		return appConfig.ui.colors[colorToChange.value]
	},
	set(option) {
		appConfig.ui.colors[colorToChange.value] = option
		window.localStorage.setItem(`nuxt-ui-${colorToChange.value}`, appConfig.ui.colors[colorToChange.value])
	}
})
</script>

Description

When opening the page (both in dev and in prod), only a few colors load in. In my case, in dark mode only red, orange, blue, gray, and neutral load in, and in light mode only red, yellow, green, blue, gray and neutral are present (image attached for dark mode).

This makes the color picker's design appear broken, although it is still functional and changes the color as expected.

Additional context

Logs

[romhml]

Tailwind cannot detect some classes in your case because you are constructing them dynamically. You should look at this: https://tailwindcss.com/docs/detecting-classes-in-source-files

[GalacticHypernova]

Hey @romhml !

Thanks for your answer, I overlooked that part. However, this is the same configuration that Nuxt UI docs use, and the theme picker there shows all colors. Could this be due to a quirk of the static theme?

[romhml]

Yep! Using theme(static) always generates all CSS variable instead of used ones, so this should work in your case.

[GalacticHypernova]

Thank you!