Switching themes doesn't work on live website

Bug Reports
1

Was playing around and quite happy to see that the theme switching to/from dark mode has been implemented. However, even though previews and such work perfectly. When published to final site. The website only chooses the host systems theme. And any tries to switch are in vain.
website: https://cloudroot.se

Any tips would be greatly apreciated.

2

Thank you for sharing your website! It appears that you are adding some hashes dynamically to JavaScript files on the server side (maybe for cache busting). However you are placing this in an incorrect place, so your script tags become <script type="fc234969ed4a1d6b15335610-text/javascript">. This causes the browser to not evaluate the theme switcher code since it doesn’t know it is JavaScript.

3

Disable the rocket loader in cloudflare, or you can try to add a data-attribute to the theme-switcher script before you upload your site
e.g <script data-cfasync="false"> that is how you tell the rocket loader to ignore a script

1 Like
4

Disabling Rocket Loader solved it imediately.
Good catch! Thanks all who helped and chimed in!

5

Thank you @kuligaposten! I wasn’t aware Cloudflare offered such a service.

2 Likes
6

@martin

I tested the Theme Switcher script with Cloudflare Rocket Loader.
If the data attribute data-cfasync="false" is on the opening script tag, the Theme Switcher will work with the Rocket Loader.

With script like the Theme Switcher that manuplilate the HTML tag before the DOM is fully loaded I would recommend in the Bootstrat Studio Docs under Custom Domain not activate the Rocket Loader nor any of the options on Cloudflare Auto Minify. Minify can and should be done within the Boostrap Studio App, not on Cloudflare.

Speaking about the Docs, the sections Exporting and SEO and socials should be updated to mirror the last changes in the App

7

Is there a way to add these data attributes from within the gui, without converting the page to custom code? I fail to find it, if it exists.

8

@CloudRoot

If you replace your jQuery script for the navbar with this then you don’t need jQuery.

document.addEventListener("DOMContentLoaded", function() {
    document.addEventListener("click", function(e) {
        if (!e.target.closest(".navbar") && document.querySelector(".navbar-collapse").classList.contains("show")) {
            document.querySelector(".navbar-toggler").click();
        }
    });

    window.addEventListener("scroll", function() {
        if (document.querySelector(".navbar-collapse").classList.contains("show")) {
            document.querySelector(".navbar-toggler").click();
        }
    });
});

On my screen the dropdown menu of the Theme Switcher goes out to the right you could change the Theme Switcher in the options panel to dropstart.

Or you can do it with a CSS class

@media (min-width: 992px) {
  .theme-switcher .dropdown-menu {
    margin-left: -100px;
  }
}

No, if you really want the Rocket Loader you need to add the attribute to all the pages after you have exported your site

9

Fantastic! Not needing JQuery, and thusly slimming the (small) small code base. Is great!

I am really greatful for the great answers I’ve received. In PM’s and here too.

10

@CloudRoot

If you want the page scroll to the right place when clicking a link in the navbar
you can add this to your css file

html {
  scroll-padding-top: 78px;
}

ha de så gött skånepåg

1 Like
11

The gift that keeps on giving!

Tack detsamma :saluting_face:

1 Like