Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature request]:setTheme multiple classes for next-themes #292

Open
alirezatayebinejad opened this issue May 6, 2024 · 5 comments
Open

[Feature request]:setTheme multiple classes for next-themes #292

alirezatayebinejad opened this issue May 6, 2024 · 5 comments
Labels
request triage

Comments

@alirezatayebinejad
Copy link

What feature would you like to see?

I need to add multiple classes like this:

setTheme(["dark","blueSchema"]) // <html class="dark blueSchema"
setTheme(["light","blueSchema"])

you may say use it like this:

setTheme("dark-blueSchema") // <html class="dark-blueSchema"
setTheme("light-blueSchema")

but components that using tailwindcss they only understant the 'dark' class to apply to and I want also another class for other css variables like when we have dark and blueSchema or dark and redSchema or light and redSchema

if I use dark-redSchema then component will not know it is dark mode as we have no dark class applied
@trm217 trm217 mentioned this issue May 9, 2024
Open
4 tasks
@trm217
Copy link
Collaborator

trm217 commented May 9, 2024 •
edited
Loading

Hey @alirezatayebinejad, the ThemeProvider provides the value property to allow mapping a theme value to be mapped to alternative values that are then applied to either the class attribute or a custom defined data attribute. In the mapping you can provide multiple values to be set, if you provide them in a string and separate multiple values with spaces.

The example below for example will achieve this:

CleanShot 2024-05-09 at 16 19 26@2x

With the above code, if you then run setTheme('dark-blue'), this will set data-theme="dark blue".

This might work for your case.

@trm217 trm217 self-assigned this May 9, 2024
@trm217
Copy link
Collaborator

trm217 commented May 9, 2024

@pacocoursey I noticed we don't prohibit setting the theme to a string value that contains a space. This breaks the code when using attribute="class".
Should we allow this?
If we should, we would have to explicitly handle setting and unsetting multiple class values.

@trm217 trm217 removed their assignment May 9, 2024
@alirezatayebinejad
Copy link
Author

thanks for your answer.
I tried the solution you provided but when I use data-theme="whatever" to set a list of css variables like :root[data-theme="whatever"] this will work but when refreshing the app it has a delay applying css variables to the elements
other than that I also suggest that if you can update the library to handle this situation with attribute="class" it would be a better option. thanks.

@trm217
Copy link
Collaborator

trm217 commented May 10, 2024

I hear you 👍🏻
What's the stack your using?
Do you have a repo to share?

@alirezatayebinejad
Copy link
Author

I hear you 👍🏻 What's the stack your using? Do you have a repo to share?

unfortunatly my repo is private for a client but I am using NextJs 14 with app router, Typescript and tailwindcss with next-ui components.

@Ti-tanium Ti-tanium mentioned this issue Jun 5, 2024
Closed
@trm217 trm217 added the triage label Nov 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
request triage
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Allow mapping to multiple class names Ti-tanium/next-themes
2 participants
@trm217 @alirezatayebinejad