FilamentF
Filament•2y ago
Albert Lens

RenderHook css problem in login page (dark / light theme)

Hello.
I am using a PanelsRenderHook::TOPBAR_START to render a copyright view in my application and it is working fine using CSS for dark or light mode.

->renderHook(
    PanelsRenderHook::TOPBAR_START,
    fn(): View => view('filament.settings.custom-footer'),
);

Working fine with this CSS to know whether it is dark or light mode:
My CSS:
div class="hidden dark:flex">
            <a href="https://robustdatasolutions.com" target="_blank" ><img src="/img/robust_invert.png" alt="" style="align:center; width:25px;height:25px;margin-right:5px"></a>
            <a href="https://robustdatasolutions.com" target="_blank" class="textoCopyRightLogin"> <strong>Robust Expedientes</strong>  &copy; {{ date('Y') }}  Robust Data Solutions</a>
        </div>
        {{-- Theme is dark --}}

div class="flex dark:hidden" style="display:flex; align-items:left;justify-content: center;">
                <a href="https://robustdatasolutions.com" target="_blank" ><img src="/img/robust.png" alt="" style="align:center; width:25px;margin-right:5px;"></a>
                <a href="https://robustdatasolutions.com" target="_blank" class="textoCopyRightLogin"><strong>Robust Expedientes</strong>  &copy; {{ date('Y') }}  Robust Data Solutions</a>
        </div>
            {{-- Theme is light --}}


The problem is that for the login page I am using:
        FilamentView::registerRenderHook(
            PanelsRenderHook::AUTH_LOGIN_FORM_AFTER,
            fn (): View => view('filament.settings.custom-footer-login'),
        );

and the same CSS which works inside the application is NOT WORKING FINE in the login page. It is able to know when theme is dark, but it shows both logos (dark mode and light mode ones) when theme is light.

Any ideas, please?
Solution
remove style="display:flex;"
Jump to solution
Was this page helpful?