is it possible to get the current theme-mode: [light/dark] variable in a controller?
we are generating SVG´s and would need any information if the user is currently in light or in dark mode to set the background properly. for me the simplest way would be to get access to a variable dark=true/false - but it seems impossible, i can not find any information in session(), filament() and so on. I know there are ways to do ist with media-Queries - but this is not working for me so far. Would be glad if anyone can point me in the right direction or how to do it the right way. thank you....
6 Replies
Not that I know off since we use alphine, you would need to override the selector and add a session store for the theme.
if you are generating the svg, why not generate both?
Hi Leandro, the problem is, we would like to embed it in infolist - how to decide which one to use? - i got a solution
GitHub
GitHub - meyfa/php-svg: Vector graphics (SVG) library for PHP
Vector graphics (SVG) library for PHP. Contribute to meyfa/php-svg development by creating an account on GitHub.
incomplete Snippet - but in the SVG itself, it could be determinded at least if it´s dark or light - the problem is still, we dont know if system == light or dark
public function renderThemeMode(){
$script = new SVGScript("
var theme = localStorage.getItem('theme');
var items = document.getElementsByClassName('backgroundColor');
console.log(theme); if(theme == 'dark'){ for(i = 0; i < items.length; i++) { items[i].style.fill = '".self::$backgroundColorDark."'; }
} else { for(i = 0; i < items.length; i++) { items[i].style.fill = '".self::$backgroundColorLight."'; } }"); $this->doc->addChild($script); } this is in our SVGCreation class all items, that should switch the background should have a matching class like "<rect class='backgroundColor'".... its not 100% ... but it is working so far it looks in LocalStorage ... for the value light, dark or system in this case system is set to light also i ended up using not an ImageEntry - beacause Image Entry will not Execute Javascript - so i created a CustomEntry and inserted the image via Iframe simple problem -> many hours 😆
console.log(theme); if(theme == 'dark'){ for(i = 0; i < items.length; i++) { items[i].style.fill = '".self::$backgroundColorDark."'; }
} else { for(i = 0; i < items.length; i++) { items[i].style.fill = '".self::$backgroundColorLight."'; } }"); $this->doc->addChild($script); } this is in our SVGCreation class all items, that should switch the background should have a matching class like "<rect class='backgroundColor'".... its not 100% ... but it is working so far it looks in LocalStorage ... for the value light, dark or system in this case system is set to light also i ended up using not an ImageEntry - beacause Image Entry will not Execute Javascript - so i created a CustomEntry and inserted the image via Iframe simple problem -> many hours 😆
Just create both. Use a custom infolist entry that outputs them both and use tailwind classes to show or hide them based on dark mode.