jgthms
Styling issues on page load (light / dark mode)
This is about Bulma.
Overview of the problem
I'm using Bulma version 1.0.2 My browser is: Chrome / Firefox
Description
When I load my website I get some initial stylings I can not get rid of.
https://github.com/user-attachments/assets/7949e008-2d6c-45de-a192-a98f746c25a3
While I respect the initial user dark mode preferences I set the theme with js on the body like this when the user set it to something else in a previous session.
<body class="theme-dark">
...
The live version of it can be found here: https://develop--amazething.netlify.app/
Maybe I misunderstood how to overwrite the css variables because it sometimes did not change it how I expected it to be so quite a few css rules of mine look like this instead:
body.theme-light {
background-size: cover;
background-image: linear-gradient(to top, #95918b 0%, #304352 100%);
}
body.theme-dark {
background-size: cover;
background-image: linear-gradient(to top, #1f2229 0%, #304352 100%);
color: var(--white-dark-87);
}
Steps to Reproduce
I noticed that it also happens on the official bulma.io website on Chrome and Firefox. This happens when the user's chosen theme doesn't match their system settings (e.g., the user sets light mode but has dark mode enabled in the OS) and also if your custom style differs from the standard values for that specific theme.
https://github.com/user-attachments/assets/ab90550c-a91f-4182-a50a-32bd2d1a0a84
Expected behavior
The website should not flash from one theme to the other when the user setting does not match the system settings.
I am not sure if this is a bulma specific problem but at least it also happens on the official website and maybe someone else here knows how to deal with it.
I'm noticing the same thing. I was trying to figure out how the bulma docs was doing the switch, still not sure. But I guess by some JS and cookies?
Haven't tried this yet, but I was going to try to set the preference server side, along with other user profile settings and see if rendering the class toggle will prevent the flashing.
Though, not sure what to do if the user is not logged in...
@thomthom It has been a while since I reported this and I took a break from my project but it would be nice if you could update me if you find a solution for this as it is really quite annoying. As far as I remember one of the problems is that with view-transitions enabled the initial override of the variables also triggered a transition.
But even when I disabled that at the start it still happened because bulma also has normal css transitions for most elements that will be played if you only made changes to some of the variables from the standard bulma dark theme for your website. Ironically, setting the global bulma css animation duration to 0 during page load (not sure what the variable is called at the moment) it still played the css animations.