How to implement multi colors switcher like the color switcher in your demo

[pxdev]

How to implement multi colors switcher like the color switcher in your demo, i tried to make the ui primary color dynamic and change it from the store but it dose not work

[benjamincanac]

You can look at this component: https://github.com/nuxtlabs/ui/blob/dev/docs/components/color-picker/ColorPicker.vue and this plugin: https://github.com/nuxtlabs/ui/blob/dev/docs/plugins/ui.ts

[ddahan]

Nice, very interesting code. Could it be a NuxtLabs UI component by itself (maybe without implementing the local storage part to keep it simple)? I mean if someone makes a PR with it, is it relevant or not really?

[benjamincanac]

Do you mean the ColorPicker or the whole system based on the CSS variables? I don't really see a case where you would need this besides in this documentation 🤔

[ddahan]

@benjamincanac I mean a way for any Nuxt UI user to inject this component, and allow its visitors to change primary colors. So I guess it would be the whole system, except I'm not sure if it has to include local storage too.

[benjamincanac]

Closing this as it's a bit to specific to be included as a component, also the code to do this is available in the docs.

[GalacticHypernova]

If I may add my 2 cents, I think having a built-in solution for this would be ideal. Technically speaking, "specificity" of a component seems like quite an odd metric as any component can be argued to be too specific for its purpose (tabs, for example, could be argued to be too specific given that they're "only" for tabs). However, the benefit would be significant and could save some trouble for newcomers and new developers that are still exploring it.