[QUESTION] How do I switch to Light mode?

[arthur-es]

I just installed and it came with the dark mode by default. I did not find in the docs a way to set Light mode as default mode.

[OmegaHawkeye]

It's configured with tailwindcss dark mode settting on "auto" which uses the system prefered theme. To change this u either change ur system prefered theme by setting ur os/browser theme to light/dark or u set it on the html tag.

See Tailwindcss Dark Mode Docs

Theyre is a handy example on the bottom of the page on how to read it from localStorage and afterwards setting it on the html tag.

Hope this helps

[dmcleish91]

@OmegaHawkeye I'm still not clear on how to configure this to use light mode by default. Can you provide an example? I've looked over the tailwind docs.

[OmegaHawkeye]

That was my mistake. There is no way u can configure it from dev perspective to use light mode by default. It will always use the users system preferred theme.

I already asked to change this here: #10 and he made an understandable point to not change it even tho it would be nice

[TimMikeladze]

I ran into a similar requirement and ended up forking this package to add this functionality.

If anyone is interested they can get it on npm via @tmikeladze/react-cmdk@1.3.14 or view exact changes here: 2174a10

1. In tailwind config I changed the dark mode setting from media to class
2. Added a prop called commandPaletteContentClassName
3. Pass dark class through props when consuming this package.

<CommandPalette
        commandPaletteContentClassName={mode === `dark` ? `dark` : null}
        onChangeSearch={setSearch}
        onChangeOpen={props.setOpen}
        search={search}
        isOpen={props.open}
        page={page}
>

@albingroen In the future it would be really awesome to have this be implemented as a feature within the package.

I don't know how "hacky" my solution is it, but it works for the time being. If there is a more elegant way of doing this I'd love some more info on it.

[zaini]

Any updates on this?

Features list includes ✓ Dark & light mode but it seems like this isn't really configurable, it's just based on the users system preferences? So we can't enforce light/dark mode?

Seems like CSS might be the only solution then. Would be great if this was actually toggleable via a prop like theme as light | dark | auto

[albingroen]

It can only be automatic on the users system appearance because of how Tailwind CSS works unforatunely

[aguilarguisado]

Hi @albingroen ,

Please let me highlight how interesting it is to be able to force a dark/light mode from code. Some apps won't support different modes, so the component looks weird when the app is in one mode and the users' host are in the other.

Can you confirm from the best of your knowledge if the hack of @TimMikeladze is good enough? Sadly, having or not this side effect is a ok-ko precondition for me to be allowed to use this library.

Thanks!

[TimMikeladze]

Hi @albingroen ,

Please let me highlight how interesting it is to be able to force a dark/light mode from code. Some apps won't support different modes, so the component looks weird when the app is in one mode and the users' host are in the other.

Can you confirm from the best of your knowledge if the hack of @TimMikeladze is good enough? Sadly, having or not this side effect is a ok-ko precondition for me to be allowed to use this library.

Thanks!

@aguilarguisado if it helps, I've been using my fork of the package for almost a year now in production with zero issues. After reflecting upon my solution over the last year, I think my approach isn't a hack at all and the right way to go about implementing this.

[aguilarguisado]

Hi @albingroen ,
Please let me highlight how interesting it is to be able to force a dark/light mode from code. Some apps won't support different modes, so the component looks weird when the app is in one mode and the users' host are in the other.
Can you confirm from the best of your knowledge if the hack of @TimMikeladze is good enough? Sadly, having or not this side effect is a ok-ko precondition for me to be allowed to use this library.
Thanks!

@aguilarguisado if it helps, I've been using my fork of the package for almost a year now in production with zero issues. After reflecting upon my solution over the last year, I think my approach isn't a hack at all and the right way to go about implementing this.

Thank you @TimMikeladze.

I was asking just because you seemed to be unsure about how hacky it was by the time you posted your reply. Good to know it is an option 😀

[ckpearson]

We're not using tailwind on our project (instead using Chakra) and this feels like a bad default to have out of the box given it's intended to be integrated into other projects.

My recommendation would be to switch over to using the selector mode (https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection) and let the consumer of the package handle how they want to manage this.