\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.7574259,{"description":3151,"labels":3152,"number":3159,"owner":3143,"repository":3143,"state":3160,"title":3161,"updated_at":3162,"url":3163,"score":3164},"Hi,\r\n\r\nI noticed that the colorscheme of the code block in the documents of modules doesn't display well in light mode.\r\n\r\nFor example, in [@nuxt/tailwindcss](https://nuxt.com/modules/tailwindcss),\r\n\r\nThe color of the code is the same as the background, for example:\r\n\r\nIn light mode, I can't see any code but comments\r\n\r\n\r\nHowever, in dark mode, it works well\r\n\r\n\r\nThe braces in the code block have a similar issue as well, \r\n\r\nIn light mode, all the braces disappear:\r\n\r\n\r\nCompared with dark mode:\r\n\r\n",[3153,3156],{"name":3154,"color":3155},"documentation","5319e7",{"name":3157,"color":3158},"3.x","29bc7f",15501,"closed","Colorscheme of code blocks in light mode seems unclear","2023-02-15T13:09:14Z","https://github.com/nuxt/nuxt/issues/15501",0.68210346,{"description":3166,"labels":3167,"number":3174,"owner":3143,"repository":3144,"state":3160,"title":3175,"updated_at":3176,"url":3177,"score":3178},"### For what version of Nuxt UI are you suggesting this?\n\nv3-alpha\n\n### Description\n\nAdd `code` to `defineLocale`, it comes in handy in several components:\n\n* https://www.radix-vue.com/components/number-field.html\n* https://www.radix-vue.com/components/calendar.html\n\nYou need to pass the `locale` property there, you can get it from `defineLocale`\n\n### Additional context\n\n_No response_",[3168,3171],{"name":3169,"color":3170},"enhancement","a2eeef",{"name":3172,"color":3173},"v3","49DCB8",2610,"Provide `code` on `defineLocale`","2024-11-12T11:57:53Z","https://github.com/nuxt/ui/issues/2610",0.71490264,{"description":3180,"labels":3181,"number":3182,"owner":3143,"repository":3143,"state":3160,"title":3183,"updated_at":3184,"url":3185,"score":3186},"### Environment\n\nIt's not particularly relevant to the docs y'all host, but if you want to know, here's my environment info:\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.12.1`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@8.19.2`\r\n- Builder: `vite`\r\n- User Config: `title`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://nuxt.com/modules/i18n\r\nhttps://nuxt.com/modules/tailwindcss\n\n### Describe the bug\n\nCode snippets' text is in a mid-to-dark grey, dark blue, and dark orange on a black background making them neigh impossible to read. (The bright blue `>` prompts on the black background also cause my eyes to wig out a bit, but that might just be me. The contrast definitely isn't.)\r\n\r\n\u003Cimg width=\"1456\" alt=\"lighthouse\" src=\"https://user-images.githubusercontent.com/7552754/206815045-19717335-9107-4f9e-9989-ee0a233f1227.png\">\r\n\r\n\r\n\r\n\r\n\n\n### Additional context\n\nThis is happening in both Firefox 107.0.1 and Chrome 108.0.5359.98 on macOS 10.15.7 with the operating system set to \"Light\" Appearance.\n\n### Logs\n\n_No response_",[],15823,"Module Docs: Almost no contrast on code snippets","2023-01-20T14:16:02Z","https://github.com/nuxt/nuxt/issues/15823",0.7183086,{"description":3188,"labels":3189,"number":3196,"owner":3143,"repository":3144,"state":3160,"title":3197,"updated_at":3198,"url":3199,"score":3200},"### Environment\r\n\r\n- \"@nuxt/ui\": \"^2.18.6\",\r\n- \"nuxt\": \"^3.13.2\",\r\n- \"vue\": \"^3.5.10\",\r\n\r\n### Version\r\n\r\nv2.18.6\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/guirak/NuxtUiTailwindContentPurgedAtFirstLaunch\r\n\r\n### Description\r\n\r\nHello,\r\n\r\nI'm having a important nuxt ui mono repo project and I'm encountering problems with nuxt/ui since version 6.12.0 of @nuxtjs/tailwindcss. \r\n\r\nI was forced to stay in an old version of nuxt/ui to don't have the problem : \r\n\r\n```\r\n \"pnpm\": {\r\n \"overrides\": {\r\n \"@nuxtjs/tailwindcss\": \"6.11.4\",\r\n \"@nuxt/ui\": \"2.15.2\"\r\n }\r\n },\r\n```\r\n\r\n# What happens ? \r\n\r\nAt first launch, css classes used in nuxt ui components are not correctly taken into account. \r\nIt's necessary to restart a second time the app to have the correct display\r\n\r\nThe bug is present since the version 6.12.0 of nuxtjs/tailwindcss. Maybe some effect of the First Class HMR.\r\n\r\n## Step to reproduce \r\n\r\nThe code at the following link is a minimal reproduction of my project structure : https://github.com/guirak/NuxtUiTailwindContentPurgedAtFirstLaunch\r\n\r\n- From the root project path, launch the following command : \r\n\r\n```bash\r\n# Clear the build \r\n./scripts/CleanProject.bash\r\n\r\n# Install and prepare \r\npnpm i; pnpm run dev:prepare\r\n\r\n# Launch the app\r\ncd apps/mmi-order-front-office\r\npnpm run dev\r\n```\r\n\r\n**The tailwind classes used in apps and modules are correctly displayed but the tailwind classes defined in the nuxt-ui components are not taken into account.**\r\n\r\n\r\n\r\n- Stop and restart the server\r\n\r\n```bash\r\npnpm run dev\r\n```\r\n\r\n**All tailwind classes are correctly taken into account.**\r\n\r\n\r\n\r\n\r\n\r\nThe problem is present too when building the prod version with **pnpm run build**\r\n\r\n\r\nThe problem seems to happens when using nuxt ui in a nuxt module. Please, have you any ideas, to solve this problem. \r\n\r\n\r\nThank you\r\n\r\n\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_",[3190,3193],{"name":3191,"color":3192},"bug","d73a4a",{"name":3194,"color":3195},"upstream","78bddb",2282,"Since Tailwind First Class HMR, nuxt-ui components css classes not taken into account at first launch","2024-10-18T09:16:15Z","https://github.com/nuxt/ui/issues/2282",0.7190992,{"description":3202,"labels":3203,"number":3207,"owner":3143,"repository":3208,"state":3160,"title":3209,"updated_at":3210,"url":3211,"score":3212},"Hi! I've got a misterious problem with nuxt/fonts\nSometimes when deploy I get this kind of error (5 times out of 15 deploys)\n\nThat's not a versel bug, I've tried to run locally `npm run build` about 20 itmes and 5 of them ended up with the same error. \n\nMy configuration:\n\n `\"@nuxt/fonts\": \"0.10.2\"`\n`\"nuxt\": \"3.13.2\",`\n ```export default defineNuxtConfig({\n components: [\n {\n path: \"~/components\",\n global: true,\n },\n ],\n\n devtools: { enabled: false },\n\n css: [\"~/assets/styles/_global.scss\"],\n\n modules: [\n \"@nuxt/fonts\",\n \"nuxt-icons\",\n \"@nuxt/eslint\",\n \"nuxt-quasar-ui\",\n \"@pinia/nuxt\",\n \"@nuxtjs/device\",\n \"@nuxt/image\",\n \"@nuxtjs/seo\",\n \"@nuxtjs/robots\",\n \"nuxt-schema-org\",\n \"nuxt-link-checker\",\n \"@nuxtjs/sitemap\",\n \"nuxt-seo-experiments\",\n \"@nuxtjs/i18n\",\n \"@nuxt/scripts\",\n ],\n\n plugins: [\n \"~/plugins/rest-api.js\",\n { src: \"~/plugins/sentry.ts\", mode: \"client\" },\n { src: \"~/plugins/error-handler.ts\", mode: \"client\" },\n { src: \"~/plugins/image-error.ts\", mode: \"client\" },\n ],\n\n // scripts\n $production: {\n },\n\n $development: {\n },\n\n //SEO\n sitemap: {\n enabled: true,\n urls: async () => await getSiteMap(),\n defaults: {\n changefreq: \"daily\",\n priority: 1,\n lastmod: new Date(),\n },\n },\n robots: {\n enabled: true,\n disallow: [\"/admin\", \"/ui-kit\", \"/profile\", \"/third-party-auth\"],\n allow: \"/\",\n },\n ogImage: {\n enabled: false,\n },\n schemaOrg: {\n enabled: true,\n identity: {\n },\n defaults: false,\n reactive: true,\n },\n seo: {\n automaticDefaults: false,\n fallbackTitle: false,\n },\n linkChecker: {\n enabled: true,\n },\n seoExperiments: {\n enabled: true,\n },\n\n site: {\n\n },\n\n app: {\n head: {\n },\n },\n //SEO\n\n //images\n image: {\n format: [\"webp\", \"png\", \"svg\"],\n },\n //images\n\n //langs\n i18n: {\n legacy: false,\n locales: [\n {\n code: \"en\",\n name: \"English\",\n iso: \"en-US\",\n file: \"en.json\",\n },\n {\n code: \"de\",\n name: \"Deutsch\",\n iso: \"de-DE\",\n file: \"de.json\",\n },\n ],\n messages: {\n en: {},\n },\n defaultLocale: \"en\",\n strategy: \"prefix_except_default\",\n lazy: true,\n langDir: \"locales/\",\n detectBrowserLanguage: {\n useCookie: true,\n cookieKey: \"i18n_redirected\",\n alwaysRedirect: true,\n fallbackLocale: \"en\",\n },\n },\n //langs\n\n //vite\n vite: {\n css: {\n preprocessorOptions: {\n scss: {\n additionalData: '@use \"~/assets/styles/variables/_mixins.scss\" as *;',\n },\n },\n },\n build: {\n sourcemap: true,\n rollupOptions: {\n output: {\n // manualChunks: undefined,\n },\n },\n // cssCodeSplit: false,\n },\n\n plugins: [\n sentryVitePlugin({\n }),\n ],\n },\n //vite\n\n //ui\n quasar: {\n lang: \"ru\",\n plugins: [\"Dialog\", \"Notify\", \"Loading\", \"AppVisibility\"],\n },\n //ui\n\n //env\n runtimeConfig: {\n devtools: {\n enabled: true,\n },\n public: {\n },\n },\n //env\n\n //nitro\n nitro: {\n prerender: {\n // crawlLinks: true,\n routes: [\"/sitemap.xml\", \"/robots.txt\"],\n },\n compressPublicAssets: true,\n },\n //nitro\n\n //prerender\n routeRules: {\n },\n //prerender\n\n router: {\n options: {\n scrollBehaviorType: \"smooth\",\n },\n },\n\n //build\n build: {\n analyze: true,\n },\n\n //build\n\n //hooks\n hooks: {\n // \"build:before\": () => {\n // console.log(\"Running ESLint...\");\n // try {\n // execSync(\"pnpm run lint\", { stdio: \"inherit\" });\n // } catch (error) {\n // console.error(\"ESLint found issues\");\n // }\n // },\n },\n //hooks\n\n //other\n typescript: {\n strict: true,\n },\n ssr: false,\n compatibilityDate: \"2024-11-10\",\n //other\n});\n```\n----------\n```\n.dm-sans {\n font-family: \"DM Sans\", sans-serif;\n font-optical-sizing: auto;\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Cabinet Grotesk\";\n src: url(\"~/assets/fonts/CabinetGrotesk-Bold.ttf\") format(\"truetype\");\n font-weight: 700;\n}\n\n@font-face {\n font-family: \"Cabinet Grotesk\";\n src: url(\"~/assets/fonts/CabinetGrotesk-Regular.ttf\") format(\"truetype\");\n font-weight: 400;\n}\n@font-face {\n font-family: \"DM Sans\";\n src: url(\"~/assets/fonts/DMSans-Bold.ttf\") format(\"truetype\");\n font-weight: 700;\n}\n\n@font-face {\n font-family: \"DM Sans\";\n src: url(\"~/assets/fonts/DMSans-Regular.ttf\") format(\"truetype\");\n font-weight: 400;\n}\n\n.cabinet-grotesk {\n font-family: \"Cabinet Grotesk\", sans-serif;\n font-optical-sizing: auto;\n font-weight: normal;\n font-style: normal;\n}\n```\n\nIs there any one with the similar problem? \n\n",[3204],{"name":3205,"color":3206},"duplicate","cfd3d7",408,"fonts","Family injection fetch failed","2024-12-05T02:26:06Z","https://github.com/nuxt/fonts/issues/408",0.7240555,{"description":3214,"labels":3215,"number":3221,"owner":3143,"repository":3144,"state":3160,"title":3222,"updated_at":3223,"url":3224,"score":3225},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.4.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@3.0.0-alpha.10, nuxt-auth-sanctum@0.5.2, @vueuse/nuxt@11.3.0, nuxt-file-storage@0.2.9\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.14.1592\n\n### Reproduction\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst model = ref(true)\nconst yesNoList = [\n {\n label: '-',\n value: null\n },\n {\n label: 'No',\n value: false\n },\n {\n label: 'Yes',\n value: true\n }\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUSelect v-model=\"model\" :items=\"yesNoList\" class=\"w-24\" />\n\u003C/template>\n```\n\n### Description\n\nOn select item model value converts from `null` to `\"\"`, `true` to `\"true\"` etc.\nhttps://skr.sh/vTBGJYo8U6P",[3216,3217,3220],{"name":3191,"color":3192},{"name":3218,"color":3219},"needs reproduction","CB47CF",{"name":3172,"color":3173},2903,"USelect converts null, true, false and int to string","2025-01-13T14:17:37Z","https://github.com/nuxt/ui/issues/2903",0.73057413,{"description":3180,"labels":3227,"number":3236,"owner":3143,"repository":3143,"state":3160,"title":3183,"updated_at":3237,"url":3238,"score":3239},[3228,3229,3230,3233],{"name":3154,"color":3155},{"name":3157,"color":3158},{"name":3231,"color":3232},"pending triage","E99695",{"name":3234,"color":3235},"⛔️ can be closed","484893",15619,"2023-02-14T08:34:55Z","https://github.com/nuxt/nuxt/issues/15619",0.73131454,{"description":3241,"labels":3242,"number":3245,"owner":3143,"repository":3144,"state":3160,"title":3246,"updated_at":3247,"url":3248,"score":3249},"### 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",[3243,3244],{"name":3140,"color":3141},{"name":3172,"color":3173},3645,"Applying transition-colors to light / dark theme","2025-07-09T10:37:15Z","https://github.com/nuxt/ui/issues/3645",0.73802435,{"description":3251,"labels":3252,"number":3253,"owner":3143,"repository":3254,"state":3160,"title":3255,"updated_at":3256,"url":3257,"score":3258},"https://nuxt.com/docs/guide/directory-structure/nuxt-config\r\n\r\n",[],1555,"nuxt.com","[question] Is this a typo?","2024-04-19T10:30:04Z","https://github.com/nuxt/nuxt.com/issues/1555",0.74018854,["Reactive",3260],{},["Set"],["ShallowReactive",3263],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fJg0MjlWMLpEytIaq7A5ziUgSzvUZavuR1zrjSgEvzg4":-1},"/nuxt/test-utils/734"]