npmaile/blog

Some "flashbang" corner-cases

Closed this issue · 1 comments

cipriancraciun commented

I find your term of "flashbang" extremely accurate in how I feel when I open a web site at night and it blinds me with a white screen. Thanks for coming up with it!

However, the solution you are proposing, in my experience, doesn't work quite as well as one hopes; it does indeed switch the site to a dark-mode palette, however it doesn't eliminate the following problems:

  • some browsers (like for example Firefox, at least a few versions ago) default to a full white page even before starting to load the actual content, and even if the browser is using a dark-mode theme; I don't know if this is still the case, because I've used the following chrome/userContent.css to fix this:
@-moz-document url(about:blank) {
    * {
        background: #2a2a2e;
    }
}
@-moz-document {
    html:root {
        background: #2a2a2e;
    }
}
@-moz-document url-prefix(http:), url-prefix(https:), url-prefix(file:) {
    html:root {
        background: #2a2a2e;
    }
}

  • some browsers will eagerly start rendering the partial HTML received, before loading the CSS, thus if the site owner puts that CSS in a file, at the end, you'll still get the "flashbang" effect (although for a limited time); one solution is to put that in <head><style>... as close as possible to the beginning of the HTML;

  • in recent releases, there is another option to instruct the browser that the site prefers a dark-mode color scheme, and the browser would choose the colors; this is achieved by the following <head> snippet <meta name="color-scheme" content="dark" />; it is specified here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name

  • in relation to the previous item, it appears there is also a color-scheme CSS attribute that does the same: https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

Thanks for the article!

npmaile commented

thanks for posting the feedback. I think I changed to using the built in colorscheme since you posted this. I hate to dismiss your suggestion to use the chrome/userContent.css, but the post was mostly meant for developers, and I like the brevity as it is.

I appreciate you taking the time to write your thoughts, and I honestly feel bad closing the issue, but I don't want issues piling up.