Is it possible to force darkmode layout on component ?

[joffreypersia]

Hi,

I am using flux UI on my webapp, but also on my landing page which has not darkmode nor lightmode. It is a "mix" with sections in bg light, and some in bg dark.

I am trying to add a flux button in a dark section but I would like to have the darkmode version of the button. Usually with some tailwindcss components, we can use data-dark or something like this. Is it possible with flux ?

Thank you

[jeffchown]

@joffreypersia Have you tried a wrapping <div> around the component markup that you wish to display in 'dark mode'? e.g.:

<div class="dark">
    ...
</div>

The Tailwind CSS docs indicate this should work:

...they will be applied whenever the dark class is present earlier in the HTML tree.

[igmltd]

@joffreypersia Have you tried a wrapping <div> around the component markup that you wish to display in 'dark mode'? e.g.:

<div class="dark">
    ...
</div>

The Tailwind CSS docs indicate this should work:

...they will be applied whenever the dark class is present earlier in the HTML tree.

I was using this, but it stopped working with the introduction of dark mode switcher in flux - as it automatically adds a dark class to the body making all components dark.

the way round it was to define a new selector class other than .dark , see below for a better explanation:

#913

[joffreypersia]

It worked :)
Even for my app where I set the darkmode to selector, following the setup suggested by fluxUI documentation.

Thank you !

[jeffchown]

You're welcome, @joffreypersia !