---
schema_version: "1"
id: ef47c9118cfa554bef708467bb9332553dd1fc27c0e2b3e2070a97167a57bc6d
title: $User.UITheme and $User.UIThemeDisplayed
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/variables/pages-variables-global-useruitheme.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-variables-global-useruitheme.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 3278ec787f0acb913057df0d9e5eb73c00517ef927f30d1038d60abd375499ff
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# $User.UITheme and $User.UIThemeDisplayed

These global merge fields identify the Salesforce look and feel a user sees on a given Web page.

The difference between the two variables is that `$User.UITheme` returns the look and feel the user is supposed to see, while `$User.UIThemeDisplayed` returns the look and feel the user actually sees. For example, a user can have the preference and permissions to see the Lightning Experience look and feel, but if they’re using a browser that doesn’t support that look and feel, for example, older versions of Internet Explorer, `$User.UIThemeDisplayed` returns a different value.

## Usage

Use these variables to identify the CSS used to render Salesforce web pages to a user. Both variables return one of the following values.

Valid values include:

-   `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 that applies to Customer Portals only and not to Experience Builder sites
-   `Webstore`—AppExchange theme

## Example

The following example shows how you can render different layouts based on a user’s theme:

```visualforce
<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>
```