Multicolor theme custom switch

[Cadeniuc]

trafficstars

Description

Hi guys, How can I add multicolor theme like on nuxt ui website ?

[noook]

You can find the relevant components in the documentation directory, under components/color-picker.

[Cadeniuc]

You can find the relevant components in the documentation directory, under components/color-picker.

@noook Thanks for fast answer! I saw this, but how can I change the global variables on click ? Because I'm getting color value(hex), but don't understand how apply it globally😕

[noook]

Nuxt UI relies on the config in your app.config to determine your primary and your gray color. The ColorPicker component mutates the app.config so that all the Nuxt UI's components can read this new value, and use this color to style your components accordingly.

[Cadeniuc]

This is for nuxt ui components. But what about custom components ?

[noook]

Nuxt UI exposes the useUI composable. This composable reads your app.config, and will perform a merge, or an override depending on the strategy you chose. This is for the underlying mechanism.

I think you could eventually augment the app config, and provide your own components config in it to customize them.

Now, for the actual implementation: a simple component is the UBadge. I'll let you have a look at the implementation, but the most relevant piece of code is the setup function. It reads your app.config given your component's key, then it computes the classes to give to your badge.

Now, the final magic: colors.ts plugin:

It defines CSS variables for primary and gray. Your components, when having the "primary" color set will be styled given the currently set CSS variables.

This is what I understood by navigating in the basecode in approximatively 15 minutes, what I said might not be 100% accurate, but you can inspire yourself from the codebase.

[moshetanzer]

@Cadeniuc are you sorted?

[hamonCordova]

@noook how can i persist the colors? When the page refreshes it set the primary and gray color as defined on app.config.ts

[noook]

You can check how the ColorPicker applies the new value. Once it is set in your storage (localStorage, cookie, or sessionStorage) you just need to make sure this data is read on page start.

https://github.com/nuxt/ui/blob/c75c0152cea7dab8b8888bb0651b72cd85577b19/docs/components/color-picker/ColorPicker.vue#L34-L43

On the documentation it is done here: https://github.com/nuxt/ui/blob/c75c0152cea7dab8b8888bb0651b72cd85577b19/docs/plugins/ui.ts#L31