How to detect UI theme in Lightning Web Components? - Answers - Salesforce Trailblazer Community
Trailblazer Community
Ask Search:
Harrison KaiserHarrison Kaiser 

How to detect UI theme in Lightning Web Components?

I'm trying to detect UI theme displayed for the current user in a lightning web component, but I'm not sure how to do it. Any help would be appreciated, thank you. 
Best Answer chosen by Harrison Kaiser
Savita NarukaSavita Naruka
Hi,

UI Theme Detection can be done in one of two ways:

Accessing global variables:
$User.UITheme – Returns the theme that is supposed to be used.
$User.UIThemeDisplayed – Returns the theme that is actually being used.

Calling Apex utility methods:
UserInfo.UITheme() – Returns the theme that is supposed to be used
UserInfo.UIThemeDisplayed() – Returns the theme that is actually being used

Currently, Salesforce supports below themes
Theme1—Obsolete Salesforce theme
Theme2—Salesforce Classic 2005 user interface theme
Theme3—Salesforce Classic 2010 user interface theme
Theme4d—Modern “Lightning Experience” Salesforce theme
Theme4t—Salesforce mobile app theme
Theme4u—Lightning Console theme
PortalDefault—Salesforce Customer Portal theme
Webstore—Salesforce AppExchange theme

UI theme detection using global variables
check below sample code

<apex:page> <apex:pageBlock title="My Content" rendered="{!$User.UITheme == 'Theme2'}"> // this is the old theme... </apex:pageBlock> <apex:pageBlock title="My Content" rendered="{!$User.UITheme == 'Theme3'}"> // this is the classic theme ... </apex:pageBlock> </apex:page>
Copy
UI theme detection Using Apex Utility Methods
Check below sample code

public with sharing class UIThemeController { @AuraEnabled public static String getUIThemeDescription() { String theme = UserInfo.getUiThemeDisplayed(); return theme; } }
Copy
Use the UI theme detection based on your requirement.
Let us know if you have any queries.
Happy Learning!!!

All Answers

Savita NarukaSavita Naruka
Hi,

UI Theme Detection can be done in one of two ways:

Accessing global variables:
$User.UITheme – Returns the theme that is supposed to be used.
$User.UIThemeDisplayed – Returns the theme that is actually being used.

Calling Apex utility methods:
UserInfo.UITheme() – Returns the theme that is supposed to be used
UserInfo.UIThemeDisplayed() – Returns the theme that is actually being used

Currently, Salesforce supports below themes
Theme1—Obsolete Salesforce theme
Theme2—Salesforce Classic 2005 user interface theme
Theme3—Salesforce Classic 2010 user interface theme
Theme4d—Modern “Lightning Experience” Salesforce theme
Theme4t—Salesforce mobile app theme
Theme4u—Lightning Console theme
PortalDefault—Salesforce Customer Portal theme
Webstore—Salesforce AppExchange theme

UI theme detection using global variables
check below sample code

<apex:page> <apex:pageBlock title="My Content" rendered="{!$User.UITheme == 'Theme2'}"> // this is the old theme... </apex:pageBlock> <apex:pageBlock title="My Content" rendered="{!$User.UITheme == 'Theme3'}"> // this is the classic theme ... </apex:pageBlock> </apex:page>
Copy
UI theme detection Using Apex Utility Methods
Check below sample code

public with sharing class UIThemeController { @AuraEnabled public static String getUIThemeDescription() { String theme = UserInfo.getUiThemeDisplayed(); return theme; } }
Copy
Use the UI theme detection based on your requirement.
Let us know if you have any queries.
Happy Learning!!!
This was selected as the best answer
Savita NarukaSavita Naruka
Thank you