` 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```",[1997,2000],{"name":1998,"color":1999},"bug","d73a4a",{"name":2001,"color":2002},"triage","ffffff",3407,"ui","UProgress missing color type","2025-03-02T15:30:03Z","https://github.com/nuxt/ui/issues/3407",0.767062,{"description":2010,"labels":2011,"number":2018,"owner":1988,"repository":1988,"state":1989,"title":2019,"updated_at":2020,"url":2021,"score":2022},"### Describe the feature\n\nI don't know if there is an easier way to add `\u003Cstyle>` to `\u003Cnoscript>`, but what I do currently is put the css in `public/` and add the link to `app.noscript` in Nuxt config.\r\n\r\nProposal: make it similar to the way normal css is loaded:\r\n```ts\r\nexport default defineNuxtConfig({\r\n css: ['@unocss/reset/tailwind.css', '@/assets/styles/root.scss'],\r\n\r\n noscriptCSS: [\r\n '@/assets/styles/noscript-overide.scss',\r\n '@npm-lib/fallback.css',\r\n ],\r\n});\r\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).",[2012,2015],{"name":2013,"color":2014},"enhancement","8DEF37",{"name":2016,"color":2017},"discussion","538de2",21570,"styling `noscript`","2024-06-30T11:08:34Z","https://github.com/nuxt/nuxt/issues/21570",0.7821226,{"description":2024,"labels":2025,"number":2026,"owner":1988,"repository":2027,"state":2028,"title":2029,"updated_at":2030,"url":2031,"score":2032},"Can update the Docs with color props.\r\n\r\n \u003C Icon name=\"uil:github\" size=\"50\" color=\"green\" />",[],17,"icon","closed","Color Props should be added to documentation aswell","2023-02-03T13:05:57Z","https://github.com/nuxt/icon/issues/17",0.47082546,{"description":2034,"labels":2035,"number":2036,"owner":1988,"repository":2027,"state":2028,"title":2037,"updated_at":2038,"url":2039,"score":2040},"`\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.71606636,{"description":2042,"labels":2043,"number":2047,"owner":1988,"repository":1988,"state":2028,"title":2048,"updated_at":2049,"url":2050,"score":2051},"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>",[2044],{"name":2045,"color":2046},"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.7600518,{"description":2053,"labels":2054,"number":2062,"owner":1988,"repository":1988,"state":2028,"title":2063,"updated_at":2064,"url":2065,"score":2066},"### 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).",[2055,2056,2059],{"name":1985,"color":1986},{"name":2057,"color":2058},"good first issue","fbca04",{"name":2060,"color":2061},"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.77108926,{"description":2068,"labels":2069,"number":2077,"owner":1988,"repository":1988,"state":2028,"title":2078,"updated_at":2079,"url":2080,"score":2081},"### Describe the feature\r\n\r\nWhile debugging my app, I noticed that errors displayed alongside a 500 page were black on a black background, making the errors unreadable. After I inspected the element I realised I was actually setting a color for paragraphs in my own CSS and that Nuxt's own stylesheet was not setting the color on the paragraph but on the parent div via the `text-black` class.\r\n\r\nI believe it would be best if Nuxt's colors were applied on a more granular level (so on P or any text elements directly) to avoid this edge case.\r\n\r\n\u003Cimg width=\"806\" alt=\"Screenshot 2024-04-21 at 12 52 12\" src=\"https://github.com/nuxt/nuxt/assets/2543201/47feb2cd-4405-4e1f-afc5-9da68fef62ff\">\r\n\u003Cimg width=\"431\" alt=\"Screenshot 2024-04-21 at 12 52 39\" src=\"https://github.com/nuxt/nuxt/assets/2543201/519a57d3-296d-4f3e-b0a9-a47df8fa3fe3\">\r\n\u003Cimg width=\"436\" alt=\"Screenshot 2024-04-21 at 13 12 50\" src=\"https://github.com/nuxt/nuxt/assets/2543201/2a6724a6-6171-4624-8acc-1cdee912712f\">\r\n\u003Cimg width=\"444\" alt=\"Screenshot 2024-04-21 at 13 12 56\" src=\"https://github.com/nuxt/nuxt/assets/2543201/7aa0dc99-b7c4-473e-b0e3-9bfd1f6f986a\">\r\n\u003Cimg width=\"241\" alt=\"Screenshot 2024-04-21 at 13 13 01\" src=\"https://github.com/nuxt/nuxt/assets/2543201/0a44cd39-79d7-498a-a8d5-b641750ce2e5\">\r\n\u003Cimg width=\"239\" alt=\"Screenshot 2024-04-21 at 13 13 12\" src=\"https://github.com/nuxt/nuxt/assets/2543201/ad646824-10fe-451d-bc7c-2789550fa450\">\r\n\r\n\r\n\r\n\r\n### Additional information\r\n\r\n- [ ] 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).",[2070,2071,2074],{"name":2060,"color":2061},{"name":2072,"color":2073},"pending triage","E99695",{"name":2075,"color":2076},"ui-templates","bfd4f2",27082,"Add a color to \u003Cp> elements on Nuxt error pages","2024-05-24T16:39:43Z","https://github.com/nuxt/nuxt/issues/27082",0.77756864,{"description":2083,"labels":2084,"number":2091,"owner":1988,"repository":2004,"state":2028,"title":2092,"updated_at":2093,"url":2094,"score":2095},"### Description\n\nI want to add a custom color to my project, first I add it into **tailwind.config.ts**\n\n```\nimport type { Config } from \"tailwindcss\";\n\nconst colors = {\n main: {\n DEFAULT: \"#0078CE\",\n 50: \"#87CDFF\",\n //and other pallets\n },\n secondary: {\n DEFAULT: \"#01519B\",\n 50: \"#56ADFE\",\n //and other pallets\n },\n tertiary: {\n DEFAULT: \"#E9690C\",\n 50: \"#FBD0B2\",\n //and other pallets\n },\n surface: {\n DEFAULT: \"#F7FAFF\",\n 50: \"#FFFFFF\",\n //and other pallets\n },\n};\n\nexport default {\n content: [],\n theme: {\n extend: {\n colors: {\n ...colors,\n },\n },\n },\n} satisfies Config;\n```\n\nbut when I set the color in **app.config.ts** like this\n\n```\nexport default defineAppConfig({\n ui: {\n primary: \"main\",\n gray: \"neutral\",\n colors: [\"secondary\", \"tertiary\", \"surface\"],\n card: {\n shadow: \"\",\n ring: \"\",\n },\n },\n});\n```\nit gives me error like this:\n```\nType '{ primary: string; gray: string; colors: string[]; card: { shadow: string; ring: string; }; }' is not assignable to type 'UI'.\n Type '{ primary: string; gray: string; colors: string[]; card: { shadow: string; ring: string; }; }' is not assignable to type '{ [key: string]: string | number | boolean | TightMap\u003Cstring | number | boolean>; }'.\n Property 'colors' is incompatible with index signature.\n Type 'string[]' is not assignable to type 'string | number | boolean | TightMap\u003Cstring | number | boolean>'.\n Type 'string[]' is not assignable to type 'TightMap\u003Cstring | number | boolean>'.\n Index signature for type 'string' is missing in type 'string[]'.ts(2322)\nmodule.d.mts(14, 9): The expected type comes from property 'ui' which is declared here on type 'AppConfigInput'\n```\nthe error will gone when I commented this code\n\n> colors: [\"secondary\", \"tertiary\", \"surface\"]\n\nbut it still gives me error when I use it in components color props\n\nwhen I use the custom color without thinking about the error in components like this.\n```\n\u003Ctemplate>\n \u003CUProgress :value=\"value\" color=\"tertiary\" />\n\u003C/template>\n```\nit gives me error but the color is appearing\n\nwhat possibly wrong with my setup?",[2085,2088],{"name":2086,"color":2087},"question","d876e3",{"name":2089,"color":2090},"needs reproduction","CB47CF",2984,"Error when adding colors key into ui object inside app.config.ts","2025-03-28T17:36:32Z","https://github.com/nuxt/ui/issues/2984",0.7799917,{"description":2097,"labels":2098,"number":2100,"owner":1988,"repository":1988,"state":2028,"title":2101,"updated_at":2102,"url":2103,"score":2104},"We should update the [Coming in Nuxt 3](https://v3.nuxtjs.org/guide/concepts/rendering/#coming-in-nuxt-3) section of the Rendering Modes page to reflect the current state of hybrid rendering with Nitro (`nitro.prerender`) ",[2099],{"name":1985,"color":1986},15037,"Update Rendering Modes docs","2024-07-16T12:37:06Z","https://github.com/nuxt/nuxt/issues/15037",0.7813185,["Reactive",2106],{},["Set"],["ShallowReactive",2109],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"f_ldGTSD8khA3VIBI2wRClaSjt635-r77d3j-QMVW3Y":-1},"/nuxt/nuxt.com/17"]