\n\nI tried using the dark mode to see the result, and the contrast is far better. \n\n\u003Cimg width=\"1131\" height=\"356\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/269ee292-f4fa-4d95-8d14-75e1e48870f5\" />\n\nSo i'm wondering if it's the expected behavior.\n\nDid i make a mistake somehow ?\n\nOr do you think there might be a problem with the contrasts of the neutral palette between low values (50 ~ 200)?\n\n\u003Cimg width=\"437\" height=\"207\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b3003f37-c0f1-4ae5-8f6d-b4aad0d503c2\" />\n\nOr the mapping between the --ui-bg colors and the neutral colors should be revised ?\n\n```CSS\n--ui-bg: var(--color-white);\n--ui-bg-muted: var(--ui-color-neutral-50);\n--ui-bg-elevated: var(--ui-color-neutral-100);\n--ui-bg-accented: var(--ui-color-neutral-200);\n--ui-bg-inverted: var(--ui-color-neutral-900);\n```\n\nThanks in advance for your help !",[3139],{"name":3140,"color":3141},"question","d876e3",4704,"nuxt","ui","open","Light theme, neutral color contrast","2025-08-11T14:53:37Z","https://github.com/nuxt/ui/issues/4704",0.7117544,{"labels":3151,"number":3161,"owner":3143,"repository":3143,"state":3162,"title":3163,"updated_at":3164,"url":3165,"score":3166},[3152,3155,3158],{"name":3153,"color":3154},"stale","ffffff",{"name":3156,"color":3157},"pending triage","E99695",{"name":3159,"color":3160},"2.x","d4c5f9",9977,"closed","How can I switch to dark mode of element-ui by building different css for themes?","2023-01-22T15:45:05Z","https://github.com/nuxt/nuxt/issues/9977",0.70678216,{"labels":3168,"number":3173,"owner":3143,"repository":3143,"state":3162,"title":3174,"updated_at":3175,"url":3176,"score":3177},[3169,3172],{"name":3170,"color":3171},"enhancement","8DEF37",{"name":3159,"color":3160},8580,"Different colors for the loading indicator when user has dark mode enabled","2023-07-26T09:16:54Z","https://github.com/nuxt/nuxt/issues/8580",0.7131606,{"description":3179,"labels":3180,"number":3182,"owner":3143,"repository":3144,"state":3162,"title":3183,"updated_at":3184,"url":3185,"score":3186},"### Description\n\nHow to make nuxt-ui-colors have a nonce in its style header?",[3181],{"name":3140,"color":3141},3395,"nuxt-ui-colors with nonce","2025-05-10T19:48:55Z","https://github.com/nuxt/ui/issues/3395",0.7227117,{"description":3188,"labels":3189,"number":3194,"owner":3143,"repository":3144,"state":3162,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### Description\n\nHi, I'm having a hard time applying transition to dark / light background.\n\nMy `main.css` file is as follows.\n\nChanging the background color from `slate` to `stone`, for example, works fine.\n\nThe problem is just for the light / dark theme transition.\n\n```\n:root {\n --ui-bg: var(--ui-color-neutral-100);\n}\n\n.dark {\n --ui-bg: var(--ui-color-neutral-900);\n}\n\n@layer base {\n body {\n @apply transition-colors duration-1000;\n }\n}\n```\n\nHere is the function that changes the theme:\n\n```\nconst isDark = computed({\n get() {\n return colorMode.value === 'dark';\n },\n set() {\n colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';\n },\n});\n```\n\nAny help would be appreciated, thanks!\n",[3190,3191],{"name":3140,"color":3141},{"name":3192,"color":3193},"v3","49DCB8",3645,"Applying transition-colors to light / dark theme","2025-07-09T10:37:15Z","https://github.com/nuxt/ui/issues/3645",0.72295535,{"description":3200,"labels":3201,"number":3206,"owner":3143,"repository":3143,"state":3162,"title":3207,"updated_at":3208,"url":3209,"score":3210},"### Environment\n\n- Operating System: Windows 10\r\n- Node Version: v20.9.0\r\n- Nuxt Version: 3.8.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: yarn@1.22.21\r\n- Builder: -\r\n- User Config: routeRules, devtools, css, runtimeConfig, nitro, modules, alias, vite, components\r\n- Runtime Modules: @nuxtjs/i18n@8.0.0-rc.5, nuxt-icons@3.2.1, @unocss/nuxt@0.57.7, @element-plus/nuxt@1.0.7, @vueuse/nuxt@10.7.0, @vueuse/motion/nuxt@2.0.0, @pinia/nuxt@0.5.1, @pinia-plugin-persistedstate/nuxt@1.2.0, @nuxtjs/device@3.1.1\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-rr4shs?file=app.vue\n\n### Describe the bug\n\nIn the dark mode && toggleDark from @vueuse/core, refresh the page, we would see the background color of the page flashes from white to black. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3202,3205],{"name":3203,"color":3204},"3.x","29bc7f",{"name":3156,"color":3157},24819,"Background color flashes between light and dark mode using @vueuse/nuxt","2023-12-20T03:49:21Z","https://github.com/nuxt/nuxt/issues/24819",0.7261924,{"description":3212,"labels":3213,"number":3218,"owner":3143,"repository":3143,"state":3162,"title":3219,"updated_at":3220,"url":3221,"score":3222},"### Environment\r\n\r\n```\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, modules\r\n- Runtime Modules: @nuxtjs/color-mode@3.4.2\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-ycyewb?file=app.vue\r\n\r\n### Describe the bug\r\n\r\nI set 3 different `theme-color` meta tags using `useHead` in `app.vue`.\r\n\r\n```ts\r\nuseHead({\r\n meta: [\r\n\t // Set theme-color based on color mode\r\n\t {\r\n\t\t name: 'theme-color',\r\n\t\t key: 'system prefers light mode',\r\n\t\t media: '(prefers-color-scheme: light)',\r\n\t\t content: colorMode.preference === 'dark' ? '#111827' : '#ffffff',\r\n\t },\r\n\t {\r\n\t\t name: 'theme-color',\r\n\t\t key: 'system prefers dark mode',\r\n\t\t media: '(prefers-color-scheme: dark)',\r\n\t\t content: colorMode.preference === 'light' ? '#ffffff' : '#111827',\r\n\t },\r\n\t {\r\n\t\t name: 'theme-color',\r\n\t\t key: 'fallback for browsers without media support for theme-color',\r\n\t\t // use dark style by default, unless preference is set to light explicitly.\r\n\t\t content: colorMode.preference === 'light' ? '#ffffff' : '#111827',\r\n\t },\r\n ],\r\n})\r\n```\r\n\r\nI expect the following meta tags to be present when loading the page:\r\n```\r\n\u003Cmeta name=\"theme-color\" media=\"(prefers-color-scheme: light)\" content=\"#ffffff\">\r\n\u003Cmeta name=\"theme-color\" media=\"(prefers-color-scheme: dark)\" content=\"#111827\">\r\n\u003Cmeta name=\"theme-color\" content=\"#111827\">\r\n```\r\nIn fact, after the initial render (SSR) these meta tags are correctly set. I verified using curl.\r\n\r\nHowever, after client hydration, the meta tags change to the following:\r\n```\r\n\u003Cmeta name=\"theme-color\" media=\"(prefers-color-scheme: dark)\" content=\"#ffffff\">\r\n\u003Cmeta name=\"theme-color\" media=\"(prefers-color-scheme: dark)\" content=\"#111827\">\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3214,3215],{"name":3156,"color":3157},{"name":3216,"color":3217},"upstream","E8A36D",28298,"theme-color meta tags are incorrectly deduped","2024-07-24T16:45:51Z","https://github.com/nuxt/nuxt/issues/28298",0.73459065,{"description":3224,"labels":3225,"number":3229,"owner":3143,"repository":3230,"state":3162,"title":3231,"updated_at":3232,"url":3233,"score":3234},"https://github.com/nuxt-community/color-mode-module/issues/127",[3226],{"name":3227,"color":3228},"bug","ff281a",68,"nuxt.com","[Nuxt3] `useMeta` overrides dark mode","2022-04-07T09:27:00Z","https://github.com/nuxt/nuxt.com/issues/68",0.73769736,{"description":3236,"labels":3237,"number":3246,"owner":3143,"repository":3144,"state":3162,"title":3247,"updated_at":3248,"url":3249,"score":3250},"### Environment\n\n\n```\n\"@nuxt/ui\": \"^3.1.3\",\n\"@nuxt/ui-pro\": \"^3.1.3\",\n\"nuxt\": \"^3.17.5\",\n```\n\n\n```\nui: {\n prefix: 'Custom',\n},\n```\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.5\n\n### Reproduction\n\nIf I simply switch out the `CustomHeader` to a basic `header` element and remove the `template` tags the nested CustomNavigationMenu works and I'm not getting unable to resolve component warnings.\n\n```\n\u003Cscript setup lang=\"ts\">\nimport type { NavigationMenuItem } from '@nuxt/ui'\n\ndefineProps\u003C{\n links: NavigationMenuItem[]\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CCustomHeader>\n \u003Ctemplate #left>\n \u003CClientOnly>\n \u003CNuxtLink to=\"/\">\n \u003CBaseLogo />\n \u003C/NuxtLink>\n \u003C/ClientOnly>\n \u003C/template>\n\n \u003CCustomNavigationMenu :items=\"links\" variant=\"link\" />\n\n \u003Ctemplate #right>\n \u003CThemePicker />\n \u003C/template>\n\n \u003Ctemplate #body>\n \u003CCustomNavigationMenu\n orientation=\"vertical\"\n :items=\"links\"\n />\n \u003C/template>\n \u003C/CustomHeader>\n\u003C/template>\n```\n\nerrors:\n[Vue warn]: Failed to resolve component: UButton\nIf this is a native custom element, make sure to exclude it from component resolution via ...\n[Vue warn]: Failed to resolve component: UContainer\nIf this is a native custom element, make sure to exclude it from component resolution via ...\n[Vue warn]: Failed to resolve component: ULink\nIf this is a native custom element, make sure to exclude it from component resolution via ..\n\n### Description\n\nIf i'm setting a custom prefix in the `ui: {}` config object for the components the UHeader component is unable to resolve its nested components.\n\n### Additional context\n\nI think i've seen issues like this previously also posted, and maybe its some import that is missing.\n\n### Logs\n\n```shell-script\n\n```",[3238,3240,3241,3244],{"name":3227,"color":3239},"d73a4a",{"name":3192,"color":3193},{"name":3242,"color":3243},"nuxt/ui-pro","00dc82",{"name":3245,"color":3154},"triage",4371,"custom prefix not working when set with UHeader","2025-06-18T09:09:47Z","https://github.com/nuxt/ui/issues/4371",0.7385183,{"description":3252,"labels":3253,"number":3256,"owner":3143,"repository":3144,"state":3162,"title":3257,"updated_at":3258,"url":3259,"score":3260},"### Description\n\nHey all, \n\nI'm fairly new to nuxt module authorship, and so I was wondering how one may use nuxtUI within a custom module?\nI have the module working, but none of my stylings are coming through, so I am assuming it is a configuration issue. Any guidance, links, or docs on this topic would be greatly appreciated.",[3254,3255],{"name":3140,"color":3141},{"name":3192,"color":3193},4118,"Using NuxtUI within a module","2025-05-23T13:23:04Z","https://github.com/nuxt/ui/issues/4118",0.7417002,["Reactive",3262],{},["Set"],["ShallowReactive",3265],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f07g4_iwcUUCKFJYwXfPG2U2cfyFM3-s6BMDvRWApbvA":-1},"/nuxt/ui/4500"]