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

Allow setting class or data attribute on body #144

Open
SebHex opened this issue Oct 15, 2022 · 3 comments
Open

Allow setting class or data attribute on body #144

SebHex opened this issue Oct 15, 2022 · 3 comments
Labels
enhancement New feature or request
Milestone
v0.5

Comments

@SebHex
Copy link

SebHex commented Oct 15, 2022 •
edited
Loading

As mentioned in the FAQ:

Can I set the class or data attribute on the body or another element?
Nope. If you have a good reason for supporting this feature, please open an issue.

Using Tailwind's important option with the selector strategy causes a selector issue with next-themes' html class or data attribute.

Example:

// tailwind.config.js

module.exports = {
  // ...
  important: 'html',
  darkMode: 'class'
}

Currently:

⚠ Results in an unusable dark mode selector of html .dark. The .dark selector must be a child of the important selector (html).

<html class="dark">
  <body>
    ...
  </body>
</html>

After proposed feature:

✔ Results in a working dark mode selector of html .dark

<html>
  <body class="dark">
    ...
  </body>
</html>

Further reading

The issue is also mentioned here: tailwindlabs/tailwindcss#9438
@trm217
Copy link
Collaborator

trm217 commented Feb 4, 2023 •
edited
Loading

I think it might be interesting to allow defining on what element the theme-attribute should be applied to. This would allow using next-themes on a more granular level than just for the entire page 🤔
This would make it more complex though, @pacocoursey what are your thoughts on this?

@bryanjtc
Copy link

bryanjtc commented Apr 9, 2023

Any update on this?

@trm217 trm217 self-assigned this Nov 7, 2024
@trm217 trm217 added the enhancement New feature or request label Nov 7, 2024
@trm217 trm217 added this to the v0.5 milestone Nov 7, 2024
@trm217 trm217 removed their assignment Dec 9, 2024
@du33169
Copy link

du33169 commented Dec 11, 2024

Any progress? This is an important feature when trying to use next-themes in web components or browser extensions. They are expected to restrict the theme within their subtrees without modifying the classNames of the global html element.

@du33169 du33169 mentioned this issue Dec 11, 2024
Closed
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
v0.5
Development

No branches or pull requests
4 participants
@trm217 @du33169 @bryanjtc @SebHex