When I set the ‘Default Color Mode’ to ‘Auto’, Bootstrap Studio adds some JavaScript to handle switching the page to light or dark mode.
I’d love it if you guys would minify this JavaScript.
When I set the ‘Default Color Mode’ to ‘Auto’, Bootstrap Studio adds some JavaScript to handle switching the page to light or dark mode.
I’d love it if you guys would minify this JavaScript.
File > Settings > Design > Export > Export Settings
Turn on the first option, and your JS will be minified.
That won’t work as the JS generated is place in the head of the HTML, minifying HTML won’t work either, this is something @martin would need to address. Although @kuligaposten did provide a solution in another post a few weeks ago (which is now unfortunatly offline).
@richards I mean, if anything fails, @BlueMarble you could always
@muhammadhakimjazuli the problem with that is by setting the default color mode to auto it will automatically add the unminified javascript. The only solution at the moment is to set the mode to light and use some custom JS as @kuligaposten mentioned in this post:
As a work around using the javascript from bootstrap:
And adding it to a javascript file works,
keeping the bss settings as light
If the question is why the theme-switching JS code is in the head of the page, this is deliberate. It is because it needs to run as soon as possible in order to prevent flashing of white content on page load when dark mode has been selected by the user. If this code is moved to a file, it will take some time for the browser to load it during which the incorrect theme is displayed.
The code is small and even though it is unminified it shouldn’t affect your page load time or Lighthouse scores. We can make it respect the Minify export setting and minify it when it is activated, but I am not sure the performance difference can even be measured.
@richards
last comment from @kuligaposten “If you will do something similar remember that the Default Color Mode in the settings dialog must be ‘light’ or ‘dark’ if you choose ‘auto’ it will trigger Bootstrap Studio’s javascript code in the head section”
I failed to understand… what script in the head @kuligaposten refering to…
if you remove the bss theme-switcher default component, and rebuild it manually(as separated html, js and css), shouldn’t you have no script in the head tag?
as for @martin I think there’s a workaround(which most likely we shouldn’t do… but…) for the flashing problem, which is by saving the script as module JS, then reference it in the head tag(manually in the head content setting)…
why module JS?… well…
This isn’t anything to do with the theme switch component but rather the theme option in the settings. If you set it to auto then it generates JavaScript in the head
@martin’s answer was my first thought. Does it even matter if it’s minified? It’s just a few lines of JS. Unless you’re stuck on a 2G or 3G connection, it’s unlikely you’d notice any difference between minified and beautified versions of this code.
In all but the least modern countries, the days where minifying code makes a noticeable difference in website loading speed are fading fast. 95% of the world has 3G and 60% has 4G. In 5 years, 95% will have 4G, and 5G will be fast replacing it in modern countries.
I often tell people, when considering a website’s loading speed, also consider who will be visiting it, where they are located, and the type of internet connections they have.
For example, I build websites mostly for small businesses located in urban or suburban areas of America. The vast majority of traffic these clients get is from people with broadband/4G internet (100 mbps or faster.) Unless they’re specifically concerned about people in rural areas who are stuck on DSL, 3G, or slow satellite connections, blazing fast website speed is not crucial. A lighthouse score of 60 vs 100 is indistinguishable on a 100 mbps connection. I’ve seen websites that score in the 30’s on Lighthouse that still rank in the top 3 in the Google SERP for their industry.
(Also, the unminified code generated by BSS is already very clean. I’ve seen code from some website builders that is horrific. You should look at the HTML that programs like Adobe Muse used to produce!)
I see, will check it later I guess…
If a model that offers a simplified version of light and dark theme management.
Of course, there’s always room for improvement.
https://theme-management.bss.design
Thanks to @kuligaposten for inspiring me with a solution.
If you only want your site to respect the user’s system color mode setting without the Theme Switcher add this in the head content and in the settings dialog set the Default Color Mode to your prefered mode light or dark not auto
<script>document.documentElement.setAttribute('data-bs-theme',(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));</script>
if you use the Theme Switcher and want the icon on the dropdown to change to the selected color mode
add this to a javascript file, and do not add any script tag in the head content
class IconChecker {
constructor() {
this.init();
}
toggleIcon(themeIcon) {
if (themeIcon) {
document.querySelectorAll('.theme-switcher').forEach((switcher) => {
const switcherIcon = switcher.querySelector('svg');
switcherIcon.innerHTML = '';
switcherIcon.appendChild(themeIcon.cloneNode(true));
});
}
}
iconChecker() {
const theme = localStorage.getItem('theme') || 'auto';
const icon = document.querySelector(`[data-bs-theme-value=${theme}] svg`);
if (icon) this.toggleIcon(icon);
}
init() {
const iconObserver = new MutationObserver(() => this.iconChecker());
iconObserver.observe(document.documentElement, {
attributeFilter: ['data-bs-theme'],
});
this.iconChecker();
}
}
document.addEventListener('DOMContentLoaded', () => {
new IconChecker();
});
There is no issue with flashing white content by moving the theme switcher code to a javascript file. Here is an example check it out, if you see any white flashing content let me know.
In your example, you’re loading your theme switcher JS file before the head content. I think Martin meant if you added the JS in the traditional manner in BSS (Design > Javascript) it would get placed before the body closing tag, like any other JS script.
The theme switcher JS is added in the traditional manner in BSS (Design > Javascript). The bs-init-color-modes.js
is only visible on a dummy.html which I hide in export. In the export settings the minify js is set to false so the js file doesn’t change name when export.
The example just show that the js code can be in a js-file instead of inline
script in the head <script>the js code here</script>
and it wont be any color flickering when changing color mode
Simplified proposal that does not use the “auto” mode.
JS script place in head to apply mode before page display.
let theme = localStorage.getItem('theme');
if (theme) {document.documentElement.setAttribute('data-bs-theme', theme);}
Plus a JavaScript file in the traditional way in BSS.
Example: https://theme-management.bss.design/
When you’re working with paid advertising, even a 500 ms delay could cause sales to decrease by 30% or more, especially when the user is on mobile. With faster connections, people’s attention spans are even shorter.
I’d be VERY interested in seeing the source that states a half second difference in page load causes a 30% drop in sales. That’s an extremely generalized claim, and I find it hard to believe it would result in such a drastic drop.
A Google search on the subject shows the most often cited statistic is from a study done by Amazon showing that every 100ms in delay was equal to a 1% drop in sales. So a 500ms delay would be 5%. Another oft-quoted statistic by Akamai states that a 1 second delay resulted in a 7% drop in conversions. So .5 seconds would be a 3.5% drop. This is pretty much in line with Amazon’s study
Both are significantly less than THIRTY percent!
In any event, minifying the theme switcher JavaScript is certainly not going to decrease page load by half a second. On a 4G or 100 mbps broadband connection, you would not even be able to perceive the difference.
I had a landing page that loaded in 500 ms that converted at 9%.
I created two copies of the landing page that had the same content (e.g. HTML, CSS, headlines, images) but I slowed down the loading speed with JavaScript. One loaded in 1 sec. and the other 2 sec. They had conversion rates of approximately 6% and 3% respectively.
If I can squeeze out just 50-100 ms faster loading time by minifying a script, it’s worth it to me. Faster loading sites make me more money.
I know my business and my metrics. Whether you believe me or not doesn’t matter.