Jetstream and dark mode
Hi, I'm trying to enable tailwind to respect the FilamentPHP dark/light mode settings instead of the OSes. But when I add this to the tailwind.config.js:
module.exports = {
darkMode: 'class',
// ...
}
It seems to lose the rest of the tailwind styling for the Jetstream components.
Do I need to be adding something else into the module.exports block to get this working as normal?
Or am I missing something?
11 Replies
IIRC you just need to enable darkmode within the filamentphp config
@toeknee_iom Thanks. It is enabled:
'dark_mode' => true,
This enables dark/light mode functionality in the Filament app (via the menu option) but Tailwind seems to be favouring my OS preference - ie, if my OS is set to Dark Mode, it will choose that instead, even if the Filament is set to Light mode. I hope that makes sense.
If I add:
module.exports = {
darkMode: 'class',
// ...
}
Then it works as expected, but all other Tailwind styling appears to be missing.
Strange, mine seems fine but I haven't enabled dark mode
I just tried removing the --dark flag from"
artisan jetstream:install livewire
Then Jetstream is stuck in a middle ground regardless of settings - the background is black, but all the form components have a white background!
I wonder if its looking at another tailwind.config.js that is overriding it?
Ah I resolved it, instead of using module.exports, I put it in the export default {
Doh!
Ahhh!
Wonder if Jetstream and a filament use the same localStorage key and it’s getting over written.
Thanks @awcodes - I will check that and report back.
I'm a bit stuck with getting Jetstream to read the value from jS before it sets the background on the <body>, therefore causing a flicker when the login page loads (as it changes the colour after the body is set).
Yea. That’s an issue with js. When it executes it can cause flickering. So if something is render blocking then that Js can’t execute.
Not quite sure how most sites get around that issue then?
It’s just depend on it being an inline script to set defaults. Inline scripts by default don’t wait on the main thread. Have a look at the base.blade.php in filament to see an example.
Loading order matters too.
Basically, though it’s about mitigation and can’t be guaranteed one way or the other.
There is a livewire method to preview the flicker depending how it’s happening