Detect current mode (dark/light) in custom page

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>

<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

Solution

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

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

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

.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

Jump to solution

Detect current mode (dark/light) in custom page

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>

<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

Solution

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

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

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

.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

Jump to solution

Detect current mode (dark/light) in custom page

Similar Threads

Detect current mode (dark/light) in custom page

Similar Threads

Similar Threads

Similar Threads