How to pass variable from javascript to twig?

Because I know all the possible values that the variable themeName can take, I realized that I could solve this in a very simple way. Although with this variant I am not passing any variable from Javascript to Twig , so I am not answering the title of the question, but I do give a solution to the problem raised.

<script>
   var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
   {};
   var themeName = themeSettings.themeName || '';
   if (themeName)
   {
            if (themeName === "blue")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-orange.css') }}" rel="stylesheet" >');
                }
            if (themeName === "custom")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-custom.css') }}" rel="stylesheet" >');
                }
            if (themeName === "green")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-green.css') }}" rel="stylesheet" >');
                }
            if (themeName === "orange")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-orange.css') }}" rel="stylesheet" >');
                }
            if (themeName === "purple")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-purple.css') }}" rel="stylesheet" >');
                }
            if (themeName === "red")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-red.css') }}" rel="stylesheet" >');
                }
            if (themeName === "seagreen")
                {
                     document.write('<link href="{{ asset('bundles/activos/css/app-seagreen.css') }}" rel="stylesheet" >');
                }
  }
    else{
         document.write('<link href="{{ asset('bundles/activos/css/app.css') }}" rel="stylesheet" >');
  }

  </script>

With this I could solve it although I still do not know how it could be done in the other way, that is, passing the variable themeName to Controller and then return it to Twig ; for the case in which you do not know the possible values that this variable can take.

You could store the variable that the subject gives you in a cookie, from the controller you can do it, and then with JavaScript you verify that the cookie exists and you get the stored value; in case of not existing then you establish a default theme.

Practical example of implementation

In the application entry controller:

public function indexAction(Request $request){
   $miVariable = algo de la base de datos por ejemplo
   $vista = $this->renderView('AppBundle:Default:index.html.twig', array('varible'=$mivaraible));

   $response = new Response($vista);

    $cookieFromRequest = $request->cookies;
    if (!$cookiesFromRequest->has('myAppTheme'))
    {
        $cookieTheme = new \Symfony\Component\HttpFoundation\Cookie("myApptheme", "defaultTheme");
        $response->headers->setCookie($cookieTheme);
    }

    return $response;
}

And in the JavaScript (adapting it to the current exercise and to speed it up) using the jQuery.cookie pluggin, try to get the cookie with name myApptheme:

var theme = $.cookie('myApptheme');
if(theme !== null)
{
   document.write('<link rel="stylesheet" id="theme-style" href="css/app-' + theme + '.css">');
}
else
{
   document.write('<link rel="stylesheet" id="theme-style" href="css/app.css">');
}

I consider that another solution would be to store the selected topic by the user in the database (if you use a database) and, from the JavaScript, obtain that value via AJAX (you can use the bundle FOSJsRoutingBundle to call the controller from the JavaScript).

And a third solution, since doing everything from javascript: try to get a cookie that contains the theme, if it does not exist, create it with the default theme and the consequent style tag for it. And let's say that when the user selects a topic from the proposed ones, write his name in the cookie to use it in other requests.

You must place directly in your template:

 <link href="{{ asset('bundles/activos/css/app-' ~ themeName ~ '.css') }} "rel="stylesheet" >

And in your controller you must pass that parameter

return $this->render('index.html.twig', array(
    'template' => $template
));

For this case you do not need AJAX, you only need ajax if you want to do the inverse, pass parameters from Javascript to Symphony