When it comes to loading a CSS file based on the user's selected theme, I encountered an issue while trying to implement this in my Symfony application using Twig templates. The code worked flawlessly on a simple HTML page, but transferring it to a Twig template posed a challenge in passing the CSS route to the JavaScript document.write function.
<script>
var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
{};
var themeName = themeSettings.themeName || '';
if (themeName)
{
document.write('<link rel="stylesheet" id="theme-style" href="css/app-' + themeName + '.css">');
}
else
{
document.write('<link rel="stylesheet" id="theme-style" href="css/app.css">');
}
Essentially, I wanted to dynamically set the href attribute of the document.write function within Twig like so:
<link href="{{ asset('bundles/activos/css/app-red.css') }}" rel="stylesheet">Here, the "app-" part remains constant, while "red" varies based on the value assigned to the themeName variable.
In my attempt to achieve this, I tried:
<script>
var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
{};
var themeName = themeSettings.themeName || '';
if (themeName)
{
document.write('<link rel="stylesheet" id="theme-style" href="{{ asset('bundles/activos/css/app-' ~ themeName ~ '.css') }} ">');
}
else
{
document.write('<link rel="stylesheet" id="theme-style" href="{{ asset('bundles/activos/css/app.css') }} ">');
}
</script>
However, this approach resulted in an error message:
Variable "themeName" does not exist in ::base.html.twig at line 1188
The error stemmed from themeName being a JavaScript variable rather than a Twig variable.
This indicates that passing a JavaScript variable to Twig poses challenges due to their server-side and client-side distinctions. Perhaps utilizing Ajax could provide a solution, though I am unsure how to proceed in that direction.