© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•3y ago•
6 replies
slooffmaster

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
isdark
when getting the current theme from the
classlist
classlist
. The above code works perfectly fine, just wish to understand exactly how this is working.
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources

Similar Threads

Was this page helpful?
Recent Announcements

Similar Threads

Light/Dark Mode Logo
FilamentFFilament / ❓┊help
3y ago
multiple logo for dark and light mode
FilamentFFilament / ❓┊help
3y ago
Dark mode logo
FilamentFFilament / ❓┊help
3y ago
Dark-mode/Light-mode
FilamentFFilament / ❓┊help
3y ago