How to Share Salesforce Visualforce Pages Between Classic and Lightning Experience?

Visualforce Pages should be created correctly such that they behave properly whether they run in Salesforce Classic or Lightning Experience.

Detecting and Responding to the User Experience Context in Visualforce Markup

The current user-experience context can be determined by using the global variables $User.UITheme and $User.UIThemeDisplayed.These global merge fields identify the Salesforce look and feel a user sees on a given Web page.These global variables return a string that uniquely identifies the current user interface context

The variables can be used to make your pages adaptable to Lightning Experience, Salesforce Classic, and the Salesforce app.

There is a little difference between these two variables.

The $User.UITheme returns the look and feel supposed to be displayed to the user, while $User.UIThemeDisplayed returns the actual look and feel as displayed to the user.
For example, $User.UITheme returns the Lightning Experience look and feel, but the user is using a browser that doesn’t support that look and feel, for example, older versions of Internet Explorer, $User.UIThemeDisplayed returns a different value.

These Variables help you identify the CSS that helps to render Salesforce web pages to a user.

Both variables return one of the following values.

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

Share Salesforce Visualforce Pages Between Classic and Lightning Experience

Above are the screenshots o the same page in Lightning and Classic Environment. Here we have used the $User.UITheme to identify the user experience context and we are identifying the CSS accordingly to render salesforce page to the user

We can also use javascript to find the current user context. Here is the snippet of code that helps you find the user Experience context:

<script>
    var j$ = $.noConflict();
    j$( document ).ready(function() {
        console.log( "ready!11" );
        var parentPageUrl = document.referrer;
        //alert(parentPageUrl);
        if(parentPageUrl.indexOf(".lightning.force.com") > 0){
            j$("body").addClass('main-sec-lightning');
        }
        else {
            j$("body").addClass('main-sec-classic');
        }
    })
</script>