\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```",[3154,3155,3156],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},4530,"[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.6765943,{"description":3163,"labels":3164,"number":3172,"owner":3144,"repository":3145,"state":3173,"title":3174,"updated_at":3175,"url":3176,"score":3177},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v22.4.0\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.13.1\r\n- Nitro Version: -\r\n- Package Manager: pnpm@9.4.0\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, future, experimental, app, site, sitemap, routeRules, css, colorMode, runtimeConfig, modules, postcss, typescript\r\n- Runtime Modules: nuxt-headlessui@1.2.0, @nuxt/eslint@0.3.13, @nuxt/ui@2.18.4, @pinia/nuxt@0.5.4, @pinia-plugin-persistedstate/nuxt@1.2.1, @nuxt/scripts@0.8.4, nuxt-anchorscroll@1.0.3, @nuxtjs/seo@2.0.0-rc.21\r\n- Build Modules: -\n\n### Version\n\nv2.18.4\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/command-palette#usage\n\n### Description\n\nOn mobile devices, when the modal is positioned at the bottom of the screen, the Command Palette becomes obscured by the virtual keyboard. This issue occurs when the Command Palette contains fewer than 6 elements or none at all, making it completely inaccessible for users.\r\n\r\nThe issue can be reproduced on the official component page: \r\n[https://ui.nuxt.com/components/command-palette](https://ui.nuxt.com/components/command-palette)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3165,3166,3167,3170],{"name":3135,"color":3136},{"name":3141,"color":3142},{"name":3168,"color":3169},"closed-by-bot","ededed",{"name":3171,"color":3169},"stale",2157,"closed","Command Palette appears behind virtual keyboard when inside Modal on mobile devices","2025-06-18T09:06:08Z","https://github.com/nuxt/ui/issues/2157",0.66107285,{"description":3179,"labels":3180,"number":3184,"owner":3144,"repository":3145,"state":3173,"title":3185,"updated_at":3186,"url":3187,"score":3188},"### 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```",[3181,3182,3183],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},3977,"Extend colors not work after update to v3.1","2025-04-28T10:40:09Z","https://github.com/nuxt/ui/issues/3977",0.6656416,{"description":3190,"labels":3191,"number":3199,"owner":3144,"repository":3145,"state":3173,"title":3200,"updated_at":3201,"url":3202,"score":3203},"### Description\n\nHi, I am using Vue 3 and trying to dynamically change the theme color of nuxt-ui. I have the following code:\n\n```typescript\nconst appConfig = useAppConfig()\nappConfig.ui.colors.primary = color\n```\nHowever, this doesn’t seem to work as expected. I’m wondering if I’m using it incorrectly. Could you please advise how I can dynamically switch the theme in nuxt-ui in Vue 3?",[3192,3195,3196],{"name":3193,"color":3194},"question","d876e3",{"name":3138,"color":3139},{"name":3197,"color":3198},"vue","42b883",3952,"Issue with dynamically changing theme colors in Nuxt UI using Vue 3","2025-05-12T13:05:27Z","https://github.com/nuxt/ui/issues/3952",0.67720073,{"description":3205,"labels":3206,"number":3209,"owner":3144,"repository":3145,"state":3173,"title":3210,"updated_at":3211,"url":3212,"score":3213},"### 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```",[3207,3208],{"name":3135,"color":3136},{"name":3138,"color":3139},3047,"No style","2025-02-24T22:33:59Z","https://github.com/nuxt/ui/issues/3047",0.68034744,{"description":3215,"labels":3216,"number":3223,"owner":3144,"repository":3144,"state":3173,"title":3224,"updated_at":3225,"url":3226,"score":3227},"### Environment\n\n- Operating System: Windows_NT\r\n- Node Version: v18.19.0\r\n- Nuxt Version: 3.10.3\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.8.1\r\n- Package Manager: pnpm@8.15.1\r\n- Builder: -\r\n- User Config: devtools, ssr, features, build, modules, vite\r\n- Runtime Modules: ()\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-11vucf-dwcpwg?file=app.vue\n\n### Describe the bug\n\nHappens in production build , The text does not turn red\r\n\r\nIf the component is removed from pages/index.vue and placed outside the `NuxtLayout` component in `app.vue` and rebuilt, the inline style can be injected normally.\r\ntext turns red\r\n\r\n\n\n### Additional context\n\n\r\n\r\nNo styles are injected in the development environment (is this planned?)\n\n### Logs\n\n_No response_",[3217,3220],{"name":3218,"color":3219},"pending triage","E99695",{"name":3221,"color":3222},"inline styles","68AF97",25991,"Component placed in nuxt component cannot inject inline styles","2024-09-17T13:29:57Z","https://github.com/nuxt/nuxt/issues/25991",0.68626046,{"description":3229,"labels":3230,"number":3234,"owner":3144,"repository":3145,"state":3173,"title":3235,"updated_at":3236,"url":3237,"score":3238},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, devtools, compatibilityDate, future, css\n- Runtime Modules: @nuxt/ui@3.1.1\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.1\n3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/crazy-hawking-6gfzld?workspaceId=ws_Q5C3Bq2RRtqpENUnM12LKF\n\n### Description\n\nI’ve encountered an issue with Nuxt UI’s AppConfigInput. \n\nI created a fresh Nuxt app using Nuxt UI v3.1.1/3.2.0 and, following the docs, extended AppConfigInput.\nBut in app.config.ts, when I press Ctrl+Space, I only see **icon** and **theme** field - **ui** no longer appears.\n\nI think in 3.0.x it was working.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3231,3232,3233],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},4461,"Missing ui Property in app.config.ts","2025-07-08T13:36:25Z","https://github.com/nuxt/ui/issues/4461",0.6883951,{"description":3240,"labels":3241,"number":3245,"owner":3144,"repository":3145,"state":3173,"title":3246,"updated_at":3247,"url":3248,"score":3249},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.11.0`\n- Nuxt Version: `3.17.0`\n- CLI Version: `3.25.0`\n- Nitro Version: `2.11.11`\n- Package Manager: `pnpm@10.4.0`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\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/modern-dust-h3lryc\n\n### Description\n\nHey, after upgrading to latest `@nuxt/ui`, custom Nuxt UI variable overrides stopped working. Looks like the correct colors are not generating.\n\nThis has worked in the previous versions:\n\n```\n:root {\n --ui-bg-elevated: var(--ui-color-neutral-500);\n}\n\nmain {\n --ui-bg-elevated: var(--color-white);\n}\n\n// Should have color --ui-color-neutral-500 with 0.5 opacity - CORRECT\n\u003Cdiv class=\"p-8 flex items-center gap-2 bg-elevated/50\">\n\u003C/div>\n\n// Should have color --color-white with 0.5 opacity - NOT WORKING - has colors from :root\n\u003Cmain class=\"p-8 flex items-center gap-2 bg-elevated/50\">\n\u003C/main>\n```\n\nCurrently, the variables in main have no effect on the sites.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3242,3243,3244],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3141,"color":3142},4018,"Overriding root variables stopped working in 3.1.0","2025-04-29T12:40:17Z","https://github.com/nuxt/ui/issues/4018",0.6893228,{"description":3251,"labels":3252,"number":3263,"owner":3144,"repository":3144,"state":3173,"title":3264,"updated_at":3265,"url":3266,"score":3267},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v16.20.0\r\n- Nuxt Version: 3.7.1\r\n- CLI Version: 3.7.3\r\n- Nitro Version: 2.6.2\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: experimental\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nYou can use my old preproduction from #23051 https://stackblitz.com/edit/github-ydxe3t?file=pages%2Findex.vue\r\n\r\nSee that the scoped style (margin) applies to the component. However, if you update Nuxt to 3.7.3, the style no longer applies, since the data-v attribute was removed. \n\n### Describe the bug\n\nThe issue #23051 was fixed in #23095.\r\n\r\nHowever, this prevented scoped style from being applied to the component. \r\n\n\n### Additional context\n\nSorry for the delayed feedback. As I noted in https://github.com/nuxt/nuxt/pull/23095#issuecomment-1712583276 the removal of data-v attribute entirely lead to styles not being reproduced. I already debugged the issue and I'm going to create a PR with a simple suggested fix.\r\n\r\nThis PR will revert the expected behavior of scoped styles as in 3.7.1 while keeping @huang-julien 's fix for 404 on soft navigation due to different component hash.\n\n### Logs\n\n_No response_",[3253,3256,3257,3260],{"name":3254,"color":3255},"3.x","29bc7f",{"name":3135,"color":3136},{"name":3258,"color":3259},"🔨 p3-minor","FBCA04",{"name":3261,"color":3262},"server components","839413",23385,"Fix for #23051 broke scoped styles in server components","2023-09-28T07:36:15Z","https://github.com/nuxt/nuxt/issues/23385",0.690702,["Reactive",3269],{},["Set"],["ShallowReactive",3272],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fK8ElreefhiHt-rtyDVMuLmq95MwEbZY0vhvuFVUN0z8":-1},"/nuxt/ui/4651"]