2

I have Codey Canyon theme enabled (the orange one), but a Lightning App which is being used in a Visualforce page is still showing the standard blue theme.

Visualforce page

<apex:page showHeader="false" sidebar="false" applyBodyTag="false" applyHtmlTag="true" standardStylesheets="false">
    <body>

        <apex:includeLightning/>

        <div id="main" />

        <script>
            $Lightning.use("c:CustomLightningApp", function () {
                $Lightning.createComponent("CustomLightningComponent",
                    null,
                    "main",
                    function (cmp) {
                        console.log("created");
                    }
                );
            });
        </script>
    </body>
</apex:page>

Lightning Application: CustomLightningApp

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:CustomLightningComponent" />
</aura:application>

Lightning Component: CustomLightningComponent 

<aura:component>
   <!-- contents not showing custom theme -->
</aura:component>

How do I get the app to use a custom theme?

Improve this question
7
  • I'm assuming the Lightning App uses standard lightning components which use the variant="brand" attribute?
    – Brian Miller
    May 8, 2019 at 19:05
  • @BrianMiller uses standard lightning components yes, using variant="brand" sometimes...
    – Robs
    May 8, 2019 at 19:31
  • Is the VF page running in classic? If that was the case, I'd say that the theme doesn't get activated unless you're actually in the Lightning Experience. But this is just speculation - not sure what the issue is
    – Brian Miller
    May 9, 2019 at 6:59
  • @BrianMiller thanks for helping, I've updated the question with a code example
    – Robs
    May 9, 2019 at 7:56
  • @Robs Did you get the answer? I'm also facing same issue. In my case its with the LWC and seems like App.css overrides the slds.css and hence brand color is not getting reflected in the lwc.
    – Rohit Mourya
    Jun 19, 2020 at 11:46

1 Answer 1

Reset to default
1

I think its a known issue with LightningOut App. I was also facing similar issue. Only the difference was I'd include Lightning Web Component in a Lightning App. And this Lightning App was loaded in Visualforce Page.

When I enabled different theme and loaded this page in the browser, the brand color gets overridden. Further in the browser console, I observed that app.css was overriding slds.css which caused this issue. The Lightning App when included in Home Page, theme and brand color gets applied automatically. It works absolutely fine however, it fails only in case of Visualforce Page. After couple of trials, we reach to below solution. We disabled the app.css since slds.css anyway applies the same styling to the VF page. Below is the code for reference.

<apex:page showHeader="false" sidebar="false" applyBodyTag="false" applyHtmlTag="true" standardStylesheets="false">
    <body>

        <apex:includeLightning/>

        <div id="main" />

        <script>
            $Lightning.use("c:CustomLightningApp", function () {
                $Lightning.createComponent("CustomLightningComponent",
                    null,
                    "main",
                    function (cmp) {
                        console.log("created");
                        for (var i = 0; i < document.styleSheets.length; i++) {
                            console.log('-->'+document.styleSheets[i].href);
                            if (document.styleSheets[i].href.search(/app.css/) != -1) {
                                document.styleSheets[i].disabled = true;
                            }
                        }
                    }
                );
            });
        </script>
    </body>
</apex:page>

This might not be a foolproof solution, but it does the job. At the initial load you might observe lightning loading icon with brand color and then changes to standard blue color. However once the script gets executed and loading icon is gone, theme and brand color gets reapplied and everything continues to work fine. This has been tested and works fine in Edge, Chrome and Firefox browser.

*Please note that, you might need to check browser console to identify exactly which css is overriding the theme and brand color.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.