How do you detect if a user is coming from SF1 in a lightning component?

Question

I'm developing a lightning app that users will be accessing via desktop and through Salesforce1. I've been using the $Browser variable to detect if the user is coming from mobile but that only works if they are accessing the page via a web browser on their phone and not the SF1 mobile app. It seems the $User.getTheme and $UserInfo.getUiTheme() functionality only works in visualforce pages.

Answer 1

There is an apex version of same as well

public with sharing class UIThemeController {
 @AuraEnabled
 public static String getUIThemeDescription() {
    String theme = UserInfo.getUiThemeDisplayed();
    return theme;
 }
}

The lightning component code will look like below

<aura:component implements="flexipage:availableForAllPageTypes" controller="UIThemeController" access="global">
 <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
 <aura:attribute name="Name" type="String" />
 <aura:attribute name="isLEX" type="Boolean" />
 <aura:attribute name="Desc" type="String" />
 <div class="slds">
  <div class="slds-card slds-card--empty">
  <div class="slds-card__header slds-grid grid--flex-spread">
   <h2 class="slds-text-heading--small slds-truncate">Lightning Component</h2>
  </div>
 <div class="slds-card__body slds-p-horizontal--small">
   <h3 class="slds-text-heading--small slds-p-top--large slds-p-bottom--large">Detected Theme: {!v.Name}</h3>
  <h2 class="slds-text-heading--small slds-p-top--large slds-p-bottom--large">{!v.Desc}</h2>
<aura:if isTrue="{!v.isLEX}">
 <p>This text is only displayed in Lightning Experience</p>
 <aura:set attribute="else">
 <p>This text is only displayed outside of Lightning Experience</p>
</aura:set>