Split Dark/Light Components into Separate Components

[markmead]

Hi 👋

Currently, dark/light mode components occupy the same screen space, as they can be switched using a button. While this setup has been effective for about a year, it necessitated the inclusion of some less-than-ideal code. I'm considering adopting the Tailwind UI approach, along with other component libraries, and displaying them as distinct components on the screen.

Although this change may lead to more scrolling, a toggle could be added to the page to hide/show dark/light components, simplifying management.

Primarily, for the sake of simplicity, I would like to eliminate the troublesome code, as long as it doesn't significantly impact you, the users.

[aditya132p]

Sounds like you're simplifying things by separating dark and light mode components, which should tidy up your code. Adding a toggle for users is a nice touch. The extra scrolling is a small trade-off for a cleaner experience. Keep up the good work! 👍

[markmead]

Seems like the voting has slowed down.

I'll get working on moving the dark components to their own previews.

[markmead]

Had a look, the code isn't too difficult to follow. It's just two toggles that loads in:

• x.html - Light
• x-dark.html - Dark
• x-interactive-html - Light & Alpine JS
• x-dark-interactive.html Dark & Alpine JS

Not too bad really and I feel changing that would be a chunk of work that doesn't result in a better user or developer experience.

Going to leave it for now.