F
Filament7mo ago
EMMAN

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
EMMANOP7mo ago
up help guys please 😦
Bruno Pereira
Bruno Pereira7mo ago
Check the css classes on the html tag and/or localstorage.getItem('theme')
EMMAN
EMMANOP7mo ago
not working
Bruno Pereira
Bruno Pereira7mo ago
I dont know if thats the correct name, check in your browser
EMMAN
EMMANOP7mo ago
is there any other way?
Bruno Pereira
Bruno Pereira7mo ago
That I know, no. It's all css controlled by the dark class in the html tag
CodeWithDennis
CodeWithDennis7mo ago
You can also try; document.documentElement.classList.contains('dark')
Dennis Koch
Dennis Koch7mo ago
Nobody can't help if you don't share what you did
LeandroFerreira
LeandroFerreira7mo ago
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>

Did you find this page helpful?