Filament•15mo ago

Dark/Light mode logo

I'm looking to use two different logos, one for dark mode and another for light mode. I'm new to Filament and AlpineJS (come from the classic JQuery and Bootstrap world) but I've managed to put the following together:

<div
    x-data="{ isdark: !document.documentElement.classList.contains('dark') }">
    <span
        x-on:theme-changed.window="isdark = !isdark"></span>
    <img src="{{ asset('images/artofwifi-logo-for-light-theme.png') }}" alt="Logo" class="h-10 w-auto"
         x-show="!isdark">

    <img src="{{ asset('images/artofwifi-logo-for-dark-theme.png') }}" alt="Dark Logo" class="h-10 w-auto"
         x-show="isdark">
</div>

<div
    x-data="{ isdark: !document.documentElement.classList.contains('dark') }">
    <span
        x-on:theme-changed.window="isdark = !isdark"></span>
    <img src="{{ asset('images/artofwifi-logo-for-light-theme.png') }}" alt="Logo" class="h-10 w-auto"
         x-show="!isdark">

    <img src="{{ asset('images/artofwifi-logo-for-dark-theme.png') }}" alt="Dark Logo" class="h-10 w-auto"
         x-show="isdark">
</div>

One thing I don't understand is why I need to use the inverse of isdark when getting the current theme from the classlist. The above code works perfectly fine, just wish to understand exactly how this is working.

4 Replies

awcodes•15mo ago

You don’t need to do all this. Since dark mode is class based you can show and hide each image with classes. ‘block dark:hidden’ for light mode. ‘hidden dark:block’ for dark mode. You would need to use a custom theme for filament to take this approach though.

InSeriousNeedOfHelp•15mo ago

We need to publish a custom theme for the dark: selector to work? Why?

awcodes•15mo ago

Because filament doesn’t use dark:hidden anywhere so it won’t exist in the purged tailwind css. So you need a custom theme so it can purge against files in your apps code base. But if you don’t want to do that, then your approach is perfectly fine.

slooffmasterOP•15mo ago

OK, understood. I'd initially played around with those classes without success. I now understand why.

Gaming

Programming

Dark/Light mode logo