Filament•17mo 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•17mo ago

using the dark: tailwind variant

BKF Dev•17mo ago

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

toeknee•17mo ago

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

BKF Dev•17mo ago

Could you please show me an example ? 🙂

toeknee•17mo ago

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

Yasser•17mo 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 Dev•17mo ago

Yes I have two logos Thanks a lot 🙂

Yasser•17mo ago

No problem 🙂

Unknown User•16mo ago

Message Not Public

John•16mo 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•16mo ago

Message Not Public

Yasser•16mo 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•16mo 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•16mo ago

Message Not Public

Gaming

Programming

Check if dark mode is enabled