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()

brandLogo()

and

darkModeBrandLogo()

darkModeBrandLogo()

methods available
https://filamentphp.com/docs/3.x/panels/themes#adding-a-logo

Themes - Panel Builder - Filament

Jump to solution

Filament•3y ago•

4 replies

nathan269_

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>

Solution

there are

brandLogo()

brandLogo()

and

darkModeBrandLogo()

darkModeBrandLogo()

methods available
https://filamentphp.com/docs/3.x/panels/themes#adding-a-logo

Themes - Panel Builder - Filament

Jump to solution

Light/Dark Mode Logo

Light/Dark Mode Logo

Similar Threads

Similar Threads

Similar Threads