# Showing/hiding components based on light or dark mode **URL:** \ **Category:** RapidWeaver Elements\ **Created:** [January 10, 2025, 9:10pm UTC](https://forums.realmacsoftware.com/t/showing-hiding-components-based-on-light-or-dark-mode/45883 "2025-01-10T21:10:46Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![pumpkin](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@pumpkin](https://forums.realmacsoftware.com/u/pumpkin)\ **Post date:** [January 10, 2025, 9:10pm UTC](https://forums.realmacsoftware.com/t/showing-hiding-components-based-on-light-or-dark-mode/45883/1 "2025-01-10T21:10:46Z")
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](elementsapp://downloadDocument/OntuCyEa9E4w) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [January 10, 2025, 9:39pm UTC](https://forums.realmacsoftware.com/t/showing-hiding-components-based-on-light-or-dark-mode/45883/2 "2025-01-10T21:39:16Z")
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? ---
**Author:** ![pumpkin](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@pumpkin](https://forums.realmacsoftware.com/u/pumpkin)\ **Post date:** [January 10, 2025, 10:21pm UTC](https://forums.realmacsoftware.com/t/showing-hiding-components-based-on-light-or-dark-mode/45883/3 "2025-01-10T22:21:05Z")
Not at all. The classes don’t even show up in the code inspector on the `

` tags. I tried that first 😉 ---

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [January 10, 2025, 10:57pm UTC](https://forums.realmacsoftware.com/t/showing-hiding-components-based-on-light-or-dark-mode/45883/4 "2025-01-10T22:57:01Z")
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 🧐 Well dig into it some more here, and make sure it gets fixed! ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [January 13, 2025, 6:19pm UTC](https://forums.realmacsoftware.com/t/showing-hiding-components-based-on-light-or-dark-mode/45883/5 "2025-01-13T18:19:25Z")
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 🙂 ---
**Author:** ![pumpkin](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@pumpkin](https://forums.realmacsoftware.com/u/pumpkin)\ **Post date:** [January 13, 2025, 11:46pm UTC](https://forums.realmacsoftware.com/t/showing-hiding-components-based-on-light-or-dark-mode/45883/6 "2025-01-13T23:46:02Z")
Thanks @ben, that works (for now) 😉