#Introduction

A solution is available to use dark mode with brands and Alpine.js here.

But another solution is to use only Tailwind CSS with dark: prefix to show or hide brand logo.

#Explanations

Just change brand logo like documentation explain it and enable dark mode.

And change view resources/views/vendor/filament/components/brand.blade.php like this:

<div>
  <img
    src="{{ asset('/images/logo-inline.svg') }}"
    alt="Icon"
    class="relative z-20 block h-10 w-full object-contain dark:hidden"
  />
  <img
    src="{{ asset('/images/logo-inline-dark.svg') }}"
    alt="Icon"
    class="relative z-20 hidden h-10 w-full object-contain dark:block"
  />
</div>

It works with brand icon and footer too:

resources/views/vendor/filament/components/brand-icon.blade.php

<div>
  <img
    src="{{ asset('/images/logo.svg') }}"
    alt="Icon"
    class="h-full w-full object-contain dark:hidden"
  />
  <img
    src="{{ asset('/images/logo-dark.svg') }}"
    alt="Icon"
    class="hidden h-full w-full object-contain dark:block"
  />
</div>

resources/views/vendor/filament/components/footer.blade.php

{{ \Filament\Facades\Filament::renderHook('footer.before') }}
 
<div class="filament-footer flex items-center justify-center">
  {{ \Filament\Facades\Filament::renderHook('footer.start') }}
 
  @if (config('filament.layout.footer.should_show_logo'))
    <a
      href="https://filamentphp.com"
      target="_blank"
      rel="noopener noreferrer"
      class="text-gray-300 transition hover:text-primary-500"
    >
      <img
        src="{{ asset('/images/logo.svg') }}"
        alt="Icon"
        class="h-24 dark:hidden"
      >
      <img
        src="{{ asset('/images/logo-dark.svg') }}"
        alt="Icon"
        class="hidden h-24 dark:block"
      >
    </a>
  @endif
 
  {{ \Filament\Facades\Filament::renderHook('footer.end') }}
</div>
 
{{ \Filament\Facades\Filament::renderHook('footer.after') }}