Light/Dark Mode Logo

Hi I have the following for my logo:

<div x-data="{ isdark: localStorage.getItem('theme') === 'dark' }">
    <span x-on:theme-changed.window="isdark = !isdark"></span>
    <img src="{{ asset('/images/logo-alt.svg') }}" alt="Logo" class="h-10 w-auto" x-show="!isdark">
    <img src="{{ asset('/images/vtm-logo-alt.svg') }}" alt="Dark Logo" class="h-10 w-auto" x-show="isdark">
</div>

<div x-data="{ isdark: localStorage.getItem('theme') === 'dark' }">
    <span x-on:theme-changed.window="isdark = !isdark"></span>
    <img src="{{ asset('/images/logo-alt.svg') }}" alt="Logo" class="h-10 w-auto" x-show="!isdark">
    <img src="{{ asset('/images/vtm-logo-alt.svg') }}" alt="Dark Logo" class="h-10 w-auto" x-show="isdark">
</div>

although this works while logged in and switching between light and dark mode, it doesn't work when I sign out from the admin and I'm on the sign in page (that displays our logo). For example, if when signed in i was in dark mode and the light version of our logo is displayed and then I sign out and have a dark themed sign in form, the logo is no longer a light version and switches back to the dark version of the logo.

Solution:

there are brandLogo() and darkModeBrandLogo() methods available https://filamentphp.com/docs/3.x/panels/themes#adding-a-logo...

Themes - Panel Builder - Filament

Jump to solution

2 Replies

Solution

LeandroFerreira•11mo ago

there are brandLogo() and darkModeBrandLogo() methods available https://filamentphp.com/docs/3.x/panels/themes#adding-a-logo

Themes - Panel Builder - Filament

nathan269_OP•11mo ago

brilliant, that works great

Gaming

Programming

Light/Dark Mode Logo