\n\nthis is how the borders are styled in my case, no `--ui-border`\n\n\u003Cimg width=\"542\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/6bb3138e-36e5-46cb-9930-92b608811fe0\" />\n\n\u003Cimg width=\"515\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/16ad3bc6-a8a9-4391-a0c5-542ff3f58121\" />\n\nplease help, \n\nthank you\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3051,3054,3057],{"name":3052,"color":3053},"bug","d73a4a",{"name":3055,"color":3056},"v3","49DCB8",{"name":3058,"color":3059},"triage","ffffff",4218,"Can't set the default border color","2025-05-26T08:34:37Z","https://github.com/nuxt/ui/issues/4218",0.72280383,{"labels":3066,"number":3073,"owner":3027,"repository":3027,"state":3029,"title":3074,"updated_at":3075,"url":3076,"score":3077},[3067,3070],{"name":3068,"color":3069},"enhancement","8DEF37",{"name":3071,"color":3072},"3.x","29bc7f",13690,"Sass Variables not available in pages / layouts / components","2024-03-21T00:46:57Z","https://github.com/nuxt/nuxt/issues/13690",0.7228904,{"description":3079,"labels":3080,"number":3085,"owner":3027,"repository":3027,"state":3029,"title":3086,"updated_at":3087,"url":3088,"score":3089},"### What problem does this feature solve?\n\nThis feature would be a way to set / override a Sass variable for a page and all its child components?\n\nYou could use this as following:\nSet a global $font_color variable in your main.scss file which will be globally available.\nThen on one specific page you can set the $font_color variable for every child component in the page, thus making that pages easily theme-able\n\n### What does the proposed changes look like?\n\nIt will make specific pages in Nuxt more \"theme-able\" without having to overwrite the Sass.\n\nglobal variables\n\n\noverwritten variables\n\n\n\n\n\u003C!--cmty-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8076\">#c8076\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3081,3082],{"name":3068,"color":3069},{"name":3083,"color":3084},"2.x","d4c5f9",4262,"Sass variables that \"cascade\" down to it's child components","2023-01-22T15:50:48Z","https://github.com/nuxt/nuxt/issues/4262",0.725037,{"description":3091,"labels":3092,"number":3094,"owner":3027,"repository":3027,"state":3029,"title":3095,"updated_at":3096,"url":3097,"score":3098},"Hi guys, I'm trying to use uikit inside nuxt, based in this [example](https://github.com/nuxt/nuxt.js/tree/dev/examples/uikit)\r\n\r\nnow, I want to use sass because I require change some uikit variables for custom personalization, in the example he's using plain css...\r\n\r\nfollowing the uikit instructions\r\n```\r\n// 1. Your custom variables and variable overwrites.\r\n$global-link-color: #DA7D02;\r\n\r\n// 2. Import default variables and available mixins.\r\n@import \"uikit/src/scss/variables-theme.scss\";\r\n@import \"uikit/src/scss/mixins-theme.scss\";\r\n\r\n// 3. Your custom mixin overwrites.\r\n@mixin hook-card() { color: #000; }\r\n\r\n// 4. Import UIkit.\r\n@import \"uikit/src/scss/uikit-theme.scss\";\r\n```\r\n\r\ninside my nuxt config I add the files path\r\n```js\r\n css: [\r\n '~/assets/main-variables.scss',\r\n 'uikit/src/scss/variables-theme.scss',\r\n 'uikit/src/scss/mixins-theme.scss',\r\n '~/assets/main-theme.scss',\r\n 'uikit/src/scss/uikit-theme.scss',\r\n\r\n ]\r\n```\r\n\r\nand I create the file _main-variables_ and _main-theme_ inside the assets folder, my idea is that if the css array is loaded in order must works ok (or not???)\r\n\r\nrunning the code I get this\r\n```shell\r\nERROR Failed to compile with 1 errors 11:01:10 a. m.\r\n\r\n error in ./node_modules/uikit/src/scss/uikit-theme.scss\r\n\r\nModule build failed: \r\n$base-code-background: $global-muted-background !default;\r\n ^\r\n Undefined variable: \"$global-muted-background\".\r\n in /home/me/Descargas/proj/js/nuxt/uikitest2/node_modules/uikit/src/scss/theme/base.scss (line 16, column 50)\r\n\r\n @ ./node_modules/uikit/src/scss/uikit-theme.scss 4:14-176 13:3-17:5 14:22-184\r\n @ ./.nuxt/App.js\r\n @ ./.nuxt/index.js\r\n @ ./.nuxt/client.js\r\n @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js\r\n\r\n nuxt: Call close hooks (2) +0ms\r\n nuxt: server closed +2ms\r\n\r\n```\r\n\r\nnow, it said that $global-muted-background is not defined when it load uikit-theme.scss...but doing a search, I found that this variable is defined in \r\n\r\n```\r\nnode_modules/uikit/src/scss/variables-theme.scss:$global-muted-background: #f8f8f8 !default;\r\n```\r\n\r\nnow, seems that the loader isn't loading variable-themes.scss and them main-theme.scss but it doing the loader in random order, is it ok???\r\n\r\nI suppose that I can create a file in assets and load the uikit themes and variables without problem but I've the doubt if I'm doing something wrong or it's the expected behaviour...\r\n\r\nthank you so much, I really love nuxtjs...\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7741\">#c7741\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3093],{"name":3083,"color":3084},3889,"are css files inside nuxt config loaded in order???","2023-01-18T16:26:42Z","https://github.com/nuxt/nuxt/issues/3889",0.7250671,{"description":3100,"labels":3101,"number":3094,"owner":3027,"repository":3028,"state":3029,"title":3104,"updated_at":3105,"url":3106,"score":3098},"### Description\n\nI have a UNavigationMenu in vertical orientation in a sidebar. I would like to always have the current path open from the current route\n\ndoing something like: defaultOpen: route.path.includes('/xxx')\n\nresults in a very laggy experience... is there any other way to achieve this?",[3102,3103],{"name":3019,"color":3020},{"name":3055,"color":3056},"UNavigationMenu in Sidebar: Default open current route","2025-04-14T14:34:07Z","https://github.com/nuxt/ui/issues/3889",{"labels":3108,"number":3110,"owner":3027,"repository":3027,"state":3029,"title":3111,"updated_at":3112,"url":3113,"score":3114},[3109],{"name":3083,"color":3084},4023,"How to preserve the css variable on finall css","2023-01-18T16:28:53Z","https://github.com/nuxt/nuxt/issues/4023",0.72577685,{"description":3116,"labels":3117,"number":3120,"owner":3027,"repository":3028,"state":3029,"title":3121,"updated_at":3122,"url":3123,"score":3124},"### 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",[3118,3119],{"name":3019,"color":3020},{"name":3055,"color":3056},3645,"Applying transition-colors to light / dark theme","2025-07-09T10:37:15Z","https://github.com/nuxt/ui/issues/3645",0.7294785,{"description":3126,"labels":3127,"number":3129,"owner":3027,"repository":3027,"state":3029,"title":3130,"updated_at":3131,"url":3132,"score":3133},"follow up of #2342 \r\nIn global.css:\r\n```\r\n:root {\r\n\t--primary: green;\r\n\t--secondary: blue;\r\n}\r\n.primary {\r\n\tcolor: var(--primary);\r\n}\r\n.secondary {\r\n\tcolor: var(--secondary);\r\n}\r\n.btn-primary {\r\n\tbackground-color: var(--primary);\r\n}\r\n```\r\nIn /pages/dummy.vue\r\n```\r\n\u003Ctemplate>\r\n\t\u003Csection>\r\n\t\t\u003Cp class=\"primary\">primary\u003C/p>\r\n \u003Cbutton class=\"btn btn-primary\">primary button\u003C/button>\r\n\t\t\u003Cp class=\"secondary\">secondary\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('--primary', 'yellow')\r\n\t\t\tdocument.documentElement.style.setProperty('--secondary', 'red')\r\n\t\t})\r\n\t}\r\n}\r\n\u003C/script>\r\n```\r\nExpect primary text and button to be yellow and secondary text to be red\r\n\r\nResult:\r\n\r\n\r\nOne of my older project that wan't using Nuxt starter template is able to update CSS variable dynamically: https://horacekeung.github.io/option\r\nIf you change the theme colour of the site, you will see this in dev tool:\r\n\r\nCSS variable --color and --dark are updated as shown.\r\n\r\nMy understanding is that in the Nuxt starter template, CSS is preprocessed hence variables such as --primary and --secondary are no longer a variable.\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/c2051\">#c2051\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3128],{"name":3083,"color":3084},2355,"Unable to update CSS variable (Follow up of #2342)","2023-01-18T15:55:10Z","https://github.com/nuxt/nuxt/issues/2355",0.73147565,["Reactive",3135],{},["Set"],["ShallowReactive",3138],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fMBG6v5Di_-dNJVXN61pqWTS0kVa8ukbhrp7hlFnz2Ro":-1},"/nuxt/ui/4211"]