Filament•3mo ago

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'),
);

->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 --}}

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'),
        );

        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

2 Replies

Solution

LeandroFerreira•3mo ago

remove style="display:flex;"

Albert Lens•3mo ago

It works! Thank you very much.

Gaming

Programming

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