Dark theme issues because bulma sets background-color on HTML element

[rwlnd]

This is about the Bulma CSS framework
I'm using Bulma version 0.8.0
My browser is unrelated ( latest firefox, chrome, edge, .. )

Description

I'm building a gatsby application with bulma as a base for the css.
For hours I was looking what was causing a "white flash" when refreshing my page when my custom "dark theme" was enabled which sets the body color to a dark color.

The problem was: html has a background-color: white by default from bulma.css

When you DON'T set a background color and you refresh the page, I guess modern browsers "remember" the last set background-color and leave the background-color as is while refreshing.
When a specific background-color is assigned to the html element (like bulma does by default), when refreshing the page, the page gives the impression of flashing in the specified background-color.

Steps to Reproduce

Create a simple page, add a simple container and set body background-color to a color.
I created a jsfiddle for this: https://jsfiddle.net/ret8p61o/1/

Expected behavior

The html tag should take over the background-color set on the body tag and the page should be completely filled by the set color.

Actual behavior

html stays white because this is a hardcoded default set by bulma.

A possible workaround is adding unset on the html background-color.
I also made a jsfiddle for this: https://jsfiddle.net/06zt2pho/

The thing is, this is not supported in all browsers + there is no point (as far as I can tell) to explicitly set the HTML background-color to white (or whatever color).

I ran into the problem myself after implementing a mechanism to dynamically set a light / dark theme. I think this is something that is being done more and more so I'm assuming this will be more and more of a problem so I think it would be best to omit the background-color on the HTML tag.

Please let me know if you want me to do further investigation or even make a PR for this.

Thanks for looking into this.

[jgthms]

You can customise the html background (not the body one) with Sass. The reason it’s there is because a browser can set its own background, which can make a website unreadable based on Bulma’s text colours.

[rwlnd]

Hey @jgthms, thank you for your reply and insights. I know you can set a new value for the html background-color in the sass but that still makes working with dark themes/dynamical background-colors really cumbersome and confusing. I spent HOURS last night trying to fix a "flicker of unstyled content" (FOUC) only to find out after a lot of research that the html background-color was enforced by bulma.

You are right that a user can set a different browser background color, but for me, at that point, the html background should indeed be the color the user set it to be. That's his responsibility.

I think it should be up to bulma to enforce to have at least 1 main parent container for which you set the background-color. Or if you really really want to enforce a background-color, do it on the body tag, but not the html one.

[jgthms]

Which browser are you using to see that flicker of unstyled content?

I created a dark theme for my own website: https://jgthms.com/
I set the html background to a CSS variable:

Can you see a FOUC as well?

[rwlnd]

The flickering was most noticeable in firefox dev. Now, I must say, it was also related to other things like not setting the correct classes at te correct point in the gatsby/react lifecycle so bulma was not the single cause of my issues.

I gave your linked website a quick look and it works like you describe but that's because you base the background color completely on setting it on the HTML tag, not the body, without a wrapping container. Also, you don't have a theme toggle so it's hard to check how the site behaves when switching fe. from the dark to the light theme and then refresh, THAT's when the "flicker" effect occurred for me because the html background always got reset because of the explicit background-color assignment in css.

I'm not here to make this a back and forth discussion about where to do what in css but in my humble opinion, critical styling should never be set on the HTML element. If you want to make sure that your content has a certain background color, it should be enforced on the BODY or the main container element.

I understand of course that if a lot of bulma styling is based on this decision, it's maybe not a quick fix.

[jgthms]

The reason for it to be on html rather than body is because it ensures the whole viewport height is covered, no matter the height of the page: https://jsfiddle.net/q47pumhr/

To test the toggle, use Chrome's Devtools:

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.