\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```",[3019,3022],{"name":3020,"color":3021},"bug","d73a4a",{"name":3023,"color":3024},"triage","ffffff",4525,"nuxt","ui","open","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.75780886,{"description":3034,"labels":3035,"number":3039,"owner":3026,"repository":3026,"state":3028,"title":3040,"updated_at":3041,"url":3042,"score":3043},"### Describe the feature\r\n\r\nI'd like to see more rules for documentation contributions (https://nuxt.com/docs/community/contribution#writing-documentation).\r\n\r\nFor instance while reviewing https://github.com/nuxt/nuxt/pull/21525, I asked myself several questions:\r\n- What words to capitalize in headings? First one, all, or only meaningful (how to define meaningful ones)?\r\n- When to put words in code tags? Only paths, packages, filenames? Or also properties like `css` in the nuxt config?\r\n- Should we write packages as their display version (e.g. PostCSS) or npm name (e.g. postcss)?\r\n\r\nI probably forget more of them but such rules would help people contribute to the nuxt docs.\r\n\r\nIf this is adopted, we could also add the link to this section to PR templates\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).\n```[tasklist]\n### Tasks\n```\n",[3036],{"name":3037,"color":3038},"documentation","5319e7",21530,"Docs: writing guidelines","2024-06-30T11:08:36Z","https://github.com/nuxt/nuxt/issues/21530",0.76657236,{"description":3045,"labels":3046,"number":3047,"owner":3026,"repository":3048,"state":3028,"title":3049,"updated_at":3050,"url":3051,"score":3052},"I'm using icons library on Nuxt UI (still I don't know whose issue this is) for my Nuxt project which uses Tailwind v4 , and I set up some custom icons through a JSON file:\n\n```\n{\n \"icons\": {\n \"arrow-small-right\": {\n \"body\": \"\u003Cpath fill=\\\"currentColor\\\" d=...\n },\n \"auction\": {\n \"body\": \"\u003Cpath fill=\\\"currentColor\\\" d=...\n },\n...\n }\n}\n```\n\n```\n// nuxt.config.ts\n\nimport customIcons from './icons.json' with { type: 'json' };\n\n...\n\n icon: {\n customCollections: [{\n prefix: 'custom',\n icons: customIcons.icons,\n width: 512,\n height: 512,\n }],\n }\n```\n\n\nThey can be imported, however when I try to change their color like `text-white` or `fill-white`, it doesn't work.\n\nWhat I noticed is that icons imported from Iconify have important css rules such as `mask-*`, while mine don't.\nSo how am I supposed to inject these rules inside them, if there is a way?\n\np.s. sorry for creating my issue without completing it",[],402,"icon","Can't apply color to custom icons","2025-06-09T07:06:52Z","https://github.com/nuxt/icon/issues/402",0.77192783,{"description":3054,"labels":3055,"number":3059,"owner":3026,"repository":3026,"state":3028,"title":3060,"updated_at":3061,"url":3062,"score":3063},"### Describe the feature\n\nI recently had to change the `\u003CNuxtLoadingIndicator>` component to allow a more decent color during loading, but then highlight the \"finish\" with a more saturated green.\n\nEspecially in combination with Vuetify, this is very helpful.\n\nIf this sounds like a useful addition for everyone, I'm willing to refactor my code and create a PR for this?\n\n#### Possible solution\nAdding a param \"finishColor\" and then setting the `background` property with the extra condition:\n```\n finishColor: {\n type: [String, Boolean],\n default: 'repeating-linear-gradient(to right,#00dc82 0%,#34cdfe 50%,#0047e1 100%)',\n },\n\n...\n\nbackground: error.value\n ? props.errorColor\n : progress.value === 100\n ? props.finishColor || props.color || undefined\n : props.color || undefined,\n```\n\n### Additional information\n\n- [x] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [x] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3056],{"name":3057,"color":3058},"pending triage","E99695",31632,"\u003CNuxtLoadingIndicator> add option for \"finish\" color","2025-04-01T18:29:45Z","https://github.com/nuxt/nuxt/issues/31632",0.7755857,{"description":3065,"labels":3066,"number":2027,"owner":3026,"repository":3070,"state":3028,"title":3071,"updated_at":3072,"url":3073,"score":3074},"fontshare, for example, exposes this metadata which we can use to create font fallback metrics",[3067],{"name":3068,"color":3069},"enhancement","a2eeef","fonts","allow providers to provide font metrics","2024-05-01T17:17:44Z","https://github.com/nuxt/fonts/issues/9",0.77797997,{"description":3076,"labels":3077,"number":1443,"owner":3026,"repository":3078,"state":3079,"title":3080,"updated_at":3081,"url":3082,"score":3083},"",[],"nuxt.com","closed","Team members page","2023-02-15T12:31:36Z","https://github.com/nuxt/nuxt.com/issues/17",0.47746423,{"description":3085,"labels":3086,"number":3087,"owner":3026,"repository":3048,"state":3079,"title":3088,"updated_at":3089,"url":3090,"score":3091},"`\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.711086,{"description":3093,"labels":3094,"number":3102,"owner":3026,"repository":3026,"state":3079,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### Describe the feature\r\n\r\nThe Nuxt3 docs are very light when it comes to styling in general (I know that it has become trendy to use Tailwind and to stop writing stylesheets but still ...).\r\nThere is some information that is scattered around, and the docs could really use a dedicated section (similar to the excellent one in [astro](https://docs.astro.build/en/guides/styling/)) to explain everything about styling in Nuxt. \r\n\r\nI'm aware that some of this information could be considered redundant as it can be found respectively in Vite and VueJs docs.\r\nThat being said, it would be great, especially for newcomers, if we could have a comprehensive styling guide in the Nuxt docs. \r\n\r\nWe could also recommend some best practice while we do this.\r\n\r\nHere's what I have in mind \r\n\r\n- How to add an external stylesheet\r\n- How to add a local stylesheet\r\n- How to use useHead for dynamic stylesheet\r\n- How to use preprocessors\r\n- How to leverage layouts to have multiple styles in the same app\r\n- Recap of all the nice SFC styling options (lang/import/scoped/modules/v-bind etc)\r\n- How to configure postcss and use it (plugins etc)\r\n- Font section (This is a really common thing)\r\n- Advanced section (vite config, webpack config, optimizations, minification etc)\r\n- Bonus section (maybe recommend some popular modules and tools such as tailwind or https://unocss.dev/)\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3095,3096,3099],{"name":3037,"color":3038},{"name":3097,"color":3098},"good first issue","fbca04",{"name":3100,"color":3101},"3.x","29bc7f",21491,"[Documentation Request] Add a styling section to the docs","2023-06-16T14:47:05Z","https://github.com/nuxt/nuxt/issues/21491",0.74369764,{"description":3108,"labels":3109,"number":3116,"owner":3026,"repository":3027,"state":3079,"title":3117,"updated_at":3118,"url":3119,"score":3120},"### Description\n\nBefore v3.1 I was able to use non-custom color names such as `green`, `red`, `cyan` on the `color` prop of all applicable components, for example:\n\n`\u003CUButton label=\"test\" color=\"red\" />` would render this:\n\n\n\nI achieved this by adding the color names on both `app.config.ts` and `nuxt.config.ts`:\n\n```js\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: 'green',\n neutral: 'zinc',\n red: 'red',\n }\n }\n})\n```\n```js\n...\n ui: {\n theme: {\n colors: [\n 'red'\n ]\n }\n },\n...\n```\nBut after 3.1 the same setup renders the buttom like this (I had to highlight the text):\n\n\n\nI can use custom names like `new` or `tertiary` as color name, and that would work, but I still have use cases for the previous mechanism, what's the new approach for this?\n",[3110,3113],{"name":3111,"color":3112},"question","d876e3",{"name":3114,"color":3115},"v3","49DCB8",4035,"How to use normal color names such as red or green after v3.1","2025-05-01T22:14:49Z","https://github.com/nuxt/ui/issues/4035",0.7482756,{"description":3122,"labels":3123,"number":3127,"owner":3026,"repository":3026,"state":3079,"title":3128,"updated_at":3129,"url":3130,"score":3131},"In nuxt.config.js\r\n```\r\nmodule.exports = {\r\n\t/*\r\n\t** other things\r\n\t*/\r\n css: [\r\n '@/assets/css/global.css\r\n ]\r\n}\r\n```\r\nIn global.css\r\n```\r\n:root {\r\n\t--color: green;\r\n}\r\n.color {\r\n\tcolor: var(--color);\r\n}\r\n```\r\nIn /pages/dummy.vue\r\n```\r\n\u003Ctemplate>\r\n\t\u003Csection>\r\n\t\t\u003Cp class=\"color\">DUMMY\u003C/p>\r\n\t\u003C/section>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nexport default {\r\n\tmounted () {\r\n\t\tthis.$nextTick(() => {\r\n\t\t\tdocument.documentElement.style.setProperty('--color', 'blue')\r\n\t\t})\r\n\t}\r\n}\r\n\u003C/script>\r\n```\r\n\r\nExpect text to be blue, but it is green\r\n\r\nIn dev tool:\r\n\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2044\">#c2044\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3124],{"name":3125,"color":3126},"2.x","d4c5f9",2342,"Unable to update CSS variable with document.documentElement.style.setProperty","2023-01-18T15:55:10Z","https://github.com/nuxt/nuxt/issues/2342",0.76717675,["Reactive",3133],{},["Set"],["ShallowReactive",3136],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fbccYQkq70ZaTd6FRaSBfyoRSpHQskWjBPCbdzm9y2Wg":-1},"/nuxt/icon/17"]