\n\n\namber: not applied\n\u003Cimg width=\"435\" height=\"134\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b9cffe65-9d2a-41f2-8e9d-b0dcb17ac4f4\" />\n\n### Description\n\n### Describe the bug\n\nWhen using `UInput`, the `color` prop sometimes fails to apply to the icon (`leading-icon` or `trailing-icon`). Specifically, if the color value is lexicographically *before* `\"gray\"` (e.g., `\"blue\"`), the icon appears with the `gray` color instead. If the color value is after `\"gray\"` (e.g., `\"red\"`, `\"teal\"`), it works correctly.\n\n### Expected behavior\n\nThe icon color should follow the specified `color` prop regardless of its string value.\n\n### Actual behavior\n\nFor certain colors (like `\"blue\"`), the icon appears with `gray` color instead of the specified color.\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3048,3049],{"name":3031,"color":3032},{"name":3037,"color":3038},4525,"color prop on UInput does not apply to icon in some cases","2025-07-14T10:36:41Z","https://github.com/nuxt/ui/issues/4525",0.746839,{"description":3056,"labels":3057,"number":1996,"owner":3020,"repository":3021,"state":3022,"title":3058,"updated_at":3059,"url":3060,"score":3061},"I want to share common icons between projects using nuxt layers. I would prefer to keep my icons in svg files. Unfortunately, the `nuxt-icons` module does not meet my expectations (import all icons), so I decided to use your solution.\r\n\r\nWhen I hold the icon in `/components/global` everything works great. Unfortunately, when I keep this icon in a nuxt layer, I get a string with the name instead of the icon.\r\n\r\nI would also love to be able to use `param-case` in the `name` property.\r\n\r\nReproduction: https://stackblitz.com/edit/github-qddkmm?file=base/nuxt.config.ts",[],"Can't use svg icons from nuxt layer","2024-05-07T08:36:47Z","https://github.com/nuxt/icon/issues/48",0.75425637,{"description":3063,"labels":3064,"number":3065,"owner":3020,"repository":3021,"state":3066,"title":3067,"updated_at":3068,"url":3069,"score":3070},"The following code snippet from nuxt-icon.svg is breaking SVG by rendering them all black.\r\n\r\n`&.nuxt-icon--fill, \r\n&.nuxt-icon--fill * { \r\n fill: currentColor; \r\n}`\r\n\r\nThe following bug is happening when using svg with nuxt-svgo module. For some reason, some of the svg get the class nuxt-icon--fill attach to them even though they are not rendered using nuxt-icon.",[],106,"closed","fill propery is breaking SVGs","2024-08-28T10:17:14Z","https://github.com/nuxt/icon/issues/106",0.6798836,{"description":3072,"labels":3073,"number":3074,"owner":3020,"repository":3021,"state":3066,"title":3075,"updated_at":3076,"url":3077,"score":3078},"`\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.70120215,{"description":3080,"labels":3081,"number":3089,"owner":3020,"repository":3040,"state":3066,"title":3090,"updated_at":3091,"url":3092,"score":3093},"### Environment\n\n- Operating System: Windows_NT\r\n- Node Version: v21.6.1\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.2.4\r\n- Builder: -\r\n- User Config: devtools, app, nitro, runtimeConfig, modules, svgoOptions, security, routeRules, vercel, colorMode, ui, i18n, maxDuration \r\n- Runtime Modules: nuxt-security@1.3.2, nuxt-svgo@4.0.2, @nuxt/ui@2.18.3, nuxt-zod-i18n@1.9.0, @nuxtjs/i18n@8.3.3, @nuxt/icon@1.4.4\r\n- Build Modules: -\n\n### Version\n\n2.18.3\n\n### Reproduction\n\n- no need\n\n### Description\n\nthe color attribute is not connected by any mean to the off state icon. even if you change the off state in `nuxt.config.ts` `ui` config to: \r\n```js \r\n ui:{\r\n toggle:{\r\n icon:{\r\n off:'text-{color}-400 dark:text-{color}-500'\r\n },\r\n default:{\r\n color: '{color ? color: primary}'\r\n }\r\n }\r\n },\r\n ```\r\nit will still be applying this to the \"on\" icon and not the off one, which is useless\r\n\r\ncurrent solution is to add your class in the off icon as such:\r\n\r\n```js\r\n \u003CUToggle\r\n on-icon=\"i-mingcute:moon-stars-fill\"\r\n off-icon=\"i-material-symbols:clear-day-rounded text-yellow-500\"\r\n v-model=enabled\r\n >\u003C/UToggle>\r\n```\r\n\r\nSuggestions: \r\n* connect to color attribute to both icons so it can be done like this: \r\n```js\r\n \u003CUToggle\r\n on-icon=\"i-mingcute:moon-stars-fill\"\r\n off-icon=\"i-material-symbols:clear-day-rounded\"\r\n :class=\"enabled ? 'bg-black fill-gray-50' : 'bg-orange-50'\"\r\n :color=\"enabled ? 'red' : 'yellow'\"\r\n v-model=enabled\r\n >\u003C/UToggle>\r\n```\r\n* or just add another one\r\n\r\n\r\nOn a side note: \r\nthere should be a place to edit the circle as well at least the color, preferably the ability to just add classes\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3082,3083,3084,3087],{"name":3031,"color":3032},{"name":3037,"color":3038},{"name":3085,"color":3086},"closed-by-bot","ededed",{"name":3088,"color":3086},"stale",2013,"UToggle Color attribute not connected to off Icon","2025-06-19T02:12:11Z","https://github.com/nuxt/ui/issues/2013",0.725891,{"labels":3095,"number":3105,"owner":3020,"repository":3020,"state":3066,"title":3106,"updated_at":3107,"url":3108,"score":3109},[3096,3099,3102],{"name":3097,"color":3098},"enhancement","8DEF37",{"name":3100,"color":3101},"good first issue","fbca04",{"name":3103,"color":3104},"2.x","d4c5f9",6397,"Change banner color","2023-01-22T15:51:03Z","https://github.com/nuxt/nuxt/issues/6397",0.7383122,{"description":3111,"labels":3112,"number":3120,"owner":3020,"repository":3020,"state":3066,"title":3121,"updated_at":3122,"url":3123,"score":3124},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v21.6.2`\r\n- Nuxt Version: `3.11.1`\r\n- CLI Version: `3.11.1`\r\n- Nitro Version: `2.9.5`\r\n- Package Manager: `yarn@1.22.21`\r\n- Builder: `-`\r\n- User Config: `devtools`, `typescript`, `srcDir`, `modules`, `i18n`, `app`, `runtimeConfig`\r\n- Runtime Modules: `@nuxtjs/i18n@8.2.0`, `@pinia/nuxt@0.5.1`, `@vee-validate/nuxt@4.12.6`, `@nuxtjs/color-mode@3.3.3`, `@nuxt/image@1.4.0`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\n```ts\r\nconst colorMode = useColorMode();\r\nuseHead({\r\n bodyAttrs: {\r\n class: computed(() => {\r\n if(colorMode.value=== 'light'){\r\n return \"bg-fixed\"\r\n }else if(colorMode.value===\"dark\"){\r\n return \"bg-fixed dark-layout\"\r\n }\r\n return \"\"\r\n }),\r\n style: computed(() => {\r\n if(colorMode.value=== 'light'){\r\n return \"background-image: url(/assets/img/shape/banner-1.jpg)\"\r\n }else if(colorMode.value===\"dark\"){\r\n return \"background-image: url(/assets/img/shape/banner-2.jpg)\"\r\n }\r\n return \"\"\r\n })\r\n\r\n },\r\n}) ;\r\n```\r\n\r\n\r\n### Describe the bug\r\n\r\nAfter updating to nuxt 3.11.1, the background image does not change when the theme changes.\r\n\r\n\r\n\r\n### Additional context\r\n\r\nI use **@nuxtjs/color-mode**\r\n\r\n### Logs\r\n\r\n_No response_",[3113,3114,3117],{"name":3031,"color":3032},{"name":3115,"color":3116},"upstream","E8A36D",{"name":3118,"color":3119},"🔨 p3-minor","FBCA04",26586,"Body style background image does not update when theme changes","2024-07-01T06:31:38Z","https://github.com/nuxt/nuxt/issues/26586",0.7399929,{"description":3126,"labels":3127,"number":3131,"owner":3020,"repository":3040,"state":3066,"title":3132,"updated_at":3133,"url":3134,"score":3135},"### 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```",[3128,3129,3130],{"name":3031,"color":3032},{"name":3034,"color":3035},{"name":3037,"color":3038},3977,"Extend colors not work after update to v3.1","2025-04-28T10:40:09Z","https://github.com/nuxt/ui/issues/3977",0.7422162,["Reactive",3137],{},["Set"],["ShallowReactive",3140],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZhBuk-QGi1fjklulDkCpQm016Cru5UPz88Wilx0oDhw":-1},"/nuxt/icon/415"]