\n```\n\n### Will results something like this\n```html\n\u003Cdiv class=\"... root-test base-test\">\n ...\n \u003Cinput class=\"...\" />\n\u003C/div>\n```\n\n### Description\n\nWhen applying themes in `app.config.ts`, both **UInputTags** and **UInputMenu (multiple)** share the same weird behaviour compared with other components, where the class applied to `base` part of the component are applied to `root` part of the component.\n\n### Expected Behaviour\nThe applied class on `base` should be applied to the `\u003Cinput />`, not the `root` part of the component which is the outer `\u003Cdiv />` just like other input components such as **UInput**, **UInputNumber**, or **UTextarea**.\n\nCorrect me if I'm wrong if this are intended, thank you!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3047,3048,3049],{"name":3030,"color":3031},{"name":3033,"color":3034},{"name":3036,"color":3037},4530,"[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.7058969,{"description":3056,"labels":3057,"number":3061,"owner":3019,"repository":3039,"state":3021,"title":3062,"updated_at":3063,"url":3064,"score":3065},"### Environment\n\n- Operating System: \"linux/ubuntu 24.04\"\n- Node Version: \"22.15.1\"\n- Nuxt Version: \"3.17.6\"\n- Package Manager: \"10.9.2\"\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.6\n\n### Reproduction\n\nhttps://github.com/pbartyla/nuxt_color_mode_bug\n\n### Description\n\nWhen using [useColorMode](https://ui.nuxt.com/getting-started/color-mode/nuxt), if a user manually selects a theme mode (light or dark) that differs from their system preference, and then refreshes the page, the stored mode is correctly applied, and isDark returns the expected value immediately.\n\nHowever, UI elements that rely on isDark for conditional rendering (e.g., toggling an icon) do not update on initial load. The component renders with an incorrect icon, despite isDark being correct.\n\n1. Visit a Nuxt UI page using useColorMode and a toggle button like:\n\n`\u003CUButton :icon=\"isDark ? 'i-lucide-moon' : 'i-lucide-sun'\" color=\"neutral\" variant=\"ghost\"`\n\n2. Manually toggle to \"dark\" mode (while system is set to \"light\").\n\n3. Refresh the page.\n\n4. isDark is true, the theme is applied as dark — but the icon still shows as \"moon\" (suggesting light mode).\n\nExpected behavior:\n\nSince isDark is correct immediately, the icon should render correctly ('sun' in dark mode). It seems like the initial render uses stale/default data or runs before the reactive state is fully respected by the component.\n\n### Additional context\n\nManually toggling the mode after page load causes the icon to update correctly.\n\nLikely related to hydration or timing of when isDark is reactive in relation to rendering the component.\n\nVideo recording of the issue is available for reference — showing the incorrect icon on initial page load despite the correct theme and isDark value.\n\nhttps://github.com/user-attachments/assets/8c2bac86-f7f9-4bc0-8e11-64d107c60a18\n\n\n### Logs\n\n```shell-script\n\n```",[3058,3059,3060],{"name":3030,"color":3031},{"name":3033,"color":3034},{"name":3036,"color":3037},4459,"useColorMode does not respect storage value on initial load (icon mismatch)","2025-07-04T08:57:31Z","https://github.com/nuxt/ui/issues/4459",0.70656985,{"description":3067,"labels":3068,"number":3072,"owner":3019,"repository":3039,"state":3073,"title":3074,"updated_at":3075,"url":3076,"score":3077},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.11.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.9\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: devtools, modules, runtimeConfig, app, css, ui, icon, i18n, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.1.0, @nuxt/eslint@1.3.0, @nuxtjs/device@3.2.4, @nuxtjs/i18n@9.5.3, @pinia/nuxt@0.11.0, @vueuse/nuxt@13.1.0, nuxt-lodash@2.5.3\n- Build Modules: -\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/vigorous-cerf-pnrc3g\n\n// app.config.ts\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: 'emerald',\n neutral: 'zinc',\n red: 'red',\n orange: 'orange',\n yellow: 'yellow',\n green: 'green',\n blue: 'blue',\n purple: 'purple',\n gray: 'gray',\n },\n }\n}\n\n// nuxt.config.ts\n\nui: {\n theme: {\n colors: [ 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'red', 'orange', 'yellow', 'green', 'blue', 'purple', 'gray' ],\n },\n },\n\n### Description\n\nYesterday everything was working fine, no code was changed, after the upgrade it broke.\nFor example:\n```html\n\u003Cdiv class=\"bg-(--ui-orange)\">\n```\nOr\n```html\n\u003Cdiv class=\"bg-orange\">\n```\nBoth not work\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3069,3070,3071],{"name":3030,"color":3031},{"name":3033,"color":3034},{"name":3036,"color":3037},3977,"closed","Extend colors not work after update to v3.1","2025-04-28T10:40:09Z","https://github.com/nuxt/ui/issues/3977",0.69384784,{"description":3079,"labels":3080,"number":3088,"owner":3019,"repository":3039,"state":3073,"title":3089,"updated_at":3090,"url":3091,"score":3092},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.18.3\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: yarn@4.1.1\n- Builder: -\n- User Config: devtools, app, modules, ui, colorMode, i18n, content, vite, nitro, runtimeConfig, compatibilityDate\n- Runtime Modules: @pinia/nuxt@0.9.0, @nuxtjs/i18n@9.2.1, @nuxt/ui@2.21.0, @nuxt/content@3.2.0, @nuxt/scripts@0.10.4, @nuxt/eslint@1.1.0\n- Build Modules: -\n------------------------------\n\n### Version\n\nv2.20\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-akynjpkx?file=app.vue\n\n### Description\n\nMissing Color (`neutral`, `gray`, `slate`) type (`ProgressColor`) for `\u003CUProgress />` component.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n[Vue warn]: Invalid prop: custom validator check failed for prop \"color\". \n at \u003CProgress key=1 color=\"neutral\" size=\"xl\" ... > \n```",[3081,3082,3083,3086],{"name":3030,"color":3031},{"name":3036,"color":3037},{"name":3084,"color":3085},"closed-by-bot","ededed",{"name":3087,"color":3085},"stale",3407,"UProgress missing color type","2025-06-18T09:01:52Z","https://github.com/nuxt/ui/issues/3407",0.6953621,{"description":3094,"labels":3095,"number":3096,"owner":3019,"repository":3020,"state":3073,"title":3097,"updated_at":3098,"url":3099,"score":3100},"`\u003CIcon name=\"uil:github\" color=\"red\" />`\r\nreturns\r\n\r\n**App.config.ts**\r\n```\r\n// https://github.com/nuxt-modules/icon#configuration-%EF%B8%8F\r\nexport default defineAppConfig({\r\n icon: {\r\n size: \"300%\", // default \u003CIcon> size applied\r\n class: \"icon\", // default \u003CIcon> class applied\r\n mode: \"css\", // svg || css\r\n aliases: {\r\n nuxt: \"logos:nuxt-icon\",\r\n },\r\n },\r\n})\r\n```\r\n",[],176,"Add universal support for color attribute (similar to CSS icons)","2024-07-15T16:06:31Z","https://github.com/nuxt/icon/issues/176",0.699296,{"description":3102,"labels":3103,"number":3113,"owner":3019,"repository":3019,"state":3073,"title":3114,"updated_at":3115,"url":3116,"score":3117},"### Environment\n\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.16.0`\r\n- Nuxt Version: `3.2.0`\r\n- Nitro Version: `2.2.1`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `app`, `typescript`, `runtimeConfig`, `modules`, `colorMode`, `tailwindcss`\r\n- Runtime Modules: `@nuxtjs/color-mode@3.2.0`, `nuxt-icon@0.1.8`, `@nuxtjs/tailwindcss@6.1.3`, `@pinia/nuxt@0.4.6`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\n1. `yarn upgrade nuxt --latest`\r\n2. `yarn dev`\r\n```\r\n ERROR Cannot start nuxt: Cannot find module 'postcss-custom-properties'\r\n```\r\n3. Open `nuxt.config.ts` will see this on the `colorMode` property.\r\n```\r\nArgument of type '{ app: { head: { link: { rel: \"icon\"; type: \"image/svg+xml\"; href: string; }[]; }; }; typescript: { shim: false; strict: true; }; runtimeConfig: { apiSecret: string; public: { apiBase: string; }; }; modules: (string | [...])[]; colorMode: { ...; }; tailwindcss: { ...; }; }' is not assignable to parameter of type 'NuxtConfig'.\r\n Object literal may only specify known properties, and 'colorMode' does not exist in type 'NuxtConfig'.\r\n```\n\n### Describe the bug\n\nAfter upgrading nuxt `3.0.0` to `3.2.0`, will see the problems.\r\n\r\n1. `colorMode` module option in nuxt `3.0.0` shows the type as\r\n```\r\n(property) NuxtConfig['colorMode']?: Partial\u003CModuleOptions> | undefined\r\n```\r\nbut shows error in nuxt `3.2.0`.\r\n\r\n2. We need to install `postcss-custom-properties` in nuxt `3.2.0`, didn't need it in nuxt `3.0.0`.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3104,3107,3110],{"name":3105,"color":3106},"3.x","29bc7f",{"name":3108,"color":3109},"upstream","E8A36D",{"name":3111,"color":3112},"needs reproduction","FBCA04",18933,"After upgrading Nuxt 3.0.0 to 3.2.0 problem","2024-01-09T06:07:13Z","https://github.com/nuxt/nuxt/issues/18933",0.70508534,{"description":3119,"labels":3120,"number":3123,"owner":3019,"repository":3039,"state":3073,"title":3124,"updated_at":3125,"url":3126,"score":3127},"### Environment\n\n- node:V18.19.1\n- pnpm: V8.15.5\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.15.1\n\n### Reproduction\n\nhttps://github.com/Jevin0/nuxt-ui-no-style-demo/blob/master/app.vue\n\n### Description\n\n\n### step\n1. `pnpm dlx nuxi@latest init \u003Cproject-name>`\n2. `npx nuxi@latest module add ui`\n3. `pnpm install`\n4. `pnpm dev`\n\n### concern\nNormal use of `UButton` component, but no background color and Color\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3121,3122],{"name":3030,"color":3031},{"name":3033,"color":3034},3047,"No style","2025-02-24T22:33:59Z","https://github.com/nuxt/ui/issues/3047",0.70729274,{"description":3129,"labels":3130,"number":3138,"owner":3019,"repository":3019,"state":3073,"title":3139,"updated_at":3140,"url":3141,"score":3142},"\n### Environment\n\nNuxt project info: \n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.15.1\n- Nuxt Version: 3.13.2\n- CLI Version: 3.13.2\n- Nitro Version: 2.9.7\n- Package Manager: bun@1.1.8\n- Builder: -\n- User Config: experimental, runtimeConfig, build, devtools, nitro, routeRules, plugins, modules, eslint, pinia, site, delayHydration, i18n, icon, app, content, svgo, sitemap, googleFonts, image, mdc, htmlValidator, compatibilityDate\n- Runtime Modules: @nuxt/ui@2.18.4, @nuxt/image@1.8.0, @nuxt/content@2.13.2, @nuxt/eslint@0.5.7, @nuxtjs/google-fonts@3.2.0, @nuxtjs/fontaine@0.4.3, @nuxtjs/i18n@8.5.5, @nuxtjs/mdc@0.8.3, @nuxtjs/sitemap@6.1.0, @nuxtjs/html-validator@1.8.2, nuxt-delay-hydration@1.3.8, nuxt-svgo@4.0.6, @vueuse/nuxt@11.1.0, @vueuse/motion/nuxt@2.2.5, @pinia/nuxt@0.5.4, @nuxthq/studio@2.0.3, @nuxt/icon@1.5.1, @formkit/auto-animate/nuxt@0.8.2\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nGithub to reproduction: https://github.com/hoachnt/hoachnt-web\n\n### Describe the bug\n\nI don't know what problem is. I try to fix this bug 2 months and think that problem is in nuxt. And yep I saw in the official website of nuxt has same problem\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3131,3134,3135],{"name":3132,"color":3133},"pending triage","E99695",{"name":3111,"color":3112},{"name":3136,"color":3137},"possible regression","B90A42",29387,"Icons not rendering on production build when mounting","2024-10-15T06:27:30Z","https://github.com/nuxt/nuxt/issues/29387",0.7079708,["Reactive",3144],{},["Set"],["ShallowReactive",3147],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fEiX__Ug7M08fBY4laIyicXtXNgUzvXCZtvuie79Oytg":-1},"/nuxt/ui/4525"]