Showing/hiding components based on light or dark mode

Elements Beta Feedback
1

Hey @dan and dev team,

I’m slowly working my way through the documentation and tried out a simple test to see how showing and hiding components based on dark or light mode using the described classes would work.

Using the class dark:hidden to hide components in dark mode works.

Using hidden dark:block to hide components in light mode does not though.

While it does hide the dark mode component, it destroys the setting of the dark mode component. When I use hiddendark:block or anything like ?dark:block it kinda works, but then it shows the other component as well.

Please see the test project for details:

elementsapp://downloadDocument/OntuCyEa9E4w

2

Hmm, I’m unsure what’s causing that issue, we’d need to look into it further…

If you apply the classes to just the typography blocks, does that work for you?

3

Not at all. The classes don’t even show up in the code inspector on the <p> tags. I tried that first :wink:

4

ah-hah! I think we’re not generating the tailwind classes when exporting the site as the elements are not visible, so the exporter assumes they are not needed. So, yeah this looks like a bug :face_with_monocle:

Well dig into it some more here, and make sure it gets fixed!

1 Like
5

Hi @pumpkin,

the issue here is that the Container component is using a display: grid under the hood, so by applying a dark:block class you are “breaking” the display of the Container by changing it’s display type from grid to block.

To fix this issue right now you can add the following classes: hidden dark:grid

We are looking at adding controls for the display type to all components, so this will be more intuitive in the coming weeks :slight_smile: