feat(module): support extra per-mode classes on <html> via ui.colorMode
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 65/100
- Issue type
- Feature
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- tailwindcss, typescript
- Domain
- developer-experience, frontend
Research direction
The change involves the color mode integration in the Nuxt UI module. Start by examining the module's configuration handling, likely in src/module.ts or a dedicated color mode integration file. Look for where ui.colorMode is processed and how it interacts with @nuxtjs/color-mode. The proposal requires extending the configuration type to accept ColorModeOptions and forwarding the extraClass setting. Test by modifying the configuration and checking the generated HTML class on the client.
Written by the indexing model from the issue text.
Description
Description
When using a third-party palette keyed on flavor classes (e.g. Catppuccin .latte / .mocha) alongside Nuxt UI, <html> needs both the mode class and the flavor class:
<html class="light latte">
<html class="dark mocha">
There's no config for this today. Toggling the class in a client plugin works, but it flashes on first paint because it runs after color mode's inline script.
Proposal
Accept it through the existing color mode integration and forward it:
// nuxt.config.ts
export default defineNuxtConfig({
ui: {
colorMode: {
extraClass: { light: ['latte'], dark: ['mocha'] },
},
},
})
- Nuxt: forward to
@nuxtjs/color-mode, which needs upstream support: nuxt-modules/color-mode#321 - Vue: map to VueUse
useColorMode({ modes }), which already supports space-separated classes (modes: { dark: 'dark mocha' })
ui.colorMode is a boolean today, so accepting boolean | ColorModeOptions keeps this additive and v4-able:
type ClassNameInput = string | readonly string[]
interface ColorModeOptions {
extraClass?: Readonly<Partial<Record<'light' | 'dark', ClassNameInput>>>
}
type UiColorModeOption = boolean | ColorModeOptions
It belongs in nuxt.config rather than app.config, because the no-flash script is generated from module options at build time.
Additional context
Related to the multi-theme direction in #6610 (Epic A6, [data-theme] blocks).
- Dominant language
- TypeScript
- Stars
- 7k
- Forks
- 1.1k
- Avg merge
- 1d 17h
- Merged PRs (30d)
- 170
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from nuxt/ui
-
NavigationMenu: expanding a nested item in vertical orientation collapses its parent when using v-modelPossibly taken @cristianchiriac claimed this 1 day ago. Open
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Maintainers usually reply within 1 day
-
UAvatar wrong root for passthoughPossibly taken @lazerg claimed this 48 days ago. Opentriage
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
triage
Difficulty 2/5 1-3 hours Newbie friendliness 64/100
Maintainers usually reply within 1 day
-
triage
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
v5
Difficulty 2/5 Half a day Newbie friendliness 66/100
Maintainers usually reply within 1 day
Similar issues
-
area:plugins enhancement platform:vscode
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
anthropics/claude-code#103166 ·
Maintainers usually reply within 1 day
-
check:failed streams:add
Difficulty 1/5 Under an hour Newbie friendliness 90/100
iptv-org/iptv#55744 · 1 comment ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 90/100
jitsi/jitsi-meet#18021 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
Maintainers usually reply within 1 day
-
spec: discovery input example can contain multiple aliases for one parameter, with no canonical oneOpen
Difficulty 1/5 Under an hour Newbie friendliness 95/100
x402-foundation/x402#3841 ·
Maintainers usually reply within 1 day