Adding support for dark mode logos

Nov 25, 2022
Guilherme Haynes Howe
Admin panel


The Filament admin adds a dark mode option to the admin panel and also to add a custom logo to the panel.

So this trick adds an extra feature for people who want to work with the logo in dark mode as well.


Here I use two features found in the official Filament documentation

Modifying just a few things in the AlpineJS function to work properly for all dark mode use cases.

<img src="{{ asset('/assets/logos/logo.svg') }}" alt="{{ env('APP_NAME') }} Logo" class="h-10"
<img src="{{ asset('/assets/logos/logo-branco.svg') }}" alt="{{ env('APP_NAME') }} Dark Logo" class="h-10"
document.addEventListener('alpine:init', () => {'filamentLogo', () => ({
init() {
mode: 'light',
toggle() {
this.mode = document.documentElement.classList.contains('dark') ? 'dark' : 'light'
isDarkMode() {
return this.mode === 'dark'
isLightMode() {
return this.mode === 'light'

Script Tag

Let's start with the script tag part.

We added a data to Alpine from its initialization event called filamentLogo.

Inside it we have the mode property which has the default value light, and a function called toggle() responsible for changing the state of the mode property.

We also call the toggle() function at boot time because when we boot the system and the Filament Admin is set to "Dark" the correct logo will not be displayed. So this init() function is responsible for setting the correct state in the mode property

Div`s Tag

Now moving on to the div tags, responsible for displaying the correct logo, we assign the x-data prop of alpine the name of the data that we created in the Script explained above, in this case filamentLogo. With this we can have access to all the props and functions created previously.

We also use the x-on property of AlpineJS to get the default style change of Fila, which is the dark-mode-toggled.window action, which is triggered every time the user changes the dark mode in the menu user interface, thus calling our toggle function.

After that we put the '< img>' tags with the x-show props checking what type of styling we are using.


Hi, I tried all the solutions I could find but this is the only one that works


Guilherme Haynes Howe

Hi, thank you for your comment and I'm glad I could help.

Guilherme Haynes Howe

This example works but it has some problems.

One of them that I have noticed is that it loads the two images and only after that it puts the hidden in each one.

I believe this is a problem because of spending a few more KB on requests and loading each page and also if there is a JS error, it will display the two logos one below the other.

I haven't come up with a solution for this yet, but I believe this would be a good solution: