I created a new nuxt project with nuxtui and the starter looks great. I can see that the primary color is being set in the app.config.ts file as below and changing the value of the primary property helps changing the primary color manually at the time of development.
export default defineAppConfig({
ui: {
primary: 'red',
gray: 'neutral',
}
})
I want the user to be able to dynamically change the primary color during runtime. How do I add this feature. Please help :)
I tried forcing primary in app.config.ts from app.vue but I got the following error
Uncaught SyntaxError: import not found: defineAppConfig
meaning I can't import app.config.ts during runtime
Nuxt ui docs have this feature on their website. Looking at their implementation they change the config. It's reactive
https://nuxt.com/docs/getting-started/configuration#runtimeconfig-vs-appconfig