Filament•2d ago

How to Determine if the dashboard is using dark or light mode in Filament?

It is possible to Determine if the dashboard is using dark or light mode in Filament? TYIA.

9 Replies

EMMAN•2d ago

up help guys please 😦

Check the css classes on the html tag and/or localstorage.getItem('theme')

EMMAN•2d ago

not working

I dont know if thats the correct name, check in your browser

EMMAN•2d ago

is there any other way?

That I know, no. It's all css controlled by the dark class in the html tag

You can also try; document.documentElement.classList.contains('dark')

Nobody can't help if you don't share what you did

If you are using alpine to get this, you could do

<div x-data="{ currentTheme: document.querySelector('html').matches('.dark') ? 'dark' : 'light' }">
    <span x-text="currentTheme"></span>
</div>

<div x-data="{ currentTheme: document.querySelector('html').matches('.dark') ? 'dark' : 'light' }">
    <span x-text="currentTheme"></span>
</div>

If you need to get the current option when the theme changes, you could do something like this:

<div x-data="{ currentTheme: null }" @theme-changed.window="currentTheme = event.detail">
    <span x-text="currentTheme"></span>
</div>

<div x-data="{ currentTheme: null }" @theme-changed.window="currentTheme = event.detail">
    <span x-text="currentTheme"></span>
</div>