{!$User.UIThemeDisplayed} not getting correct Theme in Lightning out

Question

I am new to Lightning so it might be very foolish question.

I have a Visualforce page with 2 buttons "Save" and "Cancel" and both has custom code which uses "PageReference" to navigate to other page. It is working fine in Classic but Lightning it is not working.

So for Lightning, I have create a Lightning component and loading this component on Visuaforce page using Lightning connect.

In Lightning connect javascript I am using following code -

<script>
    var userContext = "{!$User.UIThemeDisplayed}";
    $Lightning.use("c:NavButtonApp", function() {
        $Lightning.createComponent("c:NavButton",
                                   {"url" : "{!navigationURL}" , "ButtonName" : "Demo BTN", "UserContext": userContext },
                                   "lightning",
                                   function(component) {
                                       console.log("First_Lightning component loaded");
                                   }
                                  );});  
</script?

When I run this page in Salesforce Classic then userContext displays "theam3" and that is correct. but when I open this visualforce page in Lightning environment even though this userContext displays "theam3". I was hoping it will display "theam4d". Can you suggest if I am doing something wrong.

Answer 1

It's possible that you're seeing what I'm seeing, which is that the UIThemeDisplayed value depends on the last selected theme. So, if I have a tab open in Classic, and I switch to Lightning, the theme will be "Theme4d". If I open a new tab and switch to Classic in the new tab, then the new tab will display "Theme3". Now, the confusing part is that if you go back to the original tab and refresh, you will still see the Lightning Experience theme, but the UIThemeDisplayed value will now incorrectly read "Theme3".