F
Filament•2mo ago
Arnold Schwarzenegger

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) ```css /* light.css */ .foobar { border: 1px solid red;...
Jump to solution
8 Replies
Dennis Koch
Dennis Koch•2mo ago
What do you want to do with the information?
Arnold Schwarzenegger
Arnold SchwarzeneggerOP•2mo ago
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
   ...
@if($dark_mode)
    <link href="{{ asset('css/dark-mode.css') }}" rel="stylesheet" />
@else
   ...
I'm open to any suggestions ¯\_(ツ)_/¯
awcodes
awcodes•2mo ago
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.
Arnold Schwarzenegger
Arnold SchwarzeneggerOP•2mo ago
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 🙇‍♂️
awcodes
awcodes•2mo ago
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.
toeknee
toeknee•2mo ago
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?
Dennis Koch
Dennis Koch•2mo ago
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
Solution
Arnold Schwarzenegger
Arnold Schwarzenegger•2mo ago
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;
}
to 
.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

Did you find this page helpful?