Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug]: `dark:` modifier doesn't seem to work with `Dialog`s

See original GitHub issue

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.2.0

What browser are you using?

Chrome

Reproduction repository

https://github.com/leggettc18/devmarks-frontend-web/

Describe your issue

Pretty self explanatory with the title. Basically I have a Dialog, a div within that where the background color is specified, and a dark: version as well. Only the light one seems to get added in. It actually does seem to work if I remove the bg-white class while the rest of my site is in dark mode, but then the light version looks weird.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5

github_iconTop GitHub Comments

4reactions
RobinMalfaitcommented, May 28, 2021

Hey! Thank you for your bug report! Much appreciated! 🙏

Headless UI itself doesn’t care about which classes you apply and which you don’t. If you are experiencing issues with missing classes than make sure to include all the paths, where components with certain classNames live, to your purge config.

Additionally, I wanted to look at your reproduction repo but I have to sign up / sign in, so can’t help you with that one. That said, there is one thing you have to keep in mind with the Dialog is that it renders in a portal right in the <body> tag. This means that if you are using a dark class, that you have to add it to the html or body tag so that all children can use this information to render the dark/light mode.

If you don’t like that approach, then you could look into using context for this. Here is a similar issue with React, but the same logic applies: https://github.com/tailwindlabs/headlessui/issues/280#issuecomment-828376470

0reactions
atif0075commented, Dec 14, 2022

Another update, I have managed to find a workaround by applying the different classes via a :class="" attribute that applies the proper bg and text color classes according to the boolean value I store in my state management for whether or not the site is in dark mode. Still a bit puzzled as to why this was necessary. I also needed to do this for the DialogTitle component as well.

This is because the headless UI dialog didn’t fall under vue pre-defined <div id="app"></div> . It create its own HTML after id="app" with id name headlessui-portal-root. So the basic solution is to store your darkMode boolean inside store and use with :class attribute on your Dialog component like below

  <TransitionRoot
      :class="store.darkMode ? 'dark' : ''"
      // [ .......]
    </TransitionRoot>

After this you can use tailwind dark classe without :class

Read more comments on GitHub >

github_iconTop Results From Across the Web

Dark mode view modifiers no longer working #2127 - GitHub
Description. Dark mode no longer works with view modifiers. Regardless of device scheme, the view background colors will be "light".
Read more >
Modifier - Android Developers
Order is significant; modifier elements that appear first will be applied first. ... Adds padding so that the content doesn't enter insets space....
Read more >
AnimatedVisibility Doesn't Expand Height In Dialog in Jetpack ...
I tried animateContentSize() on Column and Card but it didn't work. And checked similar questions on StackOverflow but didn't found any useful ...
Read more >
The Boolean modifier is not working - Blender Stack Exchange
If a boolean doesn't work it's probably because something in your geometry isn't making sense (even if it looks and renders fine).
Read more >
10 Problems (and Solutions) for Blender Newbies - dummies
A notorious black stripe appears on models. Often when modeling, you run into a ... Edge loop select doesn't work. The issue of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

[Bug]: TypeError: React.createContext is not a function

Next page

[Bug]: Popover not working inside Web Component