Detect current mode (dark/light) in custom page

[lone hornet]

As the title says, what's the best way to detect the current active mode (dark/light) in a custom Filament page?

I have something like this

<x-filament-panels::page>
    <div x-data="{
        theme: null,
        init() {
            theme = localStorage.getItem('theme') || @js(filament()->getDefaultThemeMode()->value);
            console.log(theme);
        }
    }"
    >
        <div>Current theme is {{$theme}} (is this possible)</div>
        <div x-text:theme></div> {{-- This doesn't work, theme remains null even if console.log(theme) shows the correct value--}}

    </div>
</x-filament-panels::page>

But I wonder if there's a better way.

Thanks

[inner birch]

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

[stiff marsh]

What do you want to do with the information?

[lone hornet]

Haha that's an interesting question 😂
I'm trying to 'migrate' some old code, which imports different css files based on the 'theme'.
I plan to re-write the whole thing in the future, but for the time being, I'm looking at my options for a quick solution.
I'd like to do something like

@if($dark_mode)
    <link href="{{ asset('css/dark-mode.css') }}" rel="stylesheet" />
@else
   ...

I'm open to any suggestions ¯_(ツ)_/¯

[knotty spire]

I’m not sure of a good way to do this. The color mode is handled by js, so there’s no real way to get it on the backend.

[lone hornet]

Yeah I guess I'll have to move all the classes. Hopefully there's an easy way to do this (maybe some sort of media query?) but I suck at css haha

anyway, thank you both for your time 🙇‍♂️

[knotty spire]

I would definitely look into css properties. That way you can have one stylesheet and just change the colors based on a high level class (like on the html element). That’s how tailwind works.

[slim prairie]

You could have an hook that on page load, check the color in use and send it back if different to whats in the session I suppose?

[stiff marsh]

If you really don't want to change much stuff, you could probably conditionally load the CSS file via JS when you detect dark mode. But it would be better to handle this in CSS directly using the .dark class

[lone hornet]

Yeah, what I'm going for right now is transform the existing classes. So from this (example code)

/* light.css */
.foobar {
    border: 1px solid red;
}
/* dark.css */
.foobar {
    border: 1px solid black;
}

to

.foobar {
    @apply border border-red-800 dark:border-black;
}

which is more work but better than adding hacks imho.
Anyway, thank you all for your time, and if you have any suggestions or tips on how to improve this, I'd be happy to hear them