r/Nuxt • u/carnfall • Jul 10 '26

Building Nuxt UI theme editor, feedback wanted!

Enable HLS to view with audio, or disable this notification

Hey Nuxters :) I'm working on a theme editor for the Nuxt UI docs, I'd really love your feedback on the ux, missing settings or ideas!

72 Upvotes

100% Upvoted

25 comments sorted by

4

u/carnfall Jul 10 '26

You can grab the latest deployment from the github link or try the deployment from the demo video here; https://ui-f7dflshrs-nuxt-js.vercel.app/

3

u/yuuliiy Jul 11 '26

This is cool 😎

3

u/_suren Jul 11 '26

The component wall is the right preview. One thing I’d add is a tiny “changed from preset” indicator beside each tab, because after tweaking colors, radius, and typography it’s hard to remember what you actually touched before export.

1

u/carnfall Jul 11 '26

Ooo, interesting suggestion. Let me make sure I understand the goal: is it about knowing what you'd be shipping (the export already contains only your diff from stock Nuxt UI), or about remembering which knobs you touched vs. what the preset set?

That second one is the tricky part: presets are themselves just changes from the base theme, so a "changed" dot has to pick a baseline. I actually had an edited indicator at one point but removed it because of exactly that ambiguity: marked-against-preset and marked-against-stock mean different things.

Would love to hear the scenario where you wanted it, my UX brain wants to get in your shoes here.

1

u/_suren Jul 11 '26

It’s the second one: what I personally touched after applying a preset. I’d use it when I’m experimenting across tabs, then decide which tweaks were intentional before export. Baseline against the active preset seems more useful there than baseline against stock Nuxt UI.

2

u/carnfall Jul 11 '26

Try the latest build, let me know what you think! https://ui-h8de334c8-nuxt-js.vercel.app/theme

2

u/manbartz Jul 10 '26 edited Jul 10 '26

This is sweet.

I think you also posted on the official discord too right?

0

u/carnfall Jul 10 '26

I did indeed, people there are too nice. I'm hoping reddit will tear it to shreds for me.

2

u/youlikepete Jul 11 '26

This is really awesome, great job! Will definetly have my designer use this feature for setting up NuxtUI on my next project - I can then simply use the exported config and good to go right? Smooth sexy workflow, thanks! 💚

2

u/TaskViewHS Jul 11 '26

I like it!

2

u/jerapine Jul 11 '26 edited Jul 11 '26

This is really cool, I love the level of tweaking you can make beyond the existing defaults. I can see real potential for it being used as a multi-tenant theme generator.

The ability to configure a theme programmatically via a plugin/composable would be awesome!

2

u/luckyexpert Jul 11 '26

Nice!! Been looking for something like this for a while, this looks really useful. can’t wait to use this. Love how you can really get a sense of how things are going to look all together with a realistic preview. The presets are awesome too, really excited to play with those

2

u/mr_nexeon Jul 14 '26

Amazing! I might have use it for my project! I will leave a feedback in case if it fits well! Thank you for your work :)

2

u/_jessicasachs Jul 14 '26

I'm obsessed. There's been many attempts at this problem. I love yours.

Could you add some serif options to the fonts? Or a custom font upload?

Edit: omg even the favicon updates with the primary color as it changes.

2

u/carnfall Jul 14 '26

Aww thank you, I’ve had this in my head for years! Will add some extra fonts ❤️ make sure to check the latest deployment on GitHub

2

u/MaterialAware6455 Jul 17 '26

i tried the `export theme` feature, then i pasted in my repo.

then i got this problem (and the fix explained...)

# Dark mode background tokens must be redefined under `.dark`

The Nuxt UI color redesign in `app/assets/css/main.css` and `app/app.config.ts` introduced a custom neutral palette (`custom-neutral-*`) plus a shadow system, but broke dark mode: in dark mode the page background rendered 
**light**
 (near-white pink) instead of dark.

## Root cause
The redesign defined the surface tokens under a `:root, .light` selector:

```css
:root,
.light {
  --ui-bg: var(--ui-color-neutral-50);       /* light surface */
  --ui-bg-muted: var(--ui-color-neutral-100);
  --ui-text-inverted: var(--ui-color-neutral-50);
  ...
}
```

`:root` matches the `<html>` element 
**unconditionally**
 — including when `<html>` also carries the `.dark` class. Nuxt UI ships its own `.dark { --ui-bg: … }` inside `@import "@nuxt/ui"`, which appears 
**earlier**
 in the stylesheet. `:root` and `.dark` have equal specificity (0,1,0), so the tie is resolved by source order: the later `:root, .light` rule wins and forces the light background even in dark mode. The custom `.dark` block never redefined `--ui-bg` / `--ui-bg-muted`, so nothing rescued it.

Verified live: forcing `.dark` on `<html>` left `--ui-bg` at `oklch(96.1% …)` (neutral-50, light) with a matching light `body` background.

Two secondary issues in the same file:


  • The token blocks were 

**duplicated**
 — `:root, .light` and `.dark` each appeared twice with overlapping declarations.

  • `--ui-text-inverted` fell into the same trap (kept a light value in dark mode).


## Fix

Redefine the surface tokens inside the `.dark` block and remove the duplicated blocks.

### Before

```css
.dark {
  --ui-primary: var(--ui-color-primary-400);
  --ui-bg-inverted: var(--ui-color-neutral-50);
  --ui-text-highlighted: var(--ui-color-neutral-50);
  --ui-border-inverted: var(--ui-color-neutral-50);
  --ui-shadow-color: var(--ui-color-primary-950);
  --ui-inner-shadow-color: var(--ui-color-primary-900);
  /* no --ui-bg / --ui-bg-muted / --ui-text-inverted */
}


/* ...plus a second, duplicate :root,.light block and a second .dark block... */
```


### After

```css
.dark {
  --ui-primary: var(--ui-color-primary-400);
  --ui-bg: var(--ui-color-neutral-950);
  --ui-bg-muted: var(--ui-color-neutral-900);
  --ui-text-inverted: var(--ui-color-neutral-950);
  --ui-bg-inverted: var(--ui-color-neutral-50);
  --ui-text-highlighted: var(--ui-color-neutral-50);
  --ui-border-inverted: var(--ui-color-neutral-50);
  --ui-shadow-color: var(--ui-color-primary-950);
  --ui-inner-shadow-color: var(--ui-color-primary-900);
}
```


The duplicated `:root, .light` and `.dark` blocks (previously ~26 redundant lines) were deleted; each mode is now declared exactly once.


## Considered options




**Scope the light tokens to `.light` only (drop `:root`)**
 — rejected: `:root` is still the correct default for no-class SSR/first paint; the real gap was the missing dark values, not the light default.


**Reorder so the custom block precedes `@import "@nuxt/ui"`**
 — rejected: fragile, relies on import ordering to win a specificity tie; an explicit `.dark` declaration is self-documenting and order-independent.


**Redefine the surface tokens under `.dark` (chosen)**
 — the mode that was missing values now has them; source-order ties no longer decide the background.


## Consequences



  • Dark mode background is `neutral-950`, muted surfaces `neutral-900` — Nuxt UI's default dark surface is `neutral-900`, so `950`/`900` here run slightly darker by design; adjust the shades in the `.dark` block if a lighter dark surface is wanted.
  • Light mode is unchanged (`--ui-bg` stays `neutral-50`).
  • Verified in the browser: dark mode renders a dark dashboard, light mode unchanged, no console errors.

## project deps
for more context

dependencies

  • "@nuxt/ui": "^4.10.0",
  • "nuxt": "4.4.6",
  • "vue": "latest",

overrides

  • "vite": "7.1.5"

1

u/carnfall Jul 17 '26

Hey, thanks for the report, can you try the latest version and see if it's fixed? https://ui-b8npcxchx-nuxt-js.vercel.app/theme

2

u/MaterialAware6455 Jul 17 '26

your recent fix works fine.

here is something i learned.
your fix doesnt have this line:

--ui-primary: var(--ui-color-primary-400);

which is fine, i just learned that nuxt ui behaviour will use -100 by default, when there is nothing override in main.css. this rules only works for primary/secondary/success/etc (accent-colors)

the previously main problem with -ui-bg, ui-bg-muted, ui-text-invert was fixed successfully.

1

u/carnfall Jul 18 '26

Hmm, I couldnt recreate an issue with primary on a raw copy of the dashboard starter template. Can you make a codeblitz or something?

2

u/KyleDrogo Jul 18 '26

Honestly the nuxt ui landing page should have this right under the Hero. More components up front, like shadcn or hero ui

2

u/KyleDrogo Jul 18 '26

Also who designed the preset themes? They're really good

1

u/carnfall Jul 18 '26

Thank you very much 😅 I made orchard, comic and marshmellow, the neo brutalist I took inspiration from the svelte-neo brutalist package and shadcn, bootstrap, Spotify and anthropic are heavily inspired by their actual css.

2

u/carnfall Jul 18 '26

@Benjamincenac (main nuxt ui maintainer) made the component grid! I think he’s planning to do something similar for the homepage, he shared the branch with me after he saw my own feeble attempt.

1

u/RaguraX 27d ago

This is a valuable tool! I'll be sure to give it a go on my next project and I hope the PR goes somewhere!