\n```\n\nWould it be relevant to add a global attribute to components like Button, Badge, etc., to force their appearance in dark (or light) mode, regardless of the global setting? This would ensure better visual consistency when these elements are placed on a colored background (e.g., `UPageCTA` with `solid` variant).\n\n### Additional context\n\n_No response_",[3139,3142],{"name":3140,"color":3141},"enhancement","a2eeef",{"name":3143,"color":3144},"v3","49DCB8",3307,"nuxt","ui","open","Better handling of `UButton`, `UBadge`, … colors on colored backgrounds","2025-08-25T13:20:01Z","https://github.com/nuxt/ui/issues/3307",0.72905374,{"description":3154,"labels":3155,"number":3164,"owner":3146,"repository":3147,"state":3148,"title":3165,"updated_at":3166,"url":3167,"score":3168},"### Environment\n\nn/a\n\n### Version\n\n2.12.3\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-t7vmme?file=app.vue\n\n### Description\n\nNoticed when deploying a sample app (https://nuxt-spooon.vercel.app) that the default styles for the subtle badge variant do not pass lighthouse accessibility guidelines. Obviously I could fix this by overriding the styles but it seems like this could be an easy win.\r\n\r\nMight also be worth adding an automated accessibility test for all default elements (maybe by auditing the docs website?)\r\n\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3156,3159,3162],{"name":3157,"color":3158},"bug","d73a4a",{"name":3160,"color":3161},"closed-by-bot","ededed",{"name":3163,"color":3161},"stale",1284,"`\u003CUBadge variant=\"subtle\">` does not pass lighthouse accessibility audit","2025-06-28T14:24:14Z","https://github.com/nuxt/ui/issues/1284",0.73928446,{"description":3170,"labels":3171,"number":3176,"owner":3146,"repository":3147,"state":3148,"title":3177,"updated_at":3178,"url":3179,"score":3180},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v23.11.0\n- Nuxt Version: 4.0.3\n- CLI Version: 3.28.0\n- Nitro Version: 2.12.4\n- Package Manager: pnpm@9.15.2\n- Builder: -\n- User Config: modules, $development, devtools, css, router, colorMode, ui, runtimeConfig, routeRules, devServer, experimental, compatibilityDate, typescript, eslint, fonts, security\n- Runtime Modules: @nuxt/ui@3.3.3, @pinia/nuxt@0.11.2, nuxt-security@2.3.0, @nuxt/content@3.6.3, @nuxtjs/leaflet@1.3.2, @nuxt/image@1.11.0, @vueuse/nuxt@13.7.0, @yuta-inoue-ph/nuxt-vcalendar@1.1.0, @nuxt/scripts@0.11.10, @nuxt/eslint@1.9.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv3.x\n\n### Version\n\nv3.3.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/quizzical-keldysh-wtw7zm\n\n### Description\n\nUsing Nuxt UI 3, I'm having issues styling a custom variant in a specific color. \n\nDefining the custom variant in the button.variants.variant works as expected, and intellisense recognizes the variant elsewhere in the project. Once I attempt to define a compoundVariant that includes the custom variant, intellisense breaks and the project no longer builds, as it appears the compoundVariants object is expecting the fixed list of variants specified in the base button. \n\nExample config:\n```\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: \"green\",\n neutral: \"slate\",\n },\n button: {\n variants: {\n variant: {\n custom: {\n label: \"uppercase\",\n },\n },\n },\n compoundVariants: [{\n variant: 'custom'\n color: 'secondary',\n class: 'text-fuschia-500'\n }],\n },\n },\n});\n```\nError: \n`Type '\"custom\"' is not assignable to type '\"link\" | \"solid\" | \"outline\" | \"soft\" | \"subtle\" | \"ghost\" | (\"link\" | \"solid\" | \"outline\" | \"soft\" | \"subtle\" | \"ghost\")[] | undefined'.`\n\n### Additional context\n\nnote, this is a dupe of https://github.com/nuxt/ui/issues/4046 - feel free to close this and reopen the original if that is better.\n\n### Logs\n\n```shell-script\n\n```",[3172,3173],{"name":3157,"color":3158},{"name":3174,"color":3175},"triage","ffffff",4888,"Custom Variant and `compoundVariants` typing issue","2025-09-03T17:02:45Z","https://github.com/nuxt/ui/issues/4888",0.75388265,{"description":3182,"labels":3183,"number":3188,"owner":3146,"repository":3147,"state":3189,"title":3190,"updated_at":3191,"url":3192,"score":3193},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.9.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, nuxt-svgo@4.0.9, @pinia/nuxt@0.9.0, pinia-plugin-persistedstate/nuxt, @nuxtjs/i18n@9.1.0, nuxt-jsonld@2.1.0, @nuxtjs/robots@5.0.0, nuxt-gtag@3.0.2, @sentry/nuxt/module@8.42.0, nuxt-time@1.0.3, @nuxt/eslint@0.7.2\n- Build Modules: -\n\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-ncxoznzw\n\n### Description\n\nIf you define your own color for tailwinds, and attempt to use it on a UButton component with the link variant, it will not work and give the following error:\n\n```\n500\nvariant?.replaceAll is not a function\n\nat ComputedRefImpl.fn (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:142:18)\nat refreshComputed (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:353:29)\nat get value (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1558:5)\nat unref (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1431:29)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1437:64)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:3099:26)\nat Proxy._sfc_render (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:199:17)\nat renderComponentRoot (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:6521:16)\nat hydrateSubTree (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5309:32)\nat ReactiveEffect.componentUpdateFn [as fn] (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5334:13)\n```\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3184,3185,3186,3187],{"name":3157,"color":3158},{"name":3174,"color":3175},{"name":3160,"color":3161},{"name":3163,"color":3161},2860,"closed","[UButton] Using a custom color on the link variant causes an error","2025-06-18T09:05:19Z","https://github.com/nuxt/ui/issues/2860",0.70326936,{"description":3195,"labels":3196,"number":3199,"owner":3146,"repository":3147,"state":3189,"title":3200,"updated_at":3201,"url":3202,"score":3203},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.16.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui-pro@3.0.0-alpha.10, @nuxtjs/i18n@9.1.1, nuxt-auth-utils@0.5.7\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.10\n\n### Reproduction\n\n```html\n\u003CUTabs\n variant=\"link\"\n :content=\"false\"\n :items=\"[{ label: 'Tab 1' }, { label: 'Tab 2' }, { label: 'Tab 3' }]\"\n>\n \u003Ctemplate #trailing>\n \u003CUBadge\n color=\"neutral\"\n size=\"xs\"\n variant=\"outline\"\n >\n 1.234\n \u003C/UBadge>\n \u003C/template>\n\u003C/UTabs>\n```\n\n### Description\n\nI'm trying to use `UBadge` as a `trailing` slot for `UTabs`, but in this scenario the `UBadge` component is getting misconfigured and is not respecting the `size`.\n\n\u003Cimg width=\"359\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/d30d629a-d517-40de-80ed-fb272d699a29\" />\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3197,3198],{"name":3157,"color":3158},{"name":3143,"color":3144},2963,"v3: UBadge conflict with UTabs","2024-12-23T21:08:29Z","https://github.com/nuxt/ui/issues/2963",0.7341409,{"description":3205,"labels":3206,"number":3213,"owner":3146,"repository":3146,"state":3189,"title":3214,"updated_at":3215,"url":3216,"score":3217},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.12.0`\n- Nuxt Version: `3.15.1`\n- CLI Version: `3.20.0`\n- Nitro Version: `2.10.4`\n- Package Manager: `pnpm@9.15.2`\n- Builder: `-`\n- User Config: `compatibilityDate`, `devtools`, `modules`\n- Runtime Modules: `@nuxt/ui@2.20.0`\n- Build Modules: `-`\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-jxcmyybr?file=app.vue\n\n### Describe the bug\n\nAfter looping though all items in useAppConfig().ui.colors, i get a false positive error after assigning the item to a UBadge's color property, the color is still applied.\n\n### Logs\n\n```shell-script\n[The expected type comes from property 'color' which is declared here on type 'Partial\u003C{ size: BadgeSize; class: any; ui: { base?: string | undefined; rounded?: string | undefined; font?: string | undefined; size?: DeepPartial\u003C{ xs: string; sm: string; md: string; lg: string; }, any> | undefined; ... 4 more ...; default?: DeepPartial\u003C...> | undefined; } & { ...; } & { ...; }; ... 7 more ...; t...'](https://github.com/nuxt/nuxt/issues/30535#issue-2781450805)\n```",[3207,3210],{"name":3208,"color":3209},"pending triage","E99695",{"name":3211,"color":3212},"needs reproduction","FBCA04",30535,"Type 'string' is not assignable to type 'BadgeColor | undefined'.ts-plugin(2322)","2025-01-12T23:05:37Z","https://github.com/nuxt/nuxt/issues/30535",0.7353284,{"description":3219,"labels":3220,"number":3224,"owner":3146,"repository":3147,"state":3189,"title":3225,"updated_at":3226,"url":3227,"score":3228},"### Environment\n\n- Operating System: `Linux`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.17.3`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `bun@1.2.13`\n- Builder: `-`\n- User Config: `future`, `compatibilityDate`, `devtools`, `modules`, `css`, `components`, `i18n`, `icon`, `runtimeConfig`, `app`, `hooks`, `site`, `sitemap`, `pwa`, `fonts`\n- Runtime Modules: `@nuxt/eslint@1.4.0`, `@nuxt/fonts@0.11.4`, `@nuxt/image@1.10.0`, `@nuxt/scripts@0.11.7`, `@nuxt/ui@3.1.2`, `@nuxtjs/i18n@9.5.4`, `@vueuse/nuxt@13.2.0`, `@pinia/nuxt@0.11.0`, `@nuxtjs/sitemap@7.2.10`, `@vite-pwa/nuxt@1.0.1`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/wizardly-shamir-f8924y\n\n### Description\n\nThe `URadioGroup` component's table variant renders borders incorrectly in RTL mode. This appears to be a visual issue specific to RTL layouts. The expected result is that borders should match the appearance of the LTR layout, but they do not.\n\n### Additional context\n\nIn LTR Mode:\n\n\nIn RTL Mode:\n",[3221,3222,3223],{"name":3157,"color":3158},{"name":3143,"color":3144},{"name":3174,"color":3175},4190,"URadioGroup table variant borders display incorrectly in RTL mode","2025-05-22T12:36:45Z","https://github.com/nuxt/ui/issues/4190",0.73920107,{"description":3230,"labels":3231,"number":3236,"owner":3146,"repository":3146,"state":3189,"title":3237,"updated_at":3238,"url":3239,"score":3240},"### Version\n\n[v1.4.2](https://github.com/nuxt.js/releases/tag/v1.4.2)\n\n### Reproduction link\n\n[https://github.com/nuxt/nuxt.js/tree/dev/examples/with-vuetify](https://github.com/nuxt/nuxt.js/tree/dev/examples/with-vuetify)\n\n### Steps to reproduce\n\nI cloned the whole Nuxt repo at: https://github.com/nuxt/nuxt.js\n\nThen navigated to: `nuxt.js/examples/with-vuetify`\n\nThen installed dependencies with `yarn install` and ran the server with `yarn dev`.\n\nThen opened `http://localhost:3000` and saw that no colors are being presented. It's all black and white.\n\nIf I have something like `\u003Cv-btn color=\"primary\">Something\u003C/v-btn>` the text is not visible as it is colored white.\n\n### What is expected ?\n\n\n\n\n### What is actually happening?\n\n\n\n\n### Additional comments?\n\nI'm on Linux Manjaro.\nNode 10.9.0.\nit's the same with Nuxt 1.4.2 or nuxt-edge.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7607\">#c7607\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3232,3233],{"name":3208,"color":3209},{"name":3234,"color":3235},"2.x","d4c5f9",3777,"Vuetify theme colors are not rendered properly","2023-01-22T15:30:05Z","https://github.com/nuxt/nuxt/issues/3777",0.7410222,{"labels":3242,"number":3245,"owner":3146,"repository":3146,"state":3189,"title":3246,"updated_at":3247,"url":3248,"score":3249},[3243,3244],{"name":3208,"color":3209},{"name":3234,"color":3235},4204,"Inconsistent css in dev vs prod","2024-08-03T20:53:43Z","https://github.com/nuxt/nuxt/issues/4204",0.7427488,{"description":3251,"labels":3252,"number":3257,"owner":3146,"repository":3147,"state":3189,"title":3258,"updated_at":3259,"url":3260,"score":3261},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.12.0`\n- Nuxt Version: `3.17.1`\n- CLI Version: `3.25.0`\n- Nitro Version: `2.11.11`\n- Package Manager: `pnpm@10.6.2`\n- Builder: `-`\n- User Config: `modules`, `devtools`, `app`, `css`, `site`, `content`, `runtimeConfig`, `build`, `future`, `experimental`, `compatibilityDate`, `typescript`, `cookieControl`, `eslint`, `i18n`, `icon`, `image`, `ogImage`, `sitemap`, `turnstile`\n- Runtime Modules: `@vueuse/nuxt@13.1.0`, `@nuxt/eslint@1.3.0`, `@nuxt/ui-pro@3.1.0`, `@nuxtjs/sitemap@7.2.10`, `@nuxtjs/robots@5.2.10`, `@nuxt/content@3.5.1`, `nuxt-og-image@5.1.3`, `@nuxt/image@1.10.0`, `@nuxtjs/turnstile@1.0.0`, `@dargmuesli/nuxt-cookie-control@9.0.2`, `@nuxtjs/robots@5.2.10`, `nuxt-auth-utils@0.5.20`, `@nuxtjs/i18n@9.5.3`\n- Build Modules: `-`\n\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nnot needed for this situation\n\n### Description\n\nI'm hoping this just turns into a question, but I'm trying to figure out if custom variants are supported by TypeScript, I tried adding a variant to a button using this methodology:\n\n```ts\n button: {\n variants: {\n variant: {\n gradient: 'shadow-sm shadow-emerald-300/5 border border-emerald-300/10 hover:shadow hover:border-emerald-300 hover:shadow-emerald-300 transition-all duration-200 text-white bg-gradient-to-br from-logo-a via-logo-a-dark to-logo-a focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400',\n },\n },\n defaultVariants: {\n color: 'neutral',\n variant: 'subtle',\n },\n default: {\n color: 'white',\n loadingIcon: 'i-mdi-loading',\n },\n },\n```\nI also tried adding it via `compoundVariants` as well - and while this strategy works fine in both situations, I get TS errors whenever I try to apply it at the component.\n\n```\nType '\"gradient\"' is not assignable to type '\"solid\" | \"outline\" | \"soft\" | \"subtle\" | \"ghost\" | \"link\" | undefined'.ts-plugin(2322)\n```\n\n\u003Cimg width=\"975\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/c38d6ba5-ccae-4609-bfdb-38c8d084a442\" />\n\nAm I doing something wrong? Or is TS support for variants just not completed yet?\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3253,3254,3256],{"name":3157,"color":3158},{"name":3211,"color":3255},"CB47CF",{"name":3143,"color":3144},4046,"provide a custom TS-safe custom variant","2025-05-23T13:22:19Z","https://github.com/nuxt/ui/issues/4046",0.74428344,["Reactive",3263],{},["Set"],["ShallowReactive",3266],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fiu7nRSJNbFreCtbn653AgbrNjnkohKGWc35OvUFj6Os":-1},"/nuxt/ui/3378"]