#Introduction

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.

#Explanation

Here I use two features found in the official Filament documentation

• Changing the brand logo
• Dark mode

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

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

#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.