search

nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
3.72k stars 448 forks source link

How to use different color for light and dark themes? #870

Open darklow opened 10 months ago

darklow commented 10 months ago

Description

We're having green color as primary for light theme and indigo for dark theme. Is there a way to use different color for light/dark themes?

I think this and many other problems could be solved by not being too opinionated with things like bg-{color}-500 and dark:bg-{color}-400 and just letting override these whole classes completely. Then we could use for notifications for example: ui: { progress: { background: 'bg-green-800 dark:bg-indigo-500' } } which looks and feels very intuitive, yet not possible.

Thanks.

benjamincanac commented 10 months ago

This is not possible at the moment, but it shouldn't be too complicated to handle as we're using CSS variables for the primary color.

yulafezmesi commented 6 months ago

oh okay, i understand that (but should accept normal color either as tw accept this way)

but still i can't extend blue palette as a primary color. you can check here.

https://stackblitz.com/edit/nuxt-ui-5tjzyz?file=app.config.ts,app.vue,tailwind.config.ts,package.json

yulafezmesi commented 6 months ago

oh nvm, it's working now. thanks!

benjamincanac commented 6 months ago

@yulafezmesi Did you mean to comment on #1198?