\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.7107507,{"description":3151,"labels":3152,"number":3157,"owner":3143,"repository":3144,"state":3145,"title":3158,"updated_at":3159,"url":3160,"score":3161},"### Description\n\nHey guys is it possible to have a dark or colorful header with nuxtui while maintaining a light theme for the rest of the page? Even when setting a \"dark\" on UHeader does not really work they way i wanted it to work.\n\nso instead \"bg-default/75\" i wanted to use \"bg-primary\" (which might resolve to any of the theme roller primary colors).\n\nIf someone experienced / solved it i would be happy to get in contact",[3153,3154],{"name":3140,"color":3141},{"name":3155,"color":3156},"v3","49DCB8",4500,"dark header in a light theme","2025-07-10T13:23:32Z","https://github.com/nuxt/ui/issues/4500",0.7207932,{"description":3163,"labels":3164,"number":3168,"owner":3143,"repository":3169,"state":3170,"title":3171,"updated_at":3172,"url":3173,"score":3174},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-vy6psx\n\n### Describe the bug\n\n```\r\nError: [vitest] Cannot mock \"vue-router\" because it is already loaded by \"virtual:nuxt:/home/projects/github-vy6psx/.nuxt/vue-router-stub.mjs\", \"virtual:nuxt:/home/projects/github-vy6psx/.nuxt/pages.mjs\".\r\n\r\nPlease, remove the import if you want static imports to be mocked, or clear module cache by calling \"vi.resetModules()\" before mocking if you are going to import the file again. See: https://vitest.dev/guide/common-errors.html#cannot-mock-mocked-file-js-because-it-is-already-loaded\r\n```\r\n\r\nI get this error message whenever I try to mock `vue-router` after upgrading to `3.9.0`. \r\nBefore the merge of `nuxt-vitest` and `@nuxt/text-utils`, the mock worked fine.\r\nI've tried to `vi.resetModules()` and other alike functions, but none of them have helped.\r\n\r\nAdditionally, if `@nuxt/test-utils/module` is present in `nuxt.config.ts` modules, `npm run dev` throws the following error:\r\n```\r\nThis module cannot be imported in the Vue part of your app. [importing @nuxt/test-utils/runtime from pages/__tests__/index.spec.ts]\r\n```\n\n### Additional context\n\nTests can be ran with `npm run test`.\r\n`vi.mock()` is located in `pages/__tests__/index.spec.ts`.\n\n### Logs\n\n_No response_",[3165],{"name":3166,"color":3167},"pending triage","5D08F5",734,"test-utils","closed","vue-router mock","2024-09-23T14:14:32Z","https://github.com/nuxt/test-utils/issues/734",0.7300211,{"description":3176,"labels":3177,"number":3184,"owner":3143,"repository":3144,"state":3170,"title":3185,"updated_at":3186,"url":3187,"score":3188},"### Description\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: 'blue',\n neutral: 'zinc'\n }\n }\n})\n```\n> When configuring your theme colors, you must use either color names from the [default Tailwind palette](https://tailwindcss.com/docs/colors) (like 'blue', 'green', etc.) or reference custom colors that you've previously defined in your [CSS file](https://ui.nuxt.com/getting-started/theme#theme).\n\nI think it would be good to add additional information about how to define color for default configuration so referenced color will be assigned. What I mean is, imagine you define a color in CSS:\n```css\n@theme static {\n --color-tory-blue: #ebf9ff;\n}\n```\n\nthen decide to override primary with that color:\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: 'tory-blue',\n }\n }\n})\n```\n\nit won't work. Except you just need to add -500 for light theme and -400 for dark theme.\n```css\n--color-tory-blue-400: #35cbff;\n--color-tory-blue-500: #07a8ff;\n```\n\n\n\n### Additional context\n\n[Link to doc](https://ui.nuxt.com/getting-started/theme#configuration)",[3178,3181],{"name":3179,"color":3180},"enhancement","a2eeef",{"name":3182,"color":3183},"triage","ffffff",4809,"Documentation is not very clear.","2025-09-11T15:22:14Z","https://github.com/nuxt/ui/issues/4809",0.7328177,{"labels":3190,"number":3198,"owner":3143,"repository":3143,"state":3170,"title":3199,"updated_at":3200,"url":3201,"score":3202},[3191,3193,3195],{"name":3192,"color":3183},"stale",{"name":3166,"color":3194},"E99695",{"name":3196,"color":3197},"2.x","d4c5f9",9977,"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.7385361,{"labels":3204,"number":3208,"owner":3143,"repository":3143,"state":3170,"title":3209,"updated_at":3210,"url":3211,"score":3212},[3205,3207],{"name":3179,"color":3206},"8DEF37",{"name":3196,"color":3197},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.73878056,{"description":3214,"labels":3215,"number":3218,"owner":3143,"repository":3219,"state":3170,"title":3220,"updated_at":3221,"url":3222,"score":3223},"> As of right now, the `ui` module does not support overriding the gray color",[3216],{"name":3179,"color":3217},"1ad6ff",486,"nuxt.com","Dark mode with custom gray palette","2022-05-18T09:03:31Z","https://github.com/nuxt/nuxt.com/issues/486",0.7406617,{"description":3225,"labels":3226,"number":3218,"owner":3143,"repository":3169,"state":3170,"title":3227,"updated_at":3228,"url":3229,"score":3223},"This way of overriding options (using spread operator):\r\nhttps://github.com/nuxt-community/module-test-utils/blob/2801ebd478d54e97d95310bbfbd69e642223f363/lib/setup.js#L13-L16\r\nis often very limiting because it makes it impossible to override particular property of an object that has other properties.\r\n\r\nFor example, if we try to override one property from object:\r\n```\r\n{\r\n i18n: {\r\n a: 1,\r\n b: 2,\r\n c: 3,\r\n }\r\n}\r\n```\r\nwith:\r\n```\r\nconst override = {\r\n i18n: {\r\n b: 4\r\n }\r\n}\r\n```\r\nthen that will override whole `i18n` object, leaving just property `b`.\r\n\r\nThis module should rather use something like this:\r\n```\r\nconst deepMerge = require('deepmerge')\r\nconst options = deepMerge.all([options, override])\r\n```\r\n(This would probably be a breaking change if one relied on previous behavior)",[],"Inflexible nuxt options override","2023-12-02T00:13:13Z","https://github.com/nuxt/test-utils/issues/486",{"description":3231,"labels":3232,"number":3242,"owner":3143,"repository":3143,"state":3170,"title":3243,"updated_at":3244,"url":3245,"score":3246},"### 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_",[3233,3236,3239],{"name":3234,"color":3235},"bug","d73a4a",{"name":3237,"color":3238},"upstream","E8A36D",{"name":3240,"color":3241},"🔨 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.74899405,{"labels":3248,"number":3252,"owner":3143,"repository":3143,"state":3170,"title":3253,"updated_at":3254,"url":3255,"score":3256},[3249,3250,3251],{"name":3192,"color":3183},{"name":3166,"color":3194},{"name":3196,"color":3197},7534,"Adding vuetify optionsPath changes background color from dark to light","2023-01-22T15:36:01Z","https://github.com/nuxt/nuxt/issues/7534",0.7505378,["Reactive",3258],{},["Set"],["ShallowReactive",3261],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fAQ_bxM4GRR9jt8m_kUR6vvppwEOP4JhOepE--zSowts":-1},"/nuxt/ui/3645"]