Filament•15mo ago

How can I get the trigger of the filament's dark-light toggle button?

Hey, need help. how can I get the trigger of the filament's dark-light toggle button? I've created a custom page. So over there, based on the dark mode I want to update css of a specific div. That's why I need to catch the dark mode toggle.

27 Replies

Thijmen•15mo ago

You can use the .dark tailwind class

AurkoOP•15mo ago

Yes, that's a way to get the current state. But dark mode toggle button can't trigger using this strategy, cat it?

Thijmen•15mo ago

If you do something like .dark .custom-class you can add css in that way So that css will only be visible in darkmode Because that is what you want right? Custom css in darkmode?

Arko•15mo ago

I like your name

Thijmen•15mo ago

Daar heeft die veel aan 😂

AurkoOP•15mo ago

.a{ color: black; } .b{ color: red; } Hello World In here, I want to add class 'a' in light mode, and add class 'b' in dark mode. And this class-add and class-remove will do when the dark mode button triggers. This is my issue actually!

Thijmen•15mo ago

if you do  it should work Make make the css in b important But i think that is the best way to handle this Have a look at the filament classes to see how they handle different style in darkmode

Arko•15mo ago

Jij bent hier voor de support, ik voor de small talk Ieder zo z'n taak

Thijmen•15mo ago

Prima verdeling

AurkoOP•15mo ago

Welcome just tried like this, not working.

Thijmen•15mo ago

Did the css show up in inspect?

Arko•15mo ago

Build the css Class probably isnt compiled by tailwind

Thijmen•15mo ago

Do you have a custom theme? And custom css file should be registered in boot method with FilamentAsset:: i believe

AurkoOP•15mo ago

nope

Thijmen•15mo ago

Then css isnt building

Thijmen•15mo ago

https://filamentphp.com/docs/3.x/support/assets#the-filamentasset-facade

Assets - Core Concepts - Filament

AurkoOP•15mo ago

custom css working on the light mode. actually developed keeping that in mind. but changing has become challenging.

Thijmen•15mo ago

How did you register the css file?

AurkoOP•15mo ago

just below the <x-filament::page> tag of the page, then like this- <link rel="stylesheet" href="{{ asset('css/style.css') }}"> just like how we do in a regular blade page

Thijmen•15mo ago

I don't think you can use the dark class then Because tailwind needs to load that So you should add that file to tailwind too

AurkoOP•15mo ago

how can I then?

Thijmen•15mo ago

If you are going to use custom classes best way is to create a theme

AurkoOP•15mo ago

understood but I want thinking that if I can get the trigger of the dark mode toggle button, that would be easier to manage the classes.

Thijmen•15mo ago

Adding that class to the dark class is way easier then looking at the toggle

   <script>
                const theme = localStorage.getItem('theme')

                if (
                    theme === 'dark' ||
                    (!theme &&
                        window.matchMedia('(prefers-color-scheme: dark)')
                            .matches)
                ) {
                    document.documentElement.classList.add('dark')
                }
            </script>

   <script>
                const theme = localStorage.getItem('theme')

                if (
                    theme === 'dark' ||
                    (!theme &&
                        window.matchMedia('(prefers-color-scheme: dark)')
                            .matches)
                ) {
                    document.documentElement.classList.add('dark')
                }
            </script>

I suggest looking if the document has the dark class But that is exactly what the .dark class does

AurkoOP•15mo ago

yeah, searched and searching. couldn't find that yet. The best if I able to get the id of the color mode toggle button.

Thijmen•15mo ago

Just create a theme and start using the .dark class

AurkoOP•15mo ago

Found solution- window.addEventListener('dark-mode-toggled', (event) => { console.log(event.detail); });

Gaming

Programming

How can I get the trigger of the filament's dark-light toggle button?