Filament•2y ago

Check if dark mode is enabled

Hello, Is there a way to check whether the dark mode is enabled or not? why I want this, is to set the correct logo color, I have dark and light logo color Thanks

14 Replies

Dan Harrin•2y ago

using the dark: tailwind variant

BKF DevOP•2y ago

Thanks 🙂 But what about blade ? I'm using the brand blade

toeknee•2y ago

You can't do it in a blade, render both images one disabled on dark, one enabled on light

BKF DevOP•2y ago

Could you please show me an example ? 🙂

toeknee•2y ago

It depends where you are showing it, but dark:hidden on the light logo, and dark:visible on the dark logo

Yasser•2y ago

Is your logo an SVG ? do you want to change the fillcolor with CSS ? or do you have 2 logos ? if 2 logos ^ toeknee

                    <img src="./logos/light.svg" alt="light mode logo" class="dark:hidden">
                    <img src="./logos/dark.svg" alt="dark mode logo" class="hidden dark:block">

                    <img src="./logos/light.svg" alt="light mode logo" class="dark:hidden">
                    <img src="./logos/dark.svg" alt="dark mode logo" class="hidden dark:block">

BKF DevOP•2y ago

Yes I have two logos Thanks a lot 🙂

Yasser•2y ago

No problem 🙂

Unknown User•2y ago

Message Not Public

John•2y ago

Define "not working" please. Are both showing all the time? Does it stay light all the time? You could try with something else besides the logo, e.g. <div class="text-blue-500 dark:text-red-500">test</div>, does that work?

Unknown User•2y ago

Message Not Public

Yasser•2y ago

Filament does not use pink as far as I found. Try adding a Div with classes:”h-20 2-20 bg-pink-600”. If you can’t see it and your watcher is running (npm dev) I suggest you go over the documentation on theming until any custom css works. (Aka the div shows up)

Yasser•2y ago

I really suggest you do read the documentation tough:

When the user toggles between dark or light mode, a browser event called dark-mode-toggled is dispatched. You can listen to it:

When the user toggles between dark or light mode, a browser event called dark-mode-toggled is dispatched. You can listen to it:

<div
    x-data="{ mode: 'light' }"
    x-on:dark-mode-toggled.window="mode = $event.detail"
>
    <span x-show="mode === 'light'">
        Light mode
    </span>
 
    <span x-show="mode === 'dark'">
        Dark mode
    </span>
</div>

<div
    x-data="{ mode: 'light' }"
    x-on:dark-mode-toggled.window="mode = $event.detail"
>
    <span x-show="mode === 'light'">
        Light mode
    </span>
 
    <span x-show="mode === 'dark'">
        Dark mode
    </span>
</div>

https://filamentphp.com/docs/2.x/admin/appearance#changing-the-brand-logo It's all there .... Further down you'll be told how you can extend the filament theme with your own css

Filament

Appearance - Admin Panel - Filament

The elegant TALL stack admin panel for Laravel artisans.

Unknown User•2y ago

Message Not Public

Gaming

Programming

Check if dark mode is enabled