slooffmaster Posts - Answer Overflow

slooffmaster

•Created by slooffmaster on 9/15/2023 in #❓┊help

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.

7 replies

Gaming

Programming